通過jQuery的比較來認識AngularJS

這一章主要是通過幾個例子分别通過jQuery和AngularJS來達到效果。主要通過思維轉換來進一步了解AngularJS架構設計背後的思想。

**注意:

1.為了不浪費界面時間,界面用到了bootstrap.

2.所有代碼寫在一個檔案中，友善大家複制粘貼.

3.引入css和angularJS檔案使用的是百度靜态庫,如果沒有網絡環境請自行下載下傳引用依賴檔案.

4.如果覺得看比較jquery和angularJS沒有興趣的,可以直接跳過,閱讀下一章TodoList,這個列子是一步一步帶大家完成熟悉angularJS編碼思想**

首先來看一個簡單例子,大家可以直接複制粘貼代碼,檢視效果

使用者輸入

1.輸入框輸入值

2.下面h1标簽馬上有顯示

下面是jquery代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輸入測試</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.1.1/css/bootstrap.css">
</head>
<body>
<form>
    <div class="form-group">
        <label for="inputName" class="col-sm-2 control-label">名字:</label>
        <div class="col-sm-10">
            <input type="text" id="inputName" class="form-control" placeholder="請輸入你的名字">
        </div>
    </div>
    <div class="col-sm-10 col-sm-offset-2">
        <h1 id="myText"></h1>
    </div>
</form>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
    $('#inputName').on('keyup',function(){
        $('#myText').html($(this).val());
    });
});
</script>
</html>

下面來看一下angularJS的代碼

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.1.1/css/bootstrap.css">
</head>
<body>
<form>
    <div class="form-group">
        <label for="inputName" class="col-sm-2 control-label">名字:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="請輸入你的名字" ng-model="inputName">
        </div>
    </div>
    <div class="col-sm-10 col-sm-offset-2">
        <h1>{{inputName}}</h1>
    </div>
</form>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.9/angular.min.js"></script>
</html>

通過這個簡單例子可以很清楚的看到,angularJS都沒有寫任何的JS代碼就實作了這個輸入效果。這裡可以簡單總結

1.jquery是通過操作DOM來達到實作目的,換句話說,也就是必須要有了頁面,再根據頁面來進行相應的程式設計

2.angularJS主要關心的卻是資料

購物車

注意上面兩點理論,我們來看一下稍微複雜點的例子,做一個簡單的購物車.依據angularJS主要關心的是資料的這個特點,我們首先來編寫angularJS相關代碼,具體效果如下:

AngularJS快速開始(二)--與jQuery比較來認識AngularJS通過jQuery的比較來認識AngularJS

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.1.1/css/bootstrap.css">
</head>
<body>
<div ng-controller="CartController" class="panel panel-primary">
<div class="panel-heading text-center"><h3>你的購物車</h1></div>
    <div class="panle-body"></div>
    <table class="table table-bordered table-hover">
        <tr ng-repeat="item in items">
            <td class="text-center"><span ng-bind="item.title"></span></td>
            <td class="text-center">
                <input type="text" ng-model="item.quantity" class="form-control">
            </td>
            <td class="text-center"><span>{{item.price | currency}}</span></td>
            <td class="text-center"><span>{{item.price * item.quantity| currency}}</span></td>
            <td>
            <button type="button" class="btn btn-primary" ng-click="del($index)">
                删除
            </button>
            </td>
        </tr>
        <tr>
            <td colspan="4" class="text-center">總計</td>
            <td>{{total}}</td>
        </tr>
    </table>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.9/angular.min.js"></script>
<script>
    var myApp = angular.module('myApp', []);
    myApp.controller('CartController', ['$scope', function($scope){
        $scope.items = [
            {title:'友善面',quantity:,price:},
            {title:'可樂',quantity:,price:},
            {title:'口香糖',quantity:,price:},
            {title:'辣條',quantity:,price:}
        ];
        $scope.total =total();
        $scope.del = function(index){
            $scope.items.splice(index,);
            $scope.total = total();
        }
        function total(){
            var total = ;
            $scope.items.forEach(function(item){
                total += item.quantity * item.price;
            });
            return total;
        }
    }]);
</script>
</html>

來分析一下上面的代碼:

var myApp = angular.module('myApp', []);

這一段建立了一個angularJS子產品,關于什麼是子產品,為什麼要用,大家可以參考我的javascript模式–子產品模式這篇文章,介紹了JS子產品模式的基礎,當然AngularJS是遵循 AMD 的,大家有一個大概了解什麼是子產品就行了。

大家注意看

HTML

代碼中最上面有這麼一段：

這裡和

myApp

相對應,簡單來說就是申明整個頁面在angularJS包裹的環境中,其他大家不用深究。

myApp.controller('CartController', ['$scope', function($scope){}]);

通過myApp子產品建立了一個控制器,一個頁面隻能有一個子產品,但是可以有多個控制器。簡單來說子產品申明頁面上哪些元素被包裹在了angularJS的環境中,而控制器則是這個環境中一個個的小塊,js代碼和界面被申明了

ng-controller="CartController"

的元素相對應。就表示頁面和js代碼共享了作用域。

$scope

相當于在控制器範圍内的this,當然上面的代碼為什麼感覺那麼怪,是由于angularJS用到了依賴注入的方式,這一點對于完全沒有後端開發的同學來說了解有點痛苦,可以完全不用理會他現在,就當作是代碼聲明的一種方式就行了。對于我們快速入門來說。掌握這一點就差不多了。

這一句代碼就是在循環疊代items數組中的資料,數組中有幾組資料，那麼tr就會被循環幾次

上面是基本說明,在函數裡裡面的代碼,大家可以清楚的看到,我們就是聲明了一個對象數組,無論是删除，計算都是直接對資料的操作,沒有涉及任何的DOM操作。是以也就意味着界面基本上無需我們關心。在控制器中隻需要關心資料和操作資料,而界面就會出現相應的變化

如果這段代碼要放入到jQuery裡面去寫…就是根據數組資料去建立DOM都比較麻煩,大家看一下代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.1.1/css/bootstrap.css">
</head>
<body>
<div class="panel panel-primary" id="cart">
<div class="panel-heading text-center"><h3>你的購物車</h1></div>
    <div class="panle-body"></div>
    <table class="table table-bordered table-hover">

        <tr id="total">
            <td colspan="4" class="text-center">總計</td>
            <td></td>
        </tr>
    </table>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
    var items = [
            {title:'友善面',quantity:,price:},
            {title:'可樂',quantity:,price:},
            {title:'口香糖',quantity:,price:},
            {title:'辣條',quantity:,price:}
        ];

    $(items).each(function(index,element){
        var tr = $("<tr>"
            +"<td class=\"text-center\"><span>"+element.title+"</span></td>"
            +"<td class=\"text-center\">"
                +"<input type=\"text\" class=\"form-control\" value='"+element.quantity+"'>"
            +"</td>"
            +"<td class=\"text-center\">￥<span>"+element.price+"</span></td>"
            +"<td class=\"text-center\">￥<span  class=\"subTotal\">"+(element.quantity*element.price)+"</span></td>"
            +"<td>"
            +"<button type=\"button\" class=\"btn btn-primary\" >删除"
            +"</button>"
            +"</td>"
        +"</tr>");
        $(tr).insertBefore($('#total'));

    });
    function getTotal(){
        var sum = ;
        $('#cart span.subTotal').each(function(){
            sum += parseFloat($(this).html());
        });
        $('#total td:last').html('￥' + sum);
    }

    $('#cart button.btn').click(function(){
        $(this).parent().parent().remove();
        getTotal();
    })

    $('#cart input[type=text]').keyup(function(e){
        $(this).parent().nextAll(':eq(1)').find('span').html(parseInt($(this).val()) * parseFloat($(this).parent().next().find('span').html()));
        getTotal();
    });

    getTotal();
});
</script>
</html>

AngularJS快速開始(二)--與jQuery比較來認識AngularJS通過jQuery的比較來認識AngularJS

通過jQuery的比較來認識AngularJS

使用者輸入

購物車

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條