ANGULARJS provides a variety of template loading scenarios. The basics are obtained by means of a predefined path, via Ajax. Use a GULP-HTML2JS build tool to convert HTML templates to JS files. Introduced using the script tag.
In general, the first way to develop is to use the second way when deploying, and not to adopt a third way. This article briefly describes the introduction of tags into the template. The label type supported by Angularjs itself is text/ng-template and is now supported by another type:text/template.
A related blog post: https://www.zybuluo.com/bornkiller/note/6023 code Implementation
As explained in the previous blog post, the template in the $templateCache has the highest priority, so it needs to be used. The angularjs itself takes the form of script instruction to implement.
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);}}};
The code is very simple, the decision type---write to the template. Encapsulation is completely invisible to the internal implementation, so it will be implemented in a personal way to understand.
<!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 ');
}];
The code is very simple, that is, by document.scripts so close to the original way to get the corresponding tag, and then write the contents of the tag inside the $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
