[Whole Web] [AngularJS + Grunt] Using ng-html2js to Convert Templates into JavaScript

2024-04-14 09:33•html•阅读 1378

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>");
}]);

https://egghead.io/lessons/angularjs-using-ng-html2js-to-convert-templates-into-javascript

http://g00glen00b.be/angular-grunt/

https://github.com/karlgoldstein/grunt-html2js