本文主要讲如何用Grunt打包AngularJS的模板HTML。

一 说明

AngularJS中使用单独HTML模板文件的地方非常多,例如:自定义指令、ng-include、templateUrl等。通常这些文件都是独立的html文件,AngularJS中使用这些文件都是通过文件路径地址引用的。

当用Grunt打包压缩整个项目时,如何处理这些html模板文件呢?本文讲的grunt-angular-templates插件可以解决该问题。

grunt-angular-templates插件的基本原理:

该插件实际使用的是AngularJS的$templateCache服务,将这些模板文件都缓存起来,当自定义指令、ng-include等需要对应的html文件时,AngularJS首先会去$templateCache中找对应的文件,如果找到了就不在发送XHR请求。

使用$templateCache缓存模板可以减少XHR请求数,并实现html文件打包。

同时,在AngularJS内部,第一次请求到模板HTML后,都会被缓存到 $templateCache 服务中,这样就确保一个文件只被请求一次。

下边是使用$templateCache缓存html模板的方法:

 angular.module('app').run(["$templateCache", function($templateCache) {
$templateCache.put("home.html",
// contents for home.html ...
);
...
$templateCache.put("src/app/templates/button.html",
// contents for button.html
);
}]);

二 安装

$ npm install grunt-angular-templates --save-dev

三 加载任务

grunt.loadNpmTasks('grunt-angular-templates');

四 配置

这里主要讲作者用到的几个常用配置:

4.1 src

要打包的模板文件路径。例如:'src/**/*.html'。

4.2 dest

输出打包好的文件地址。例如:'dist/tmp.js'。

4.3 options

各种设置都在options中,常用的有下边几个:

1)htmlmin

最小化html大小。设置了该项会去掉html的空格和换行等,可以减少压缩后文件大小。

官网推荐的设置如下:

 htmlmin :{
collapseBooleanAttributes :true ,
collapseWhitespace :是的,
removeAttributeQuotes :true ,
removeComments :true ,// 仅当您不使用comment指令时!
removeEmptyAttributes :true ,
removeRedundantAttributes :true ,
removeScriptTypeAttributes :true ,
removeStyleLinkTypeAttributes :true
}

2)standalone

设置是否创建新的AngularJS模块,还是使用一个现有的AngularJS模块。

设置为true时,将创建一个新的AngularJS模块,类似angular.module('app', []);

设置为false时,将使用已有的模块,类似angular.module('app')。

说明:该模块用于提供$templateCache进行模板缓存;模块名来自于下边的module属性。

3)module

设置创建的Angular模块名字,默认值为target,即Grunt配置项中ngtemplates的下一级属性名。

注意:

module和上边的standalone接口配合起来使用,如果是新创建的模块,必须在AngularJS启动模块中将该模块依赖进来,否则会导致找不到模板报错;如果是使用已有模块,就必须确保在加载打包后的html模板js之前已经定义了对应的模块,否则也会报错。

4)prefix

将模块存入到$templateCache时,对key添加的前缀。

注意1:如果设置了该属性,就要确保自定义指令、ng-include等中设置的模板地址也带有该前缀。

注意2:最终存入的存入到$templateCache的key是prefix+src后的结果,这里的src就是上边接口。

5)bootstrap(module, script)

该回调函数用于自定义模板缓存创建。

如果不定义该函数,插件会自己创建或者获取AngularJS模块,并通过run方法将所有html模板缓存到$templateCache中。

如果定义了该函数,则必须自己实现模板缓存到$templateCache,并将对应的js代码返回。最终会将返回的结果合并到输出文件中。

使用场景:将模板注册成AMD或者commonJS模块。例如:在requireJS构建的项目中。

参数说明:

module:AngularJS模块。

script:$templateCache.put()方法调用的js代码,如下:

   $templateCache.put('/aa/src/button.html',
"<button type=button>{{text}}</button>"
);

五 实战

下边是一个实例项目:

5.1 整体项目目录如下:

