AngularJS語法詳解（續(xù)）

更新時間：2015年01月23日 10:16:10 投稿：hebedich

本文續(xù)上文，接著介紹AngularJS語法，和上文一樣，都是通過示例來向大家分析說明，非常不錯的一篇文章，推薦給大家。

src和href屬性

Angularjs中src應(yīng)寫成ng-src，href應(yīng)寫成ng-href 例如：

<img ng-src="/images/cats/{{favoriteCat}}">

<a ng-href="/shop/category={{number}}">Some text</a>

表達式

在模板中可以進行簡單的數(shù)學(xué)運算、比較運算、布爾運算、位運算、引用數(shù)組、和對象符號等盡管我們可以使用表達式做很多事情，但是表達式是使用一個自定義的解釋器來執(zhí)行的(Angular的一部分)，而不是用Javascript得eval()函數(shù)執(zhí)行的，所以局限性較大。
雖然很多方面這里的表達式比Javascript更嚴(yán)格，但是他們對undefined和null的容錯性更好，如果遇到錯誤，模板只是簡單的什么都不顯示，而不會拋出一個NullPointerException錯誤。例如：

復(fù)制代碼代碼如下:

<div ng-controller='SomeController'>

    <div>{{computer() /10 }}</div> //雖然是合法的，但是它把業(yè)務(wù)邏輯放到模板中了，應(yīng)避免這種做法

</div>

區(qū)分UI和控制器的職責(zé)

控制器是綁定在特定DOM片段上的，這些片段就是他們需要負責(zé)管理的內(nèi)容。有兩種主要的方法可以把控制器關(guān)聯(lián)到DOM節(jié)點上，一種在模板中通過ng-controller聲明，第二種是通過路由把它綁定到一個動態(tài)加載的DOM模板片段上，這個模板叫視圖。我們可以創(chuàng)建嵌套的控制器，他們可以通過繼承數(shù)結(jié)構(gòu)來共享數(shù)據(jù)模型和函數(shù),真實的嵌套發(fā)生在$scope對象上，通過內(nèi)部的原始繼承機制，父控制器對象的$scope會被傳遞到內(nèi)部嵌套的$scope（所有屬性，包括函數(shù))。例如：

復(fù)制代碼代碼如下:

<div ng-controller="ParentController">

    <div ng-controller="ChildController">...</div>

</div>

利用$scope暴漏模型數(shù)據(jù)

可以顯示創(chuàng)建$scope屬性，例如$scope.count = 5。還可以間接的通過模板自身創(chuàng)建數(shù)據(jù)模型。

通過表達式。例如

復(fù)制代碼代碼如下:

<button ng-click='count=3'>Set count to three</button>

在表單項上使用ng-model

與表達式類似，ng-model上指定的模型參數(shù)同樣工作在外層控制器內(nèi)。唯一的不同點在于，這樣會在表單項和指定的模型之間建立雙向綁定關(guān)系。

使用watch監(jiān)控數(shù)據(jù)模型的變化

$watch的函數(shù)簽名是： $watch(watchFn,watchAction,deepWatch)
watchFn是一個帶有Angular表達式或者函數(shù)的字符串，它會返回被監(jiān)控的數(shù)據(jù)模型的當(dāng)前值。 watchAction是一個函數(shù)或者表達式，當(dāng)watchFn發(fā)生變化時調(diào)用。其函數(shù)簽名為：
function(newValue,oldValue,scope） deepWatch 如果設(shè)置為true，這個可選的布爾值參數(shù)將會命令A(yù)ngular去檢查被監(jiān)控對象的每一個屬性是否發(fā)生了變化。如果你向監(jiān)控數(shù)組中的元素，或者對象上的所有屬性，而不是值監(jiān)控一個簡單的值，你就可以使用這個參數(shù)。注意，Angular需要遍歷數(shù)組或者對象，如果集合比較大，那么運算復(fù)雜呢就會比較的重。

$watch函數(shù)會返回一個函數(shù)，當(dāng)你不需要接收變更通知時，可以用這個返回的函數(shù)注銷監(jiān)控器。
如果我們需要監(jiān)控一個屬性，然后接著注銷監(jiān)控，我們就可以使用以下的代碼： var dereg = $scope.$watch('someModel.someProperty',callbackOnChange());
... dereg();

實例代碼如下:

復(fù)制代碼代碼如下:

<html ng-app>

<head>

    <title>Your Shopping Cart</title>

    <script type="text/javascript">

        function CartController($scope) {

            $scope.bill = {};

            $scope.items = [

                {title:'Paint pots',quantity:8,price:3.95},

                {title:'Polka dots',quantity:17,price:12.95},

                {title:'Pebbles',quantity:5,price:6.95}

            ];

            $scope.totalCart = function() {

                var total = 0;

                for (var i=0,len=$scope.items.length;i<len;i++) {

                    total = total + $scope.items[i].price * $scope.items[i].quantity;

                }

                return total;

            }

            $scope.subtotal = function() {

                return $scope.totalCart() - $scope.bill.discount;

            }

            function calculateDiscount(newValue,oldValue,scope) {

                $scope.bill.discount = newValue > 100 ? 10 : 0;

            }//這里的watchAction函數(shù)

            $scope.$watch($scope.totalCart,calculateDiscount);//這里的watch函數(shù)

        }

    </script>

</head>

<body>

    <div ng-controller="CartController">

        <div ng-repeat='item in items'>

            <span>{{item.title}}</span>

            <input ng-model='item.quantity'>

            <span>{{item.price | currency}}</span>

            <span>{{item.price * item.quantity | currency}}</span>

        </div>

        <div>Total: {{totalCart()| currency }}</div>

        <div>Discount: {{bill.discount | currency}}</div>

        <div>SubTotal: {{subtotal() | currency}}</div>

    </div>

    <script type="text/javascript" src="angular.min.js"></script>

</body>

</html>

上面的watch存在性能問題，calculateTotals函數(shù)執(zhí)行了6次，其中三次是因為循壞，每次循環(huán)，都會重新渲染數(shù)據(jù)。
下面是改良后的代碼

復(fù)制代碼代碼如下:

<html ng-app>

<head>

    <title>Your Shopping Cart</title>

    <script type="text/javascript">

        function CartController($scope) {

            $scope.bill = {};

            $scope.items = [

                {title:'Paint pots',quantity:8,price:3.95},

                {title:'Polka dots',quantity:17,price:12.95},

                {title:'Pebbles',quantity:5,price:6.95}

            ];

            var totalCart = function() {

                var total = 0;

                for (var i=0,len=$scope.items.length;i<len;i++) {

                    total = total + $scope.items[i].price * $scope.items[i].quantity;

                }

                $scope.bill.totalcart = total;

                $scope.bill.discount = total > 100 ? 10 :0;

                $scope.bill.subtotal = total - $scope.bill.discount;

            }

            $scope.$watch('items',totalCart,true);//只用watch著items的變化

        }

    </script>

</head>

<body>

    <div ng-controller="CartController">

        <div ng-repeat='item in items'>

            <span>{{item.title}}</span>

            <input ng-model='item.quantity'>

            <span>{{item.price | currency}}</span>

            <span>{{item.price * item.quantity | currency}}</span>

        </div>

        <div>Total: {{bill.totalcart| currency }}</div>

        <div>Discount: {{bill.discount | currency}}</div>

        <div>SubTotal: {{bill.subtotal | currency}}</div>

    </div>

    <script type="text/javascript" src="angular.min.js"></script>

</body>

</html>

對于大型的itms數(shù)組來說，如果每次在Angular顯示頁面時只重新計算bill屬性，那么性能會好很多。通過創(chuàng)建一個帶有watchFn的$watch函數(shù)，我們可以實現(xiàn)這一點。

復(fù)制代碼代碼如下:

$scope.$watch(

    var totalCart = function() {

                var total = 0;

                for (var i=0,len=$scope.items.length;i<len;i++) {

                    total = total + $scope.items[i].price * $scope.items[i].quantity;

                }

                $scope.bill.totalcart = total;

                $scope.bill.discount = total > 100 ? 10 :0;

                $scope.bill.subtotal = total - $scope.bill.discount;

            });

監(jiān)控多個東西

如果你想監(jiān)控多個屬性或者對象，并且當(dāng)其中任何一個發(fā)生變化時就會去執(zhí)行一個函數(shù)，你有兩種基本的選擇：

監(jiān)控把這些屬性連接起來之后的值

把他們放在一個數(shù)組或者對象中，然后給deepWAtch參數(shù)傳遞一個值

分別說明：
在第一種情況下，如果你的作用域中存在一個things對象，它帶有兩個屬性a和b，當(dāng)這兩個屬性發(fā)生變化時都需要執(zhí)行callMe（）函數(shù)，你可以同時監(jiān)控這兩個屬性 $scope.$watch('things.a + things.b',callMe(...));
當(dāng)列表非常長，你就需要寫一個函數(shù)來返回連接之后的值。

在第二種情況下，需要監(jiān)控things對象的所有屬性，你可以這么做：

復(fù)制代碼代碼如下:

$scope.$watch('things',callMe(...),true);

使用module組織依賴關(guān)系

provider(name,Object OR constructor()) 說明：一個可配置的服務(wù)，創(chuàng)建邏輯比較的復(fù)雜。如果你傳遞了一個Object作為參數(shù)，那么這個Object對象必須帶有一個名為$get的函數(shù)，這個函數(shù)需要返回服務(wù)的名稱。否則，angularjs會認(rèn)為你傳遞的時一個構(gòu)造函數(shù)，調(diào)用構(gòu)造函數(shù)會返回服務(wù)實例對象。
factory(name,$get Function()) 說明：一個不可配置的服務(wù)，創(chuàng)建邏輯比較的復(fù)雜。你需要指定一個函數(shù)，當(dāng)調(diào)用這個函數(shù)時，會返回服務(wù)實例。可以看成provider(name,{$get:$getFunction()})的形式。
service(name,constructor()) 一個不可配置的服務(wù)，創(chuàng)建邏輯比較的簡單。與上面的provider函數(shù)的constructor參數(shù)類似，Angular調(diào)用他可以創(chuàng)建服務(wù)實例。

使用module factory的例子

復(fù)制代碼代碼如下:

<html ng-app='ShoppingModule'>

<head>

<title>Your Shopping Cart</title>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

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

    ShoppingModule.factory('Items',function() {

        var  items = {};

        items.query = function() {

            return [

                {title:'Paint pots',description:'Pots full of Paint',price:3.95},

                {title:'Paint pots',description:'Pots full of Paint',price:3.95},

                {title:'Paint pots',description:'Pots full of Paint',price:3.95}

            ];

        };

        return items;

    });

    function ShoppingController($scope,Items) {

        $scope.items = Items.query();

    }

</script>

</head>

<body ng-controller='ShoppingController'>

<h1>Shop!!</h1>

<table>

    <tr ng-repeat='item in items'>

        <td>{{item.title}}</td>

        <td>{{item.description}}</td>

        <td>{{item.price | currency}}</td>

    </tr>

</table>

</body>

</html>

引入第三方模塊

在大多數(shù)應(yīng)用中，創(chuàng)建供所有代碼使用的單個模塊，并把所有依賴的東西放入這個模塊中，這樣就會工作的很好。但是，如果你打算使用第三方包提供的服務(wù)或者指令，他們一般都帶有自己的模塊，你需要在應(yīng)用模塊中定義依賴關(guān)心才能引用他們。例如：
var appMod = angular.module('app',['Snazzy','Super']);

關(guān)于filter的例子

復(fù)制代碼代碼如下:

<html ng-app='ShoppingModule'>

<head>

<title>Your Shopping Cart</title>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

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

    ShoppingModule.filter('titleCase',function() {

        var titleCaseFilter = function(input) {

            var words = input.split(' ');

            for(var i=0;i<words.length;i++) {

                words[i] = words[0].charAt(0).toUpperCase() + words[i].slice(1);

            }

            return words.join(' ');

        };

        return titleCaseFilter;

    });

    function ShoppingController($scope) {

        $scope.pageHeading = 'this is a test case';

    }

</script>

</head>

<body ng-controller='ShoppingController'>

<h1>{{pageHeading | titleCase}}</h1>

</body>

</html>