MOCKSTACKS
EN
Questions And Answers

More Tutorials









Angular Prepare for Production Grunt


View preloading
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'
 },
 }
 })


Conclusion

In this page (written and validated by ) you learned about AngularJS Prepare for Production Grunt . What's Next? If you are interested in completing AngularJS tutorial, your next topic will be learning about: AngularJS Script optimisation.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.