5.2 grunt配置文件如下:

 module.exports = function(grunt) {
grunt.initConfig({
// 清理空文件夹
clean: {
foo1: {
src: ['dist/*']
}
},
ngtemplates: { // 将angular中html模板通过$templateCache进行合并
'angular-my-directives': {
options: {
htmlmin: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true, // Only if you don't use comment directives!
removeEmptyAttributes: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
},
standalone: true, // 是否创建新的Angular模块
module: 'temp', // 设置创建的Angular模块名字,默认值为target,即'angular-my-directives'
// bootstrap: function (module, script) {
// console.log(script);
// return script;
// },
prefix: '/aa/'
},
src: 'src/**/*.html', // where my view files are
dest: 'dist/tmp.js' // single file of $templateCache
}
},
}); grunt.loadNpmTasks('grunt-angular-templates');
grunt.loadNpmTasks('grunt-contrib-clean'); // 默认被执行的任务列表。
grunt.registerTask('default', [
'clean',
'ngtemplates'
]); };

5.3 button.html和banner.html是两个html模板,其中button.html是button.js中定义的mybutton指令的模板:

button.html代码如下:

<button type="button">{{text}}</button>

button.js代码如下:

 var component = angular.module("component", []);

 component.directive('myButton', myButton);
myButton.$inject = [];
function myButton() {
return {
restrict: 'E',
priority: 999,
scope: {
text: '=',
},
templateUrl: '/aa/src/button.html',
replace: true,
link: function (scope, $element) { }
};
}

banner.html代码如下:

<div style="width: 100%;background-color:blue;height: 70px">This is banner!</div>

5.4 执行grunt命令后,压缩好的tmp.js文件如下:

 angular.module('temp', []).run(['$templateCache', function($templateCache) {
'use strict'; $templateCache.put('/aa/src/banner/banner.html',
"<div style=\"width: 100%;background-color:blue;height: 70px\">This is banner!</div>"
); $templateCache.put('/aa/src/button.html',
"<button type=button>{{text}}</button>"
); }]);

5.5 测试用例index.html代码如下:

 <!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<div ng-controller="DemoCtrl">
<div ng-include="bannerTemplate"></div>
<my-button text="buttonText"></my-button>
</div>
<!-- Load scripts. -->
<script type="text/javascript" src="./lib/jquery.js"></script>
<script type="text/javascript" src="./lib/angular.js"></script>
<script type="text/javascript" src="./dist/tmp.js"></script>
<script type="text/javascript" src="./src/button.js"></script> <script type="text/javascript">
var app = angular.module("test", ["component", "temp"]); app.controller('DemoCtrl', function ($scope) {
$scope.bannerTemplate = '/aa/src/banner/banner.html';
$scope.buttonText = '确认'; }); angular.bootstrap($("html"), ["test"]);
</script>
</body>
</html>

六 源码下载地址

https://gitee.com/bangbangwa/grunt/blob/master/grunt-angular-templates-test.rar

参考资料&内容来源

grunt官网:https://www.npmjs.com/package/grunt-angular-templates

博客园:https://www.cnblogs.com/ms-grf/p/6874256.html

