Question

目前正在处理一个大的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？

添加模板

提前谢谢你！

Answer 1

除非您在应用程序最初加载后缓存这些模板很重要，否则我只需将这些模板放入自己的文件中，并将该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;默认情况下使用它，因为它缺少前导斜杠。

Answer 2

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

Answer 3

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

建议看看

ng-include和$ templateCache

3 个答案: