AngularJS中更优的$templateCache使用方式探讨

我完全懂这种痛苦——几百行转义过的HTML字符串拼接，改个标签都得小心翼翼找转义符，排查问题时看着一堆\n和\'头都大！针对AngularJS 1.2的$templateCache优化，这里有几个实用的方案，都是我在维护老项目时亲测有效的：

1. 用构建工具自动打包HTML模板（最推荐） #

这是长远来看最省心的方案，彻底告别手动拼接字符串。AngularJS生态里有专门的构建工具插件，能把你的HTML模板文件自动转换成$templateCache的注册代码：

• Grunt用户：使用grunt-angular-templates插件，配置后会遍历指定目录下的所有HTML模板，生成一个包含所有$templateCache.put()调用的JS文件。
• Gulp用户：使用gulp-angular-templatecache插件，功能和Grunt版本一致，配置更简洁。

举个Gulp配置的简单例子：

var gulp = require('gulp');
var templateCache = require('gulp-angular-templatecache');

gulp.task('templates', function() {
  return gulp.src('app/**/*.tpl.html')
    .pipe(templateCache({
      module: 'yourAppModule', // 你的AngularJS模块名
      root: 'app/' // 模板ID的前缀，和你之前手动写的保持一致
    }))
    .pipe(gulp.dest('dist/js'));
});

运行这个任务后，会生成一个templates.js文件，里面自动帮你完成所有模板的$templateCache注册，完全不用手动写转义字符串。而且AngularJS 1.2对这种方式完全兼容，不用担心版本问题。

2. 内联ng-template脚本标签（快速过渡方案） #

如果暂时不想调整构建流程，可以直接在HTML文件里用AngularJS原生的<script type="text/ng-template">标签定义模板，Angular会自动把这些模板加入$templateCache，不用再手动调用put()：

<script type="text/ng-template" id="app/mapping/AddFarmField/MassImportWizard.tpl.html">
  <div class="panel panel-default" ng-show="currentStep.value == 'select_rlg'">
    <div class="panel-body">
      <!-- 这里直接写正常的HTML代码，不用转义引号、换行符！ -->
      <p>这是你的模板内容，编辑起来和普通HTML一样方便</p>
    </div>
  </div>
</script>

这种方式的好处是模板可读性极强，改样式、调结构都和写普通页面一样，适合小范围替换那些最头疼的模板。

3. 用ES6模板字符串简化拼接（应急方案） #

如果项目能引入ES6转译支持（比如用Babel），可以把原来的字符串拼接换成ES6模板字符串（反引号`包裹），不用再手动转义引号和换行：

$templateCache.put("app/mapping/AddFarmField/MassImportWizard.tpl.html", `
  <div class="panel panel-default" ng-show="currentStep.value == 'select_rlg'">
    <div class="panel-body">
      <!-- 正常写HTML，不用转义任何字符 -->
    </div>
  </div>
`);

虽然本质还是手动维护，但至少可读性提升了N倍，不用再对着一堆+和转义符抓狂。需要注意的是，AngularJS 1.2本身不支持ES6，所以你需要用Babel把代码转成ES5兼容的版本才能运行。

注意事项 #

• 不管用哪种方案，都要保证模板的id和你之前手动put()的路径完全一致，避免路由或指令引用模板时出错。
• 构建工具方案虽然需要配置一次，但后续新增或修改模板都不用再手动处理，长期维护成本最低，优先推荐。

内容的提问来源于stack exchange，提问作者Kevin