ng-include和$ templateCache

时间:2015-05-14 13:58:17

标签: javascript html angularjs angularjs-directive

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

app('request')->headers->get('referer')

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

我的第一个想法是使用

<script type="text/ng-template" id="app/templates/example.html">
    <p>Example</p>
</script>
module.run()阶段的

方法。如果我能以某种方式将template-url-path作为第二个参数(内容)传递而不是传递实际的html代码,那将是一个完美的解决方案。

或者我应该只通过directive.templateUrl?

添加模板

提前谢谢你!

3 个答案:

答案 0 :(得分:3)

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

修改

当该特定路由或指令加载时,Angular将在应用程序的生命周期内对模板执行一次调用,之后Angular将仅转到 <input type="submit" name="remove" id="remove" value="<<" /> </td> <td valign="top"> @Html.ListBoxFor(model => model.RequestedSelected, new MultiSelectList(Model.RequestedExercises, "RegimeItemID", "RegimeExercise.Name", Model.RequestedSelected)) </td> 服务。因此,如果您只是在指令上指定$templateCache,那么一旦该指令首次加载,Angular将对该模板执行ajax调用,然后将其存储在templateUrl中。因此,在页面上使用$templateCache templateUrl的100个指令将对该模板进行一次调用,然后再对该页面进行完全重新加载。

如果使用grunt-angular-templates或像Dan这样的gulp-angular-templatecache是​​一个选项,那么我会继续使用它,特别是对于生产版本。

请注意,虽然使用grunt-angular-templates时,如果你有一个引用像views/user.html这样的templateUrl的指令而你的/views/main.html加载了views/main.html,则会赢得角度&# 39;默认情况下使用它,因为它缺少前导斜杠。

答案 1 :(得分:1)

这可能是您正在寻找的,也可能不是,但如果您使用GulpGrunt等构建系统,您可以使用基本打包所有模板的gulp-angular-templatecache之类的内容,将它们放入$templateCache并创建一个templates模块,您只需将其添加为应用程序的依赖项。

答案 2 :(得分:1)

我将所有模板编译为一个带有grunt html2js任务的templates.js文件。

建议看看