angular模板加载——ng-template

最新推荐文章于 2022-09-15 21:21:48 发布
最新推荐文章于 2022-09-15 21:21:48 发布
阅读量1k 收藏
点赞数
分类专栏： AngularJS 文章标签： anuglar ng-template ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjxbj/article/details/84751071
版权

        Angularjs作为mvc（或者说mvvm)框架，同样具备模板这一基本概念。NG加载模板的顺序为：内存加载，AJAX加载。

一.内存加载

        如果之前使用过Bootstrap 插件的ng版，即angular-ui，就会了解到这种方式的具体应用。模板本质上是字符串，把字符串直接写入内存，加载时直接从内存获取，速度会更快，有两种方式显式启用内存加载。

1.通过使用$templateCache service来实现

<html>
<head>
	<title>调用$templateCache服务获取模板文件的方式</title>
	<script src="jquery-1.8.3.js"></script>
	<script src="angular1.2.9.js"></script>
	<script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
	<div ng-include="'lovestory.html'" class="well"></div>
</body>
</html>

app.js

var app = angular.module('myModule', []);
app.controller('myCtrl', ['$scope','$templateCache', function($scope,$templateCache){
   var tmp = '<h4>lovestory</h4>'
         + '<p>这是直接调用$templateCache服务获取模板文件的方式</p>'
         + '<a href="http://www.baidu.com">服务启用templateCache方式</a>';
   $templateCache.put('lovestory.html',tmp);               
}]);

angular.element(document).ready(function() {   
 angular.bootstrap(document,['myModule']);  
});

        $templateCache服务put方法负责向内存写入模板内容。

2.通过script标签引入

<html>
<head>
	<title>script标签获取模板文件的方式</title>
	<script src="jquery-1.8.3.js"></script>
	<script src="angular1.2.9.js"></script>
	<script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
	<div ng-include="'lovestory.html'" class="well"></div>
  <script type="text/ng-template" id="lovestory.html">
    <h4>lovestory</h4>
    <p>这是script标签获取模板文件的方式</p>
    <a href="http://www.baidu.com">标签启用templateCache方式</a>
  </script>
</body>
</html>

app.js

var app = angular.module('myModule', []);
app.controller('myCtrl', ['$scope', function($scope){
	        
}]);

angular.element(document).ready(function() {   
 angular.bootstrap(document,['myModule']);  
});

        这里需要注意，type="text/ng-template"是指明这是ng模板，id属性是指实际使用模板时的一个引用，标签之间的内容才是实际的模板内容。而且，需要注意，id绝对不是URL，这个script标签绝对不会发出HTTP请求。

        实际应用模板时候，使用ID属性，即可从内存中获取对应数据。

<div ng-include="'lovestory.html'" class="well"></div>

        使用ng-include的时候，应该注意，id相当于一个字符串，不是ng-expression，所以不要忘了加单引号。

 

二.AJAX加载

        上述的内存加载，相当于一个预定义模板，定义在client-side，不会与服务器有任何交互，适合变化频率低的模板。

        当NG在内存中找不到对应模板时，就会启用AJAX请求，去拉取对应模板。

<html>
<head>
	<title>templateCache中不存在模板发Ajax请求获取</title>
	<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
	<script src="jquery-1.8.3.js"></script>
	<script src="angular1.2.9.js"></script>
	<script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
	<div ng-include="'lovestory.html'" class="well"></div>
</body>
</html>

app.js

var app = angular.module('myModule', []);
app.controller('myCtrl', ['$scope','$templateCache', function($scope,$templateCache){
   var tmp = '<h4>lovestory</h4>'
         + '<p>这是直接调用$templateCache服务获取模板文件的方式</p>'
         + '<a href="http://www.baidu.com">服务启用templateCache方式</a>';
   //$templateCache.put('lovestory.html',tmp);               
}]);

angular.element(document).ready(function() {   
 angular.bootstrap(document,['myModule']);  
});

lovestory.html

<div>
	<h4>lovestory</h4>
	<p>$templateCache get template file</p>
	<a href="http://www.baidu.com">Ajax request templateCache</a>
