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的更多相关文章

  1. angular 中怎么获取路径上的参数 参考：https://docs.angularjs.org/api/ng/service/$location

    参考: https://docs.angularjs.org/api/ng/service/$location

  2. AngularJS——grunt神器的安装

    前言: 刚开始学 angularJS,在慕课网上看的大漠老师的视频(http://www.imooc.com/learn/156),里面刚开始讲述了前端开发-调试-测试所使用的手段和工具,本人对前端开 ...

  3. AngularJs——grunt神器的使用

    前面我们已经知道了如何安装grunt,本章节给各位道友介绍如何使用 grunt 的插件,grunt是重点在于如何配置使用 Gruntfile.js,官网上也有很多范例. 1,包装函数 module.e ...

  4. Angularjs checkbox的ng属性

    angularjs 默认给 input[checkbox] 元素定制了一些属性,如: <input type="checkbox" ng-mudel="name&q ...

  5. 发现个很有意思的angularjs +grunt 复习项目

    最近作运维工作 docker 接触到一个开源webui dockerui 原项目地址 https://github.com/crosbymichael/dockerui 用angular框架实现,项目 ...

  6. 【AngularJs】---"Error: [ng:areq] Argument 'fn' is not a function, got undefined"

    项目中把controller.service抽取出来 一步一步没有报错 index那里加 <script src="js/controllers/XXController.js&quo ...

  7. [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 ...

  8. Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置

    grunt.initConfig方法 用于模块配置,它接受一个对象作为参数.该对象的成员与使用的同名模块一一对应. 每个目标的具体设置,需要参考该模板的文档.就cssmin来讲,minify目标的参数 ...

  9. Grunt 使用（二）uglify插件压缩javascript代码

    本文在配置grunt基本环境的基础下,讲解如何使用grunt-contrib-uglify进行javascript压缩 本文只介绍了grunt-contrib-uglify插件的一种压缩方式适用于大部 ...

随机推荐

  1. solr的原子更新/局部更新

    solr支持三种类型的原子更新: set - to set a field. add - to add to a multi-valued field. inc - to increment a fi ...

  2. USB Type-C接口完美无瑕？小心这五点

    今年下半年发布的新手机中,采用USB Type-C接口与传统micro USB接口的手机,所占比例大概是一半对一半.采用Type-C接口的手机大多数都是国产手机,而像三星.摩托罗拉以及索尼等老牌的手机 ...

  3. 目录重定向的源代码工程（ linux平台利用VFS实现目录重定向驱动）虚拟磁盘MINIPORT驱动代码（雨中风华）

    http://download.csdn.net/user/fanxiushu/uploads/2 http://download.csdn.net/user/fanxiushu/uploads/1

  4. Android list刷新后仍然定位到原来的位置，解决。

    问题: 有一个list,点击item时会做一些事情,然后重新加载数据,此时希望点击重新刷新后item还在原来的位置,而不是跳转到开头. 实现如下: 1.listview添加监听setOnScrollL ...

  5. 【HDOJ】3505 Writing Robot

    挺好的一道题目,我的做法是kmp+Dinic网络流.kmp求子串在P中出现的次数,从而计算love值.网络流主要用来处理最优解.case2中p1的love值是8,p2的love值是7,最终T包含p1和 ...

  6. 【HDOJ】1098 Ignatius's puzzle

    数学归纳法,得证只需求得使18+ka被64整除的a.且a不超过65. #include <stdio.h> int main() { int i, j, k; while (scanf(& ...

  7. BZOJ_1611_[Usaco2008_Feb]_Meteor_Shower流星雨_(bfs)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1611 网格图起始位置(0,0),不同时间会有流星落下,导致之后的时间里,该点以及周围四个点都不 ...

  8. SCOI2007排列perm

    1072: [SCOI2007]排列perm Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 805  Solved: 497[Submit][Stat ...

  9. 转自 z55250825 的几篇关于FFT的博文（三）

    题目大意:给出n个数qi,定义 Fj为        令 Ei=Fi/qi,求Ei.      其实这道题就是看到有FFT模板才觉得有必要学一下的...    所以实际上就是已经知道题解了... = ...

  10. [Tommas] dateadd() 函数用法

    DATEADD() 函数在日期中添加或减去指定的时间间隔. 语法 DATEADD(datepart,number,date) date 参数是合法的日期表达式.number 是您希望添加的间隔数:对于 ...