首頁 > web前端 > js教程 > 主體

AngularJS語法詳解(續)_AngularJS

WBOY
發布: 2016-05-16 16:18:13
原創
957 人瀏覽過

src和href屬性

Angularjs中src應寫成ng-src,href應寫成ng-href 例如:

複製程式碼 程式碼如下:

表達式

在模板中可以進行簡單的數學運算、比較運算、布林運算、位元運算、引用數組、和物件符號等儘管我們可以使用表達式做很多事情,但是表達式是使用一個自定義的解釋器來執行的(Angular的一部分),而不是用Javascript得eval()函數執行的,所以限制較大。
雖然很多方面這裡的表達式比Javascript更嚴格,但是他們對undefined和null的容錯性更好,如果遇到錯誤,模板只是簡單的什麼都不顯示,而不會拋出一個NullPointerException錯誤。 例如:

複製程式碼 程式碼如下:


   
{{computer() /10 }}
//雖然是合法的,但是它把業務邏輯放到模板中了,應避免這種做法

區分UI和控制器的職責

控制器是綁定在特定DOM片段上的,這些片段就是他們需要負責管理的內容。有兩種主要的方法可以把控制器關聯到DOM節點上,一種在模板中透過ng-controller聲明,第二種是透過路由把它綁定到一個動態載入的DOM模板片段上,這個模板叫視圖。 我們可以創建嵌套的控制器,他們可以透過繼承數結構來共享資料模型和函數,真實的嵌套發生在$scope物件上,透過內部的原始繼承機制,父控制器物件的$scope會被傳遞到內部嵌套的$scope(所有屬性,包括函數)。例如:

複製程式碼 程式碼如下:


   
...


利用$scope暴漏模型資料

可以顯示建立$scope屬性,例如$scope.count = 5。也可以間接的透過模板本身創建資料模型。

透過表達式。例如

複製程式碼 程式碼如下:


在表單項目上使用ng-model

與表達式類似,ng-model上指定的模型參數同樣工作在外層控制器內。唯一的不同點在於,這樣會在表單項目和指定的模型之間建立雙向綁定關係。

使用watch監控資料模型的變化

$watch的函數簽名是: $watch(watchFn,watchAction,deepWatch)
watchFn是一個帶有Angular表達式或函數的字串,它會傳回被監控的資料模型的目前值。 watchAction是一個函數或表達式,當watchFn發生變化時被呼叫。其函數簽名為:
function(newValue,oldValue,scope) deepWatch 如果設定為true,這個可選的布林值參數將會指令Angular去檢查被監控物件的每一個屬性是否改變了。如果你向監控陣列中的元素,或物件上的所有屬性,而不是值監控一個簡單的值,你就可以使用這個參數。請注意,Angular需要遍歷數組或對象,如果集合比較大,那麼運算複雜呢就會比較的重。

$watch函數會回傳一個函數,當你不需要接收變更通知時,可以用這個傳回的函數來註銷監控器。
如果我們需要監控一個屬性,然後接著註銷監控,我們就可以使用以下的程式碼: var dereg = $scope.$watch('someModel.someProperty',callbackOnChange());
... dereg();

實例程式碼如下:

