ng-include和$ templateCache

Question

目前正在处理一个很大的html文件（代码超过7k行）。 我必须重构整个事情。 以前负责该代码的人员正在使用下面介绍的方法将特定模板加载到缓存中，以便通过ng-include使用。

<script type="text/ng-template" id="app/templates/example.html">
    <p>Example</p>
</script>

这些模板也作为单独的html文件存在。

我的第一个想法是使用

$templateCache.put(url,content)

在module.run（）阶段的方法。 如果我能以某种方式将template-url-path作为第二个参数（内容）传递，而不是传递实际的html代码，那将是一个完美的解决方案。

或者，也许我应该只通过directive.templateUrl添加模板？

先感谢您！

Answer 1

除非对应用程序最初加载后将这些模板进行缓存对您而言很重要，否则我只会将这些模板放入它们自己的文件中，然后将该templateUrl放在这些指令或路由上。

编辑：

---

当该特定路由或指令加载时，Angular将在应用程序的生命周期中对模板进行一次调用，此后，Angular将仅转到$templateCache服务。 因此，如果仅在指令上指定templateUrl ，则该指令首次加载后，Angular将对该模板进行ajax调用，然后将其存储在$templateCache中。 因此，在页面上有100个使用views/user.html的templateUrl的指令将一次调用该模板，然后再调用一次，直到页面完全重新加载为止。

---

如果像Dan所说的那样使用grunt-angular-templates或gulp-angular-templatecache是​​一个选择，那么我会选择这样做，尤其是对于生产版本。

请记住，尽管在使用grunt-angular-templates时，如果您有一个引用了诸如/views/main.html类的templateUrl的指令，并且已将views/main.html加载到$templateCache ，则angular不会使用它默认情况下，因为它缺少前导斜线。

Answer 2

这可能不是您想要的，但是如果您使用诸如Gulp或Grunt这样的构建系统，则可能会使用诸如gulp-angular-templatecache之类的东西，它基本上将所有模板打包，将它们放入$templateCache并制作出templates模块您只需将它们添加为对应用程序的依赖项即可。

Answer 3

我使用grunt html2js任务将所有模板编译到一个template.js文件中。

推荐看看