Mastering Web Application

(Rick Simeone) #1
Chapter 12

You can try to alleviate the pain connected with writing DI annotations
by using build-time tools that would post-process your code and
add annotations automatically. Such tools are not trivial to write (as
JavaScript code analysis is required) and are not widespread yet. Still,
if your build system is Grunt.js based, you can give the ngmin
(https://github.com/btford/ngmin) Grunt.js task (grunt-
ngmin) a try.

Preloading templates


With AngularJS we've got many opportunities to divide HTML mark up into
smaller, reusable, partial templates. AngularJS allows us to save partials into
individual files and download them on the fly when needed. While having many
small files with individual partials is good from the development, and from the
code organization point of view, it might negatively impact performance.


Consider a typical route definition, which is as follows:


angular.module('routing_basics', [])
.config(function($routeProvider) {
$routeProvider
.when('/admin/users/list', {templateUrl: 'tpls/users/list.
html'})

...
})


If we save route's partial in a separate file (tpls/users/list.html), AngularJS will
have to download this file before navigating to a route. Obviously downloading a
template over the network means additional time that needs to be spent before the
UI can be rendered. By spending this time for network communication, we are losing
the opportunity of having a snappy, responsive UI.


Route definitions are only one example of a construct that can point to template
partials. Templates can be also referenced from the ng-include directive as well
as from the templateUrl property of a custom directive definition.


Preloading of partials can significantly reduce network traffic and increase
responsiveness of our UIs. AngularJS offers two slightly different ways of
preloading template partials before their first usage: the