javascript - 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() 阶段的方法。如果我能以某种方式将模板 url 路径作为第二个参数(内容)传递，而不是传递实际的 html 代码，这将是一个完美的解决方案。

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

提前致谢!

Answer 1

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

编辑:

---

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

---

如果使用 grunt-angular-templates或像 Dan 这样的 gulp-angular-templatecache said 是一个选项，那么我会接受它，特别是对于生产构建。

请记住，在使用 grunt-angular-templates 时，如果您有一个引用 templateUrl 的指令，例如 /views/main.html 并且您有 views/main.html 加载到您的 $templateCache 中，angular 默认情况下不知道使用它，因为它缺少前导斜杠。