javascript - ng-include 和 $templateCache

标签 javascript html angularjs angularjs-directive

目前正在处理一个大的 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 添加模板?

提前致谢!

最佳答案

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

编辑:


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


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

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

关于javascript - ng-include 和 $templateCache,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30239297/

相关文章:

javascript - 正则表达式用不同条件替换字符串中的前零两次

javascript onchange 属性

angularjs - 我正在尝试将我的 Azure 后端与我的 ionic Angular 前端连接

javascript - 寻找 html 字符串 jquery 解析器(解析 <a> 链接和 <img> 图像)

html - 响应式设计 : viewport isn't being applied properly

javascript - AngularJS View 中的字符串到整数

javascript - AngularJS - html 中的范围变量语法

javascript - rails : Form confirm message with data from the submitted form

JavaScript 验证提交时更改值

javascript - 欧芹 2.0.3 不适用于 bootstrap 3