Angular Prepare for Production Grunt
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
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
In the file, where you are declaring your app, you need to inject the dependency
If you are using popular routers like ui-router, there are no changes in the way, how you are referencing templates