Chapter 12Having one AngularJS module for each partial template is very convenient
for unit testing, we can precisely control which templates are loaded into the
$templateCache service for a given test. This assures that individual tests are as
isolated as possible.
Combining different preloading techniques
Template preloading, as many other performance-tuning techniques, is a balancing act.
By putting templates into the $templateCache service, we are minimizing network
traffic and increasing UI responsiveness at the expense of memory consumption.
Indeed, each entry in the $templateCache service consumes additional bytes, their
number being proportional to the template's size. This might be problematic in
really huge applications (and by this we mean ones with several hundreds of partial
templates), especially ones divided into multiple logical sections. Depending on an
application and its usage patterns, it might happen that a given user won't visit the
majority of pages and thus many partial templates would be preloaded for nothing.
Fortunately, we don't have to apply the all-or-nothing logic to partial templates
preloading. We can combine different strategies, for example, preload the most
used templates with the initial application load, and then load additional templates
on demand. We can also prefetch templates and put them into the $templateCache
service after application startup. For example, when a user enters a certain section
of an application we could preload all the templates for this section.
Optimizing the landing page
Optimizing performance of the initial landing page of any web application is crucial.
After all this is the first page that users are going see and get the first impression of
our application.
With single-page web applications, it is a bit tricky to get the first page load and
display "right". There is usually a substantial amount of the network communication
involved, and many scripts need to be downloaded before the JavaScript-powered,
rendering engine can start its job. This section covers certain AngularJS-specific
techniques that can be used to improve the user's perception of the initial page load
and display.