複製程式碼 程式碼如下:



    您的購物車標題>
   
        函數 CartController($scope) {
            $scope.bill = {};
            $scope.items = [
                {則以 {方式與油漆盆』,數量:8,價格:3.95},
                {則為:'圓點',數量:17,價格:12.95},
                {則為:'鵝卵石與數量:5,價格:6.95}
            ];
            $scope.totalCart = function() {
                var 總計 = 0;
                for (var i=0,len=$scope.items.length;i                     總計 = 總計 $scope.items[i].price * $scope.items[i].quantity;
                }
                回報總計;
            }
            $scope.subtotal = function() {
                返回 $scope.totalCart() - $scope.bill.discount;
            }
            函數calculateDiscount(newValue,oldValue,scope) {
                $scope.bill.discount = newValue > 100? 10 : 0;
            }//這裡的watchAction函數
            $scope.$watch($scope.totalCart,calculateDiscount);//這裡的watch函數
        }
    腳本>
頭>

   

       

            {{item.title}}
           
            {{item.price |幣}}
            {{商品.價格 * 商品.數量 |貨幣}}
       

       
總計:{{totalCart()|貨幣 }}

       
折扣:{{bill.discount |貨幣}}

       
小計:{{小計() |幣}}

   

    腳本>
身體>

上面的watch有效能問題,calculateTotals函數執行了6次,其中三次是因為循壞,每次循環,都會重新渲染資料。
下面是改進後的程式碼

複製程式碼程式碼如下:



    您的購物車標題>
   
        函數 CartController($scope) {
            $scope.bill = {};
            $scope.items = [
                {則以 {方式與油漆盆』,數量:8,價格:3.95},
                {則為:'圓點',數量:17,價格:12.95},
                {則為:'鵝卵石與數量:5,價格:6.95}
            ];
            var TotalCart = function() {
                var 總計 = 0;
                for (var i=0,len=$scope.items.length;i                     總計 = 總計 $scope.items[i].price * $scope.items[i].quantity;
                }
                $scope.bill.totalcart = 總計;
                $scope.bill.discount = 總計 > 100? 10:0;
                $scope.bill.subtotal = 總計 - $scope.bill.discount;
            }
            $scope.$watch('items',totalCart,true);//只用watch著items的變化
        }
    腳本>
頭>

   

       

            {{item.title}}
           
            {{item.price |幣}}
            {{商品.價格 * 商品.數量 |貨幣}}
       

       
總計:{{bill.totalcart|貨幣 }}

       
折扣:{{bill.discount |貨幣}}

       
小計:{{bill.subtotal |幣種}}

   

    腳本>
身體>

對於大型的itms吞吐量來說,如果每次在Angular顯示頁面時只重新計算bill屬性,那麼效能會好很多。透過建立一個帶有watchFn的$watch函數,我們可以實現這一點。

複製程式碼程式碼如下:

$scope.$watch(
    var totalCart = function() {
                var total = 0;
                for (var i=0,len=$scope.items.length;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;
            });

監控多東西

如果你想監控多個屬性或對象,並且當其中任何一個發生變化時就會去執行一個函數,你有兩種基本的選擇:

監控把這些屬性連接起來之後的值

把他們放在一個陣列或物件中,然後給deepWAtch參數傳遞一個值

分別說明:
在第一種情況下,如果你的作用域中存在一個things對象,它帶有兩個屬性a和b,當這兩個屬性發生變化時都需要執行callMe()函數,你可以同時監控這兩個屬性$scope.$watch('things.a things.b',callMe(...));
當清單非常長,你需要寫一個函數來傳回連線之後的值。

在第二種情況下,需要監控things物件的所有屬性,你可以這麼做:

複製程式碼 程式碼如下:

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

使用module組織依賴關係

provider(name,Object OR constructor()) 說明: 一個可設定的服務,建立邏輯比較的複雜。如果你傳遞了一個Object作為參數,那麼這個Object物件就必須帶有一個名為$get的函數,而這個函數需要回傳服務的名稱。否則,angularjs會認為你傳遞的時一個建構函數,呼叫建構函數會回傳服務實例物件。
factory(name,$get Function()) 說明:一個不可設定的服務,創造邏輯比較的複雜。你需要指定一個函數,當呼叫這個函數時,會傳回服務實例。可以看成provider(name,{$get:$getFunction()})的形式。
service(name,constructor()) 一個不可設定的服務,創造邏輯比較的簡單。與上面的provider函數的constructor參數類似,Angular呼叫他可以建立服務實例。

使用module factory的例子

複製程式碼 程式碼如下:



您的購物車標題>
腳本>

    var ShoppingModule = angular.module('ShoppingModule',[]);
    ShoppingModule.factory('Items',function() {
        var items = {};
        items.query = function() {
            返回[
                {title:'油漆罐',description:'裝滿油漆的罐子』,價格:3.95},
                {title:'油漆罐',description:'裝滿油漆的罐子』,價格:3.95},
                {title:'油漆罐',description:'裝滿油漆的罐子』,價格:3.95}
            ];
        };
        退貨;
    });
    函數 ShoppingController($scope,Items) {
        $scope.items = Items.query();
    }
腳本>
頭>

購物! !



   
        {{item.title}}
        {{item.description}}
        {{商品價格 |貨幣}}
   
表>
身體>

引入第三方模組

在大多數應用程式中,創建供所有程式碼使用的單一模組,並將所有依賴的東西放入這個模組中,這樣就會運作得很好。但是,如果你打算使用第三方包提供的服務或指令,他們一般都標有自己的模組,你需要在應用程式模組中定義依賴關心才能引用他們。 例如:
var appMod = angular.module('app',['Snazzy','Super']);

關於過濾器的例子

複製程式碼程式碼如下:



您的購物車標題>
腳本>

    var ShoppingModule = angular.module('ShoppingModule',[]);
    ShoppingModule.filter('titleCase',function() {
        var titleCaseFilter = 函數(輸入) {
            var Words = input.split(' ');
            for(var i=0;i                 字[i] = 字[0].charAt(0).toUpperCase() 字[i].slice(1);
            }
            return Words.join(' ');
        };
        回 titleCaseFilter;
    });
    函數 ShoppingController($scope) {
        $scope.pageHeading = '這是測試案例';
    }
腳本>
頭>

{{pageHeading | titleCase}}


身體>

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板