Grunt学习笔记【8】---- grunt-angular-templates插件详解的更多相关文章

  1. Grunt学习笔记【6】---- grunt-contrib-requirejs插件详解

    本文主要讲如何使用Grunt实现RequireJS文件压缩. 一 说明 ES6出来前,RequireJS是JavaScript模块化最常用的方式之一.对于使用RequireJS构建的项目,要实现打包压 ...

  2. Grunt学习笔记【7】---- grunt-contrib-less插件详解

    本文主要讲如何使用Grunt实现less文件压缩. 一 说明 less是非常常用的样式框架之一,Grunt也提供了可以编译和打包less样式文件的插件:grunt-contrib-less. 实现原理 ...

  3. Linux防火墙iptables学习笔记(三)iptables命令详解和举例[转载]

     Linux防火墙iptables学习笔记(三)iptables命令详解和举例 2008-10-16 23:45:46 转载 网上看到这个配置讲解得还比较易懂,就转过来了,大家一起看下,希望对您工作能 ...

  4. (转)live555学习笔记10-h264 RTP传输详解(2)

    参考: 1,live555学习笔记10-h264 RTP传输详解(2) http://blog.csdn.net/niu_gao/article/details/6936108 2,H264 sps ...

  5. SNMP学习笔记之SNMP 原理与实战详解

    原文地址:http://freeloda.blog.51cto.com/2033581/1306743 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法 ...

  6. Django学习笔记之Django Form表单详解

    知识预览 构建一个表单 在Django 中构建一个表单 Django Form 类详解 使用表单模板 回到顶部 构建一个表单 假设你想在你的网站上创建一个简单的表单,以获得用户的名字.你需要类似这样的 ...

  7. JQuery学习笔记系列(一)----选择器详解

    笔者好长时间没有更新过博客园的笔记了,一部分原因是去年刚刚开始工作一段时间忙碌的加班,体会了一种每天加班到凌晨的充实感,之后闲暇时间了也因为自己懒惰没有坚持记笔记的习惯,现在重新拾起来. 借用古人的一 ...

  8. SharpDevelop学习笔记(5)—— AddIns系统详解

    在所有的插件被加载到指定的扩展点后,插件树就被创建完毕了, 但是,我们知道,插件树创建后,每个插件在插件树的位置在就固定的,但是,如果某些情况下,我们希望一些插件不可使用或应该隐藏起来, 或者说有的插 ...

  9. Hibernate学习笔记二:Hibernate缓存策略详解

    一:为什么使用Hibernate缓存: Hibernate是一个持久层框架,经常访问物理数据库. 为了降低应用程序访问物理数据库的频次,从而提高应用程序的性能. 缓存内的数据是对物理数据源的复制,应用 ...

随机推荐

  1. 洛谷——P1996 约瑟夫问题

    P1996 约瑟夫问题 (什么?!要给学弟学妹讲约瑟夫问题?!难道就不怕我给他们讲错了吗?! 啊啊啊,为了不给学弟学妹们讲错,蒟蒻表示要临阵磨一下刀...) 题目背景 约瑟夫是一个无聊的人!!! 题目 ...

  2. UVA 11389 The Bus Driver Problem 贪心水题

    题目链接:UVA - 11389 题意描述:有n个司机,n个早班路线和n个晚班路线,给每个司机安排一个早班路线和一个晚班路线,使得每个早班路线和晚班路线只属于一个司机.如果一个司机早班和晚班总的驾驶时 ...

  3. Java中的JAR/EAR/WAR包的文件夹结构说明(转)

    JAR包:打成JAR包的代码,一般作为工具类,在项目中,会应用到N多JAR工具包. WAR包:JAVA WEB工程,都是打成WAR包,进行发布,如果我们的服务器选择TOMCAT等轻量级服务器,一般就打 ...

  4. perl learning

    Perl 中文教程 http://cn.perlmaven.com/perl-tutorial learning perl in about 2 hours 30 minutes http://qnt ...

  5. checkbox 自动换行

    把匹配的checkbox和文字用一对span标签包裹 并且给这个span标签加样式 display:inline-block <span style="display:inline-b ...

  6. UVA1406 - A Sequence of Numbers(树状数组)

    UVA1406 - A Sequence of Numbers(树状数组) 题目链接 题目大意: 给定N个数字.给两种操作:C x: 把这N个数字都加上x. Q x:查询这N个数里面有多少个数字和2^ ...

  7. 使用Python+Selenium过程中中常见的问题汇总

    1.提示:UnicodeDecodeError: 'ascii' codec can't decode byte 0xe9 in position 542: ordinal not in range( ...

  8. MySQL 函数笔记

    统计相关函数 COUNT和SUM函数使用小技巧 参考自: MySQL - Conditional COUNT with GROUP BY 在一个 SQL 中统计多个指标的个数: SELECT COUN ...

  9. 『HTML5梦幻之旅』 - 仿Qt演示样例Drag and Drop Robot(换装机器人)

    起源 在Qt的演示样例中看到了一个有趣的demo.截图例如以下: 这个demo的名字叫Drag and Drop Robot,简单概括而言,在这个demo中,能够把机器人四周的颜色拖动到机器人的各个部 ...

  10. HBase中Region, store, storefile和列簇的关系

    转自:http://zhb-mccoy.iteye.com/blog/1543492 The HRegionServer opens the region and creates a correspo ...