檢視預載入

當請求第一次檢視時，通常 Angular 會使 XHR 請求獲取該檢視。對於中型專案，檢視計數可能很重要，並且可能會降低應用程式響應速度。

將好的做法是預先載入一次各方面的意見為小型和中等規模的專案。對於較大的專案，最好將它們聚合在一些有意義的塊中，但是其他一些方法可以很方便地分割負載。要自動執行此任務，使用 Grunt 或 Gulp 任務非常方便。

要預載入檢視，我們可以使用 $templateCache 物件。這是一個物件，其中 angular 儲存來自伺服器的每個接收到的檢視。

可以使用 html2js 模組，它將我們的所有檢視轉換為一個模組 –js 檔案。然後我們需要將該模組注入我們的應用程式，就是這樣。

要建立所有檢視的連線檔案，我們可以使用此任務

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']);
};

要使用這種連線方式，你需要進行 2 次更改：在 index.html 檔案中，你需要引用連線的檢視檔案

<script src="build/app.templates.js"></script>

在你宣告應用程式的檔案中，你需要注入依賴項

angular.module('app', ['app.templates'])

如果你使用像 ui-router 這樣的流行路由器，那麼方式，參考模板的方式沒有變化

    .state('home', {
        url: '/home',
        views: {
            "@": {
                controller: 'homeController',
                //this will be picked up from $templateCache
                templateUrl: 'app/views/home.html'
            },
        }

    })