查看预加载

当请求第一次视图时，通常 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'
            },
        }

    })