AngularJS提供多种模板加载

2019-04-14 19:32发布

站内文章 / 模拟电子
11012 0 1137
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); } } }; }]; 代码非常简单，判定类型---写入模板即可。封装后完全看不到内部实现，所以才会再用个人方式实现，用以理解。 <html> <head lang="en"> <meta charset="UTF-8"> <title>Inline Templatetitle> <script type="text/template" id="love">

love is color blind</h3>

why so serious about the world, behind the darknessp> 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即可。

热门文章