AngularJS模板加載用法詳解
本文實例講述了AngularJS模板加載用法。分享給大家供大家參考，具體如下：
angular模板加載 ----ng-template
AngularJS作為mvc（或者說mvvm)框架，同樣具備模板這一基本概念。
NG加載模板的順序為 內(nèi)存加載---AJAX加載。
內(nèi)存加載
如果之前使用過Bootstrap 插件的ng版，即angular-ui，就會了解到這種方式的具體應(yīng)用。模板本質(zhì)上是字符串，把字符串直接寫入內(nèi)存，加載時直接從內(nèi)存獲取，速度會更快，有兩種方式顯式啟用內(nèi)存加載。
通過使用 $templateCache service來實現(xiàn)
angular.module('myApp', [])
.controller('myCtrl', ['$scope','$templateCache', function($scope,$templateCache){
var tmp = '<h4>lovestory</h4>'
+ '<p>這是直接調(diào)用$templateCache服務(wù)獲取模板文件的方式</p>'
+ '<a ;
$templateCache.put('lovestory.html',tmp);
}])
$templateCache 服務(wù)put方法負(fù)責(zé)向內(nèi)存寫入模板內(nèi)容。
通過 script 標(biāo)簽引入
<script type="text/ng-template" id="lovestory.html"> <h4>lovestory</h4> <p>這是script標(biāo)簽獲取模板文件的方式</p> <a >標(biāo)簽啟用templateCache方式</a> </script>
這里需要注意， type="text/ng-template" 是指明這是ng模板，id屬性是指實際使用模板時的一個引用，標(biāo)簽之間的內(nèi)容才是實際的模板內(nèi)容。而且，需要注意，id絕對不是URL，這個 script 標(biāo)簽絕對不會發(fā)出HTTP請求，具體討論見最后。
實際應(yīng)用模板時候，使用 ID 屬性，即可從內(nèi)存中獲取對應(yīng)數(shù)據(jù)。
<div ng-include="'lovestory.html'" class="well"></div>
使用 ng-include 的時候，應(yīng)該注意，id相當(dāng)于一個字符串，不是ng-expression ，所以不要忘了加單引號。
AJAX加載
上述的內(nèi)存加載，相當(dāng)于一個預(yù)定義模板，定義在 client-side ，不會與服務(wù)器有任何交互，適合變化頻率低的模板。
當(dāng)NG在內(nèi)存中找不到對應(yīng)模板時，就會啟用AJAX請求，去拉取對應(yīng)模板。假設(shè)項目入口文件地址為 http://127.0.0.1/index.html ;
<div ng-include="'lovestory.html'" class="well"></div>
在指令中同樣可以使用，templateUrl對應(yīng)值
angular.module('myApp', [])
.directive('templateDemo', ['$log', function($log){
return {
restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
templateUrl: 'butterfly.html',
replace: true,
link: function($scope, iElm, iAttrs, controller) {}
}
}])
內(nèi)存中沒有對應(yīng)模板時，AJAX請求地址為 http://127.0.0.1/lovestory.html , 請求成功后將對應(yīng)內(nèi)容寫入 $templateCache ，在頁面不進(jìn)行刷新，不手動刪除的情況下，寫入的內(nèi)容不會丟失。而且，務(wù)必記住，AJAX是有緩存控制的。。。
內(nèi)存模板優(yōu)點
在雅虎前端優(yōu)化34條里，有一條是“合并壓縮文件”。
合并壓縮文件可以減小HTTP請求量，又可以減小網(wǎng)絡(luò)傳輸量，對于路徑依賴并不嚴(yán)重的JS,CSS文件完全是必備，因為各JS,CSS文件開發(fā)時分割為不同的文件，實現(xiàn)各自的功能需求，上線時合并即可，但是，HTML文件可以壓縮，但是無法合并，因為路徑依賴嚴(yán)重。
以我為學(xué)習(xí)Angularjs而做的個人博客練習(xí) 路由為例：
angular.module('administratorApp',[])
.config(function ($routeProvider,$locationProvider) {
$locationProvider.html5Mode(false);
$routeProvider
.when('/manage', {
templateUrl: 'views/manage.html',
controller: 'ManageCtrl'
})
.when('/diary/:key', {
templateUrl: 'views/diaryDetail.html',
controller: 'DiaryDetailCtrl',
})
.when('/diary', {
templateUrl: 'views/diaryList.html',
controller: 'DiaryListCtrl'
})
.when('/publish/:key', {
templateUrl: 'views/update.html',
controller: 'UpdateCtrl'
})
.when('/publish', {
templateUrl: 'views/publish.html',
controller: 'PublishCtrl'
})
.when('/record', {
templateUrl: 'views/record.html',
controller: 'RecordCtrl'
})
.otherwise({
redirectTo: '/diary'
});
});
六個控制器需要六個模板，六次HTTP請求加載數(shù)據(jù)量并不大的模板資源浪費嚴(yán)重。NG的優(yōu)化方案是，通過虛擬路徑取代實體路徑，去除掉 server-side 的路徑依賴。
好處就是，一個JS文件一次HTTP請求,而不是六次。壞處就是內(nèi)存壓力變大，PC上無所謂，開發(fā)web app(mobile)就需要注意幾點。
① 移動端內(nèi)存太脆，盡量不要使用上述所說的預(yù)定義模板,因為模板會全部加載到內(nèi)存中
② AJAX請求完畢，會自動把結(jié)果放入cache里，所以需要手動控制.模板與控制器存在對應(yīng)關(guān)系，可以在控制器內(nèi)部加上如下代碼
$scope.$on('$locationChangeStart',function(){
$templateCache.remove('****.html');
})
③ $routeProvider的 template , templateUrl 可以是函數(shù)，通過函數(shù)返回值可以控制模板加載。
PS::本人并未涉及到移動端開發(fā)，所以此處為思考所得，而且隨著手機(jī)硬件性能提升，內(nèi)存不再是個困擾。
$templateCache 方法
$templateCache 基于 cacheFactory 而來，接口保持一致，可以認(rèn)為
\$templateCache = \$cacheFactory('template');
| 方法 | 功能 |
|---|---|
| put | 向內(nèi)存寫入模板內(nèi)容 |
| get | 從內(nèi)存獲取模板內(nèi)容 |
| remove | 傳入key值，刪除對應(yīng)模板內(nèi)容 |
| removeAll | 刪除所有模板內(nèi)容 |
| destroy | 解除key-value對應(yīng)關(guān)系，但不釋放內(nèi)存 |
| info | 模板緩存對象的信息 |
Grunt與ID屬性誤解
module.exports = function(grunt){
grunt.initConfig({
html2js : {
simple : {
options : {
base : '',
module : 'templateStore'
},
files : [{
src : ['views/*.html'],
dest : 'build/scripts/templateStore.js'
}]
}
}
});
grunt.loadNpmTasks('grunt-html2js');
grunt.registerTask('default',['html2js']);
}
這是我目前使用Grunt--html2js的配置方案，目的是將 views 文件夾下的所有模板文件全部放入 templateStore 模塊中，各模板對應(yīng)ID即為路徑，生成的部分代碼如下：
angular.module("views/diaryList.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("views/diaryList.html", '*******'
}]);
這部分代碼等效于
<script type="text/ng-template" id="views/diaryList.html"> *********** </script>
現(xiàn)在應(yīng)該明白，id只是個標(biāo)示，不是URL。。。。。。
AJAX緩存
涉及到部分HTTP Header 和 XHR2 的相關(guān)內(nèi)容，將作為單獨篇章后續(xù)介紹。
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
- AngularJS框架的ng-app指令與自動加載實現(xiàn)方法分析
- AngularJS 在同一個界面啟動多個ng-app應(yīng)用模塊詳解
- AngularJS ng-app 指令實例詳解
- 基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
- AngularJs動態(tài)加載模塊和依賴注入詳解
- angularJS與bootstrap結(jié)合實現(xiàn)動態(tài)加載彈出提示內(nèi)容
- AngularJS 實現(xiàn)按需異步加載實例代碼
- AngularJS中的Directive實現(xiàn)延遲加載
- Webpack 實現(xiàn) AngularJS 的延遲加載
- Angularjs 滾動加載更多數(shù)據(jù)
- AngularJs 動態(tài)加載模塊和依賴
- AngularJS使用ng-app自動加載bootstrap框架問題分析
相關(guān)文章
AngularJS基礎(chǔ) ng-paste 指令簡單示例
本文主要介紹AngularJS ng-paste 指令,這里對ng-paste 指令的基礎(chǔ)資料做了整理,并附有代碼示例,有需要的朋友可以參考下2016-08-08
跨域請求一直是網(wǎng)頁編程中的一個難題，在過去，絕大多數(shù)人都傾向于使用JSONP來解決這一問題。不過現(xiàn)在，我們可以考慮一下W3C中一項新的特性——CORS（Cross-Origin Resource Sharing）了。2016-08-08
Angular中$state.go頁面跳轉(zhuǎn)并傳遞參數(shù)的方法
這篇文章主要介紹了angular中$state.go頁面跳轉(zhuǎn)并傳遞參數(shù)的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-05-05
AngularJS自定義指令之復(fù)制指令實現(xiàn)方法
這篇文章主要介紹了AngularJS自定義指令之復(fù)制指令實現(xiàn)方法,結(jié)合完整實例形式分析了AngularJS自定義指令實現(xiàn)復(fù)制功能的相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
Angular.js自定義指令學(xué)習(xí)筆記實例
這篇文章主要介紹了Angular.js自定義指令的實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
AngularJS基礎(chǔ) ng-mouseover 指令簡單示例
本文主要介紹AngularJS ng-mouseover 指令,這里幫大家整理了AngularJS 指令的基礎(chǔ)知識,并附代碼示例,有興趣的小伙伴可以參考下2016-08-08
關(guān)于angular表單動態(tài)驗證的一種新思路分享
在Angular?中不管是模板驅(qū)動表單還是響應(yīng)式表單,對于動態(tài)創(chuàng)建表單的支持都很好,下面這篇文章主要給大家介紹了關(guān)于angular表單動態(tài)驗證的一種新思路,需要的朋友可以參考下2022-03-03
分享Angular http interceptors 攔截器使用(推薦)
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標(biāo)簽添加到 HTML 頁面。這篇文章主要介紹了分享Angular http interceptors 攔截器使用(推薦),需要的朋友可以參考下2019-11-11
ng-container 是 Angular 2+ 中可用的一個元素,可以作為結(jié)構(gòu)指令的宿主,在本文中,您將探討可以使用 ng-container 解決的場景,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2024-02-02
深究AngularJS如何獲取input的焦點（自定義指令）
本篇文章主要介紹了AngularJS如何獲取input的焦點（自定義指令），具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06