Page 474 - AngularJS权威教程

454 第 34 章 下一步

<div class="hero-unit">
<h1>'Allo, 'Allo!</h1>
<p>You now have</p>
<ul>
<li ng-repeat="thing in awesomeThings">{{thing}}</li>
</ul>
<p>installed.</p>
<h3>Enjoy coding! - Yeoman</h3>
</div>
你可以打包它们到一个JavaScript中，然后分离这个JavaScript文件，就像这样：
angular.module('myApp')
.run(['$templateCache', function($templateCache) {
$templateCache.put('views/main.html',
"<div class=\"hero-unit\">\n" +
" <h1>'Allo, 'Allo!</h1>\n" +
" <p>You now have</p>\n" +
" <ul>\n" +
" <li ng-repeat=\"thing in awesomeThings\">{{thing}}</li>\n" +
" </ul>\n" +
" <p>installed.</p>\n" +
" <h3>Enjoy coding! - Yeoman</h3>\n" +
"</div>\n"
);
}]);
要完成这个设置，需要修改Gruntfile.js引入新任务定义，来使用新的npm包grunt-angular-
templates。

首先，要安装这个包：
$ npm install --save-dev grunt-angular-templates
接下来，修改Gruntfile.js引入ngtemplates任务。

// ...
}
},
ngtemplates: {
myappApp: {
cwd: '<%= yeoman.app %>',
src: 'views/**/*.html',
dest: '<%= yeoman.app %>/scripts/templates.js'
}
},
// 将不处理的文件放在其他任务中
copy: {
// ...
这一修改仅在应用目录中创建了一个新文件，这个文件将会包含作为JavaScript加载的模板
文件。
这里还需要确保在构建过程中运行这个任务。幸好，将这个任务添加到构建过程中很容易。
只需找到：grunt.registerTash('build', [所在行，然后确保将ngTemplates添加到这个任务
数组的concat任务后面：
grunt.registerTask('build', [
// ...
'concat',
// ...