<div>

        用Firefox运行，效果如下：

        须特别说明的是，如果templateCache中存在模板不再发Ajax请求获取，如下实例所示：

<html>
<head>
	<title>templateCache中存在模板不发Ajax请求获取</title>
	<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
	<script src="jquery-1.8.3.js"></script>
	<script src="angular1.2.9.js"></script>
	<script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
	<div ng-include="'lovestory.html'" class="well"></div>
</body>
</html>

app.js

var app = angular.module('myModule', []);
app.controller('myCtrl', ['$scope','$templateCache','$http', function($scope,$templateCache,$http){
   var tmp = '<h4>lovestory</h4>'
         + '<p>这是直接调用$templateCache服务获取模板文件的方式</p>'
         + '<a href="http://www.baidu.com">服务启用templateCache方式</a>';
   $templateCache.put('lovestory.html',tmp);       
   
    //$http.get('lovestory.html').success(function(data, status, headers, config){
    //    $templateCache.put('lovestory.html',data);
    //});
    /*
    $.ajax({
			type: "get",
			url: "lovestory.html",
			dataType: 'html',
			//async: false,
			async: true,
			success: function(data, textStatus){
				$templateCache.put('lovestory.html',data);
			}
	 });*/
}]);

angular.element(document).ready(function() {   
 angular.bootstrap(document,['myModule']);  
});

lovestory.html

<div>
	<h4>lovestory</h4>
	<p>$templateCache get template file</p>
	<a href="http://www.baidu.com">Ajax request templateCache</a>
<div>

        在实际项目中，我们可以$http或Ajax请求到服务端获取模板保存到$templateCache中，这样

<div ng-include="'lovestory.html'" class="well"></div>

将不会再向服务端发请求，而是从$templateCache中直接获取。

        当然，在指令中同样可以使用，templateUrl对应值。如下所示：

<html>
<head>
	<title>指令中运用templateUrl实例</title>
	<script src="jquery-1.8.3.js"></script>
	<script src="angular1.2.9.js"></script>
	<script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
	<div template-demo></div>
</body>
</html>

app.js

var app = angular.module('myModule', []);
app.controller('myCtrl', ['$scope','$templateCache', function($scope,$templateCache){
             
}]);
app.directive('templateDemo', ['$log', function($log){
    return {
    restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
    templateUrl: 'lovestory.html',
    //template: '<div><h4>lovestory</h4><p>这是直接调用$templateCache服务获取模板文件的方式</p><a href="http://www.baidu.com">Ajax request templateCache</a></div>',
    replace: true,
    link: function($scope, iElm, iAttrs, controller) {}
    }
}]);

angular.element(document).ready(function() {   
 angular.bootstrap(document,['myModule']);  
});

lovestory.html

<div>
<h4>lovestory</h4>
<p>$templateCache get template file</p>
<a href="http://www.baidu.com">Ajax request templateCache</a>
</div>

        内存中没有对应模板时，AJAX请求成功后将对应内容写入$templateCache，在页面不进行刷新，不手动删除的情况下，写入的内容不会丢失。而且，务必记住，AJAX是有缓存控制的。

 

三.内存模板优点

        在雅虎前端优化34条里，有一条是“合并压缩文件”。

        合并压缩文件可以减小HTTP请求量，又可以减小网络传输量，对于路径依赖并不严重的JS,CSS文件完全是必备，因为各JS,CSS文件开发时分割为不同的文件，实现各自的功能需求，上线时合并即可，但是，HTML文件可以压缩，但是无法合并，因为路径依赖严重。

        以如下路由实例为例：

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请求加载数据量并不大的模板资源浪费严重。NG的优化方案是，通过虚拟路径取代实体路径，去除掉server-side的路径依赖。

        好处就是，一个JS文件一次HTTP请求,而不是六次。坏处就是内存压力变大，PC上无所谓，开发web app(mobile)就需要注意几点：

        a.移动端内存太脆，尽量不要使用上述所说的预定义模板,因为模板会全部加载到内存中

        b.AJAX请求完毕，会自动把结果放入cache里，所以需要手动控制.模板与控制器存在对应关系，可以在控制器内部加上如下代码

$scope.$on('$locationChangeStart',function(){
      $templateCache.remove('****.html');
})

        c.$routeProvider的template,templateUrl可以是函数，通过函数返回值可以控制模板加载。

        d.本人并未涉及到移动端开发，所以此处为思考所得，而且随着手机硬件性能提升，内存不再是个困扰。

 

四.$templateCache 方法

        $templateCache基于cacheFactory而来，接口保持一致，可以认为$templateCache = $cacheFactory('template');



五.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模块中，各模板对应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>

        现在应该明白，id只是个标示，不是URL。

 

文章来源：https://www.zybuluo.com/bornkiller/note/6023

wjxbj
关注
专栏目录
Angular之ng-template，ng-content，ng-container，* ngTemplateOutlet
ld_____的博客
04-18 674
1、<ng-template> ng-template用来定义模板，仅在存在结构指令的情况下起作用，可以和*ngIf-else配合使用 1）IF-ELSE <div *ngIf="isValid; else otherTpl"> 这是IF内容 </div> <ng-template #otherTpl>这是ELSE内容</ng-template> #otherTpl是模板引用变量，当isValid为false时，页面渲染else内容
angular的基础知识积累——ngif-else理解！
jiangqinqinmei的博客
09-29 2142
1.ngIf——else概念 后面引用的必须是模板中引用的元素：ng-template 注意：DOM树中不会留下template的踪迹,如果想加标签（div，p等）可以在ng-template里写他们 ngIf-else小例子：任务描述——存在一个变量hasmore，当其为”true”,则显示加载更多，当期为“false”时，则显示我是有底线: 我自己做的完整版： css ...
angular模板加载
kooky博客
09-13 6470
angular模板加载 ----ng-template Angularjs作为mvc（或者说mvvm)框架，同样具备模板这一基本概念。 NG加载模板的顺序为 内存加载---AJAX加载。 如果排版乱掉，请查阅 https://www.zybuluo.com/bornkiller/note/6023 内存加载 如果之前使用过Bootstrap 插件的ng版，即angul
angular ng-template
米斯特尔曾的博客
12-19 3658
解释 其实和html5的template是一样的就是将模板保存到html中然后需要时再抓出来显示到指定位置 代码 import { Component, ViewChild, TemplateRef,ViewContainerRef } from '@angular/core'; @Component({ selector: 'app-root', // templateUrl: './...
angular中的ng-template
erciyuan_nuonuo的博客
11-08 1301
http://www.jianshu.com/p/f0abac50c6b6
aurora-template：基于abp和ng-alain模板，使其更易于使用
02-08
而Ng-Alain则是基于Angular的管理后台模板，它基于Angular CLI并引入了NG-ZORRO组件库，提供了丰富的UI元素和设计模式。 【描述】：“极光模板，基于ABP和Ng-Alain，旨在提升开发体验。” 这个描述简洁地概述了...
Angular-官方文档学习-1
could98的博客
12-31 3092
Angular 简介 AngularJS 是一个 JavaScript 框架。它可通过 AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。 AngularJS 扩展了 HTML AngularJS 通过 ng-directives 扩展了 HTML。 ng-app 指令定义一个 AngularJS 应用程序。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 ng-bind 指令把应用程序数据绑定到 HTML 视图。 Angular提倡的文件命名方式 组
ng2-模版和数据绑定学习
mr_japson的博客
05-24 618
动态组件1、组件的模板不会永远是固定的。2、应用可能会需要在运行期间加载一些新的组件。3、展示如何使用ComponentFactoryResolver 来动态添加组件。有两个场景 ——    eg1：假设正在计划一个广告活动，要在广告条中显示一系列不同的广告。几个不同的小组可能会频繁加入新的广告组件。    eg2：用户拖动相关的块到特定区域，区域中便会生成相应的UI控件，此UI控件有自己的模板、...
[Angular]——ng-template与ng-container搭配使用
虽菜但瘾
01-10 1204
ng-template 是一个 Angular 元素，用来渲染 HTML。 它永远不会直接显示出来。 ng-template仅是用于包含一个内容的模板，使得其可以与其他的模板镶嵌组合成一个组件模板。 <ng-template #name> <button></button> </ng-template> 正因为其不会显示在DOM中，所以可以将一些指令放在上边。 <ng-template #name *ngIf="true"> <bu
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
10-18
ng-template 是用来定义模板的，当使用ng-template定义好一个模板之后，可以用ng-container和templateOutlet指令来进行使用。这篇文章给大家介绍了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法，需要的朋友参考下吧
Angular 向组件传递模板的两种方法
08-27
主要介绍了Angular 向组件传递模板的两种方法,第一种方式<ng>第二种方式是NgTemplateOutlet 指令及各种使用方式介绍,需要的朋友可以参考下
angularJS在directive的template中使用ng-template
pkpk20044的博客
07-26 7094
今天为大家介绍一下在angularjs的directive中使用ng-template的方法。 1.我们的问题是什么？ var page = angular.module('ausp.directive',['ui.tree']); page.directive('auspTree', ['$templateCache',function($templateCache) { r
[译] angular中的ng-template, ng-content, ng-container
qq_36205941的博客
09-15 582
angular中的ng-template, ng-content, ng-container
Angular 中的动态模板加载 ng-template
weixin_34255793的博客
01-16 3229
基本使用方法 首先在HTML的文件中引入,用来存放动态加载的组件 <ng-template #target></ng-template> 复制代码 简介相关的api ViewChild：一个属性装饰器，用来从模板视图中获取对应的元素，可以通过模板变量获取，获取时可以通过 read 属性设置查询的条件，就是说可以把此视图转为不同的实例 ViewContainerR...
Angular中 ng-template 的用法
lionheart922的专栏
11-23 761
<div *ngIf="canEdit; else noEdit"> <p>You can edit the following paragraph.</p> </div> <ng-template #noEdit> <p>The following paragraph is read only. Try clicking the button!</p> </ng-template>
前端知识Angular之ng-template，ng-content，ng-container和* ngTemplateOutlet
Three_ST的博客
02-19 881
您需要了解有关Angular中的ng-template，ng-content，ng-container和* ngTemplateOutlet的所有信息 普拉泰克·米什拉（Prateek Mishra） 那是我忙于为Office项目开发新功能的日子之一。突然间，一些事情引起了我的注意： 最终在Angular中渲染的DOM 在检查DOM时，我看到ngcontentAngular将其应用于元素。嗯……如果它们包含最终DOM中的元素，那么有什么用<ng-container>？那时我&l
angular7——ng-template、ng-content、ng-container
yw00yw的博客
07-03 3164
一、ng-content ng-content是内容映射指令(也叫内容嵌入)，相当于vue中的slot内容分发，内容映射指的是在组件中嵌入模板代码，方便定制可复用的组件，很好地扩充组件的功能，方便代码的复用。 使用方法：https://blog.csdn.net/yw00yw/article/details/90175624 ng-content相当于一个占位符(留了个位置)，类似于路由出口ro...
Angular ngTemplateOutlet
weixin_30429201的博客
06-10 248
　　虽然我们可以通过使用 ViewContainerRef 将 ElementRef创建的视图插入指定的位置，但是仍然希望有某中快捷的方式帮我们实现。 　　ngTemplateOutlet与ngComponentOutlet 就是帮我们干这事的。 ngTemplateOutlet 　　插入ng-template 创建的内嵌视图。 　　 最简单的例子如下： <div *ngTe...
深入理解Angular ng-template：模板加载实战与应用
本文主要探讨Angular框架中的ng-template标签及其在模板加载方面的应用。HTML5引入了<template>元素，这是一个隐藏在页面加载时不可见但能在运行时动态使用的容器，用于存储和复用内容片段。ng-template在Angular中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值