AngularJS Prepare for Production - Grunt View preloading
Example
When the first time view is requested, normally Angular makes XHR request to get that view. For mid-size projects, the view count can be significant and it can slow down the application responsiveness.
The good practice is to pre-load all the views at once for small and mid size projects. For larger projects it is good to aggregate them in some meaningful bulks as well, but some other methods can be handy to split the load. To automate this task it is handy to use Grunt or Gulp tasks.
To pre-load the views, we can use $templateCache object. That is an object, where angular stores every received view from the server.
It is possible to use html2js module, that will convert all our views to one module - js file. Then we will need to inject that module into our application and that's it.
To create concatenated file of all the views we can use this task
module.exports = function (grunt) {
//set up the location of your views here
var viewLocation = ['app/views/**.html'];
grunt.initConfig({
pkg: require('./package.json'),
//section that sets up the settings for concatenation of the html files into one file
html2js: {
options: {
base: '',
module: 'app.templates', //new module name
singleModule: true,
useStrict: true,
htmlmin: {
collapseBooleanAttributes: true,
collapseWhitespace: true
}
},
main: {
src: viewLocation,
dest: 'build/app.templates.js'
}
},
//this section is watching for changes in view files, and if there was a change, it will regenerate the production file. This task can be handy during development.
watch: {
views:{
files: viewLocation,
tasks: ['buildHTML']
},
}
});
//to automatically generate one view file
grunt.loadNpmTasks('grunt-html2js');
//to watch for changes and if the file has been changed, regenerate the file
grunt.loadNpmTasks('grunt-contrib-watch');
//just a task with friendly name to reference in watch
grunt.registerTask('buildHTML', ['html2js']);
};
To use this way of concatination, you need to make 2 changes:
In your index.html file you need to reference the concatenated view file
<script src="build/app.templates.js"></script>
In the file, where you are declaring your app, you need to inject the dependency
angular.module('app', ['app.templates'])
If you are using popular routers like ui-router, there are no changes in the way, how you are referencing templates
.state('home', {
url: '/home',
views: {
"@": {
controller: 'homeController',
//this will be picked up from $templateCache
templateUrl: 'app/views/home.html'
},
}
})
