angularJs 前端的頁面分解與組裝

實現前端頁面的復用

將分解的頁面寫成directive. 例如下面這個樣子：

angular.module('pagecomponents', , function($compileprovider);
});$compileprovider.directive('commonfooter', function($compile) ;
});});

事實上，還可以更進一步，將templateurl寫成可傳入的引數。但是那樣的話就跟下面這個方法差不多了。

使用ng-include非常簡單。請注意src的引數是表示式，如果要傳靜態的字串引數，請用引號將引數包裹起來。就像下面這個例子。

對ng-include稍作處理，可以實現更複雜的功能。例如下面這個動態載入表單頁面的例子，就是通過變換ng-include的src引數實現的。src中的字串會作為表示式處理（可以是$scope中的變數），所以直接寫名字的話需要使用引號。

}}]);最後必須說明的是，這三種方法實質上都是利用ajax來載入模板。使用ajax來實現頁面分解這樣的功能，相比傳統的使用後台動態指令碼語言的方案，必然會帶來額外的開銷。事實上，不光angularjs是這樣，我所接觸過的所有前端框架都是如此。這是瀏覽器端的宿命。這裡所造成的負載和與後台動態指令碼語言之間的優劣，只能由技術主管自己權衡。

假設在我們的 controller 中

$scope.myprimitive = 50;
$scope.myobject = ;

每乙個 ng-include 會生成乙個子 scope，每個子scope 都繼承父scope。

輸入（比如」77″）到第乙個 input 文字框，則子 scope 將獲得乙個新的 myprimitive 屬性，覆蓋掉父 scope 的同名屬性。這可能和你預想的不一樣。

輸入（比如」99″）到第二個 input 文字框，並不會在子 scope 建立新的屬性，因為 tpl2.html 將 model 繫結到了乙個物件屬性（an object property），原型繼承在這時發揮了作用，ngmodel 尋找物件 myobject 並且在它的父 scope 中找到了。

如果我們不想把 model 從 number 基礎型別改為物件，我們可以用 $parent 改寫第乙個模板：

輸入（比如」22″）到這個文字框也不會建立新屬性了。model 被繫結到了父 scope 的屬性上（因為 $parent 是子 scope 指向它的父 scope 的乙個屬性）。

angularJs 前端的頁面分解與組裝

AngularJs的前端路由

angularJs 頁面定時重新整理

前端頁面field 前端頁面展示

angularJs 前端的頁面分解與組裝

AngularJs的前端路由

angularJs 頁面定時重新整理

前端頁面field 前端頁面展示

相關推薦