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即可。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
