[Whole Web] [AngularJS + Grunt] Using ng-html2js to Convert Templates into JavaScript
ng-html2js takes .html templates and converts them into strings stored in AngularJS's template cache. This allows you to bundle all of your templates into a single JavaScript file for simpler deployment and faster loading.
1. Install grunt.
2. Install grunt-html2js:
npm install grunt-html2js --save-dev
3. One the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-html2js');
4. Using grunt-contrib-watch to moniter all tpl.html files in pulbic folder and register the html2js:main to the watcher.
/**
* Created by Answer1215 on 3/15/2015.
*/
module.exports = function(grunt) { grunt.initConfig({
watch: {
files: ["server/**/*.js", 'public/**/*.tpl.html'],
tasks: ['browserify', 'html2js:main']
},
html2js: {
options: {
base: 'public',
module: 'app.templates', /*Create a new module called app.tempaltes*/
singleModule: true, /*For all templates just create a single module*/
useStrict: true,
htmlmin: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
}
},
main: {
src: ['public/**/*.tpl.html'],
dest: 'build/templates.js'
}
}
}); grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-html2js');
}
So, once your tpl files has been changed, grunt task will run and create template js file.
5. Include your template.js to the index.html:
<script src="../build/templates.js"></script>
6. Inject the app.template module:
angular.module("app", ["ui.router", 'app.templates'])
.config(function config($stateProvider) {
$stateProvider.state("answer", {
url: "",
views: {
'home@': {
templateUrl: "home/home.tpl.html"
},
'visit@': {
templateUrl: "visit/visit.tpl.html"
}
}
})
});
7. Test code:
<!-- index.html --> <!DOCTYPE html>
<html ng-app="app">
<head>
<title>Egghead.io Tutorials</title>
<link rel="shortcut icon" href="favicon.ico">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>
<script src="../build/templates.js"></script>
<script src="ap.js"></script>
</head>
<body> <section ui-view="home"></section>
<nav ui-view="visit"></nav>
</body>
</html>
<!-- home/home.tpl.html --> <h1>Hello World, Grunt-html2js!!</h1>
<!-- visit/visit.tpl.html --> <h2>Visit!</h2>
build/template.js:
angular.module('app.templates', []).run(['$templateCache', function($templateCache) {
"use strict";
$templateCache.put("home/home.tpl.html",
"<h1>Hello World, Grunt-html2js!!</h1>");
$templateCache.put("visit/visit.tpl.html",
"<h2>Visit!</h2>");
}]);
More:
https://egghead.io/lessons/angularjs-using-ng-html2js-to-convert-templates-into-javascript
http://g00glen00b.be/angular-grunt/
https://github.com/karlgoldstein/grunt-html2js
[Whole Web] [AngularJS + Grunt] Using ng-html2js to Convert Templates into JavaScript的更多相关文章
- angular 中怎么获取路径上的参数 参考:https://docs.angularjs.org/api/ng/service/$location
参考: https://docs.angularjs.org/api/ng/service/$location
- AngularJS——grunt神器的安装
前言: 刚开始学 angularJS,在慕课网上看的大漠老师的视频(http://www.imooc.com/learn/156),里面刚开始讲述了前端开发-调试-测试所使用的手段和工具,本人对前端开 ...
- AngularJs——grunt神器的使用
前面我们已经知道了如何安装grunt,本章节给各位道友介绍如何使用 grunt 的插件,grunt是重点在于如何配置使用 Gruntfile.js,官网上也有很多范例. 1,包装函数 module.e ...
- Angularjs checkbox的ng属性
angularjs 默认给 input[checkbox] 元素定制了一些属性,如: <input type="checkbox" ng-mudel="name&q ...
- 发现个很有意思的angularjs +grunt 复习项目
最近作运维工作 docker 接触到一个开源webui dockerui 原项目地址 https://github.com/crosbymichael/dockerui 用angular框架实现,项目 ...
- 【AngularJs】---"Error: [ng:areq] Argument 'fn' is not a function, got undefined"
项目中把controller.service抽取出来 一步一步没有报错 index那里加 <script src="js/controllers/XXController.js&quo ...
- [Whole Web] [AngularJS] Localize your AngularJS Application with angular-localization
It is best to start your application's localization efforts early in development, even if you only s ...
- Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置
grunt.initConfig方法 用于模块配置,它接受一个对象作为参数.该对象的成员与使用的同名模块一一对应. 每个目标的具体设置,需要参考该模板的文档.就cssmin来讲,minify目标的参数 ...
- Grunt 使用(二)uglify插件压缩javascript代码
本文在配置grunt基本环境的基础下,讲解如何使用grunt-contrib-uglify进行javascript压缩 本文只介绍了grunt-contrib-uglify插件的一种压缩方式适用于大部 ...
随机推荐
- 保护模式下GDTR,LDTR,全局描述符表,局部描述符表和选择器的关系
这张图要注意:右边两个0-15,其中上面的是LDTR, 下面的是选择子. 图下第五个标线,是两个线交叉的,实际上第五个线是指向右边水平的那个线. 没有箭头的两组线分别表示GDT的区间,LDT的区间 ...
- easyui源码翻译1.32--Resizable(调整大小)
前言 使用$.fn.resizable.defaults重写默认值对象 下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 Resiz ...
- webbench的详细使用
webbench是什么?是一款相当给力的网站压力测试工具.(优点自行搜索) 使用webbench需要两大步骤: 1.安装webbench 2.熟悉webbench命令 一.安装webbench 1.下 ...
- 目录重定向的源代码工程( linux平台利用VFS实现目录重定向驱动)虚拟磁盘MINIPORT驱动代码(雨中风华)
http://download.csdn.net/user/fanxiushu/uploads/2 http://download.csdn.net/user/fanxiushu/uploads/1
- 【原创翻译】The Case for the Reduced Instruction Set Computer
RISC机的例子 David A. Patterson 加州大学伯克利分校计算机科学系 David R. Ditzel 贝尔实验室计算科学研究中心 介绍 计算机体系结构最主要的目标之一就是设计比之前产 ...
- 【HDOJ】1076 An Easy Task
水题,如题. #include <stdio.h> #define chk(Y) (Y%4==0 && Y%100!=0) || Y%400==0 int main() { ...
- Oracle建表插数据等等
Oracle的表的管理: 表名和列的命名规则,详见 数据库命名规范 . 必须以字母开头 . 长度不能超过30个字符 . 不能使用Oracle的保留字 . 只能使用如下字符 column_name-Z, ...
- hadoop 序列化源码浅析
1.Writable接口 Hadoop 并没有使用 JAVA 的序列化,而是引入了自己实的序列化系统, package org.apache.hadoop.io 这个包中定义了大量的可 ...
- Configurataion Printer(基于全新2.2.0API)
Configurataion Printer import java.util.Map.Entry; import org.apache.hadoop.conf.Configuration; impo ...
- BZOJ_1084_[SCOI2005]_最大子矩阵_(动态规划)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1084 给出一个n*m的矩阵,其中m<=2,取k个子矩阵,求最大子矩阵和. 分析 1.m= ...