angularJs 前端的頁面分解與組裝

2021-09-26 04:16:14 字數 1878 閱讀 8630

實現前端頁面的復用

將分解的頁面寫成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的前端路由

部分 片段如下 宣告模組 angular.module starter ionic ngcordova starter.controllers starter.services 在專案啟動前的配置 config function stateprovider,urlrouterprovider url...

angularJs 頁面定時重新整理

頁面定時重新整理並在頁面離開時停止自動重新整理 varautorefresh 自動重新整理 autorefresh interval scope.loaddata,60000 停止自動重新整理 scope.stopautorefresh function 切換頁面時停止自動重新整理 scope.on...

前端頁面field 前端頁面展示

爬蟲前端頁面展示 前端頁面展示架構 鏈結elasticsearch 1.在docker裡執行elasticsearch docker run id p 9200 9200 elasticsearch 3.如果您的elasticsearch伺服器在不同的ip和 或埠上執行,只需提供乙個指向newcli...