您的位置：首页 > Web前端 > AngularJS

AngularJS提供多种模板加载

2017-05-04 22:27 281 查看 
AngularJS
提供多种模板加载方案。
最基础的为通过预先声明路径的方式，通过Ajax获取。
使用诸如
gulp-html2js
构建工具，将
HTML
模板转化为
js
文件使用。
使用
script
标签引入。

一般实际情况下，开发时使用第一种方式，部署时采取第二种方式，不会采用第三种方式。本文简要说明一下标签引入模板。
Angularjs
本身支持的标签
type
为
text/ng-template
，现在来支持另一种
type
：
text/template
。

相关的一篇博文：https://www.zybuluo.com/bornkiller/note/6023


代码实现

从上一篇博文已经说明，
$templateCache
内的模板优先级最高，所以需要使用到。
angularjs
本身采取将
script
指令化的方式来实现。
var scriptDirective = ['$templateCache', function($templateCache) {
return {
restrict: 'E',
terminal: true,
compile: function(element, attr) {
if (attr.type == 'text/ng-template') {
var templateUrl = attr.id,
text = element[0].text;
$templateCache.put(templateUrl, text);
}
}
};
}];


代码非常简单，判定类型---写入模板即可。封装后完全看不到内部实现，所以才会再用个人方式实现，用以理解。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Inline Template</title>
<script type="text/template" id="love">
<h3>love is color blind</h3>
<p>why so serious about the world, behind the darkness</p>
</script>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-sanitize.min.js"></script>
<script src="js/template.js"></script>
</head>
<body ng-app="template">
<article ng-controller="TemplateCtrl">
<div ng-bind-html="story"></div>
</article>
</body>
</html>
angular.module('template', ['ngSanitize'])
.run(['$document', '$templateCache', function($document, $templateCache) {
var scripts = Array.prototype.slice.call($document[0].scripts, 0);
scripts.forEach(function(script) {
if (script.type === 'text/template') {
$templateCache.put(script.id, script.innerHTML);
}
});
}])
.controller('TemplateCtrl', ['$scope', '$templateCache', '$log', function($scope, $templateCache, $log) {
$scope.story = $templateCache.get('love');
}]);


代码非常简单，即通过
document.scripts
这样接近原始的方式来获取对应标签，然后将标签内部的内容写入
$templateCache
即可。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 性能优化
相关文章推荐
新的分享
章节导航