issuhub.com

Mastering Web Application

(Rick Simeone) #1

Packaging and Deploying AngularJS Web Applications


Preloading partial templates into $templateCache is a common

practice in the AngularJS community and there is a dedicated Grunt.

js task to automate this process: grunt-html2js (https://github.

com/karlgoldstein/grunt-html2js). This Grunt.js task

was inspired by the build process of the sample SCRUM application

described in this book.

In reality, the build system of the sample SCRUM application creates a separate
AngularJS module for each and every template. In this case, a template URL is used
as a module name as follows:


angular.module("header.tpl.html", [])

.run(["$templateCache", function($templateCache) {

$templateCache.put("header.tpl.html",

"<div class=\"navbar\" ng-controller=\"HeaderCtrl\">" +

...
"

");
}]);


angular.module("login/form.tpl.html", [])

.run(["$templateCache", function($templateCache) {

$templateCache.put("login/form.tpl.html",

"<div modal=\"showLoginForm\" close=\"cancelLogin()\">" +

...
"

" +
"");
}]);


All the individual template modules are later put as dependencies of the templates
module, so an application can simply depend upon this one module only to include
all the templates as follows:


angular.module('templates', ['header.tpl.html', 'login/form.tpl.html',

...]);
Free download pdf
Get our desktop app
Company
Features
Documentation
Resources
© ISSUHUB. 2024. All rights reserved.