AngularJS模板加载用法详解

 更新时间:2016年11月04日 08:55:58   作者:@bornkiller  
这篇文章主要介绍了AngularJS模板加载用法,结合实例形式详细分析了AngularJS模板加载所涉及的属性、方法、使用技巧与相关注意事项,需要的朋友可以参考下

本文实例讲述了AngularJS模板加载用法。分享给大家供大家参考,具体如下:

angular模板加载 ----ng-template

AngularJS作为mvc(或者说mvvm)框架,同样具备模板这一基本概念。

NG加载模板的顺序为 内存加载---AJAX加载。

内存加载

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

通过使用 $templateCache service来实现

angular.module('myApp', [])
 .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);
  }])

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

通过 script 标签引入

<script type="text/ng-template" id="lovestory.html">
  <h4>lovestory</h4>
  <p>这是script标签获取模板文件的方式</p>
  <a href="http://www.baidu.com">标签启用templateCache方式</a>
</script>

这里需要注意, 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请求,去拉取对应模板。假设项目入口文件地址为 http://127.0.0.1/index.html ;

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

在指令中同样可以使用,templateUrl对应值

angular.module('myApp', [])
 .directive('templateDemo', ['$log', function($log){
  return {
  restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
  templateUrl: 'butterfly.html',
  replace: true,
  link: function($scope, iElm, iAttrs, controller) {}
  }
 }])

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

内存模板优点

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

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

以我为学习Angularjs而做的个人博客练习 路由为例:

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)就需要注意几点。

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

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

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

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

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

$templateCache 方法

$templateCache 基于 cacheFactory 而来,接口保持一致,可以认为

\$templateCache = \$cacheFactory('template');

方法 功能
put 向内存写入模板内容
get 从内存获取模板内容
remove 传入key值,删除对应模板内容
removeAll 删除所有模板内容
destroy 解除key-value对应关系,但不释放内存
info 模板缓存对象的信息

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。。。。。。

AJAX缓存

涉及到部分HTTP Header 和 XHR2 的相关内容,将作为单独篇章后续介绍。

希望本文所述对大家AngularJS程序设计有所帮助。

相关文章

  • 详解Angular 开发环境搭建

    详解Angular 开发环境搭建

    Angular 是一款开源 JavaScript 框架,使开发和测试变得更加容易,这篇文章主要介绍了详解Angular 开发环境搭建,需要的朋友可以参考下
    2017-06-06
  • AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】

    AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】

    这篇文章主要介绍了AngularJS实现与Java Web服务器交互操作的方法,结合实例形式较为详细的分析了AngularJS前台ajax提交与javascript后台处理的完整流程与实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2016-11-11
  • Angular2平滑升级到Angular4的步骤详解

    Angular2平滑升级到Angular4的步骤详解

    最近Angular项目组终于发布了新版——正式版 Angular 4.0.0。所以想着就来尝试下升级,记录下整个升级过程分享给大家,所以这篇文章主要介绍了Angular2升级到Angular4的详细步骤,需要的朋友可以参考下。
    2017-03-03
  • Angular.js实现获取验证码倒计时60秒按钮的简单方法

    Angular.js实现获取验证码倒计时60秒按钮的简单方法

    最近做项目的时候又遇到了验证码倒计时的需求,发现这个功能还是挺实用的,所以就想着总结一下,下面这篇文章主要给大家介绍了关于利用Angular.js如何实现获取验证码倒计时按钮的简单方法,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-10-10
  • AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】

    AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】

    这篇文章主要介绍了AngularJS实现的鼠标拖动画矩形框,涉及基于AngularJS的事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-05-05
  • AngularJS自定义控件实例详解

    AngularJS自定义控件实例详解

    这篇文章主要介绍了AngularJS自定义控件,结合实例形式详细分析了AngularJS自定义指令与模板操作的相关函数与使用技巧,需要的朋友可以参考下
    2016-12-12
  • AngularJS 中括号的作用详解

    AngularJS 中括号的作用详解

    这篇文章主要介绍了AngularJS 中括号的作用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • Angular 2父子组件之间共享服务通信的实现

    Angular 2父子组件之间共享服务通信的实现

    这篇文章主要给大家介绍了关于Angular 2父子组件之间共享服务通信的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • 解决ionic和angular上拉加载的问题

    解决ionic和angular上拉加载的问题

    这篇文章主要介绍了解决ionic和angular上拉加载的问题,需要的朋友可以参考下
    2017-08-08
  • Angularjs实现搜索关键字高亮显示效果

    Angularjs实现搜索关键字高亮显示效果

    本篇文章主要介绍了Angularjs实现搜索关键字高亮显示的方法,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01

最新评论