使用AngularJS路由时，是否有预加载模板的方法？

Question

在Angular应用程序加载后，我需要一些模板可以脱机使用。

这样比较理想：

$routeProvider（$route提供者）.当（'/p1'{控制器：控制器1，templateUrl:“Template1.html”，预加载：true})

Answer 1

这是对@gargc答案的补充。

如果不想使用脚本标记指定模板，并且想从文件加载模板，可以这样做：

myApp.run（函数（$templateCache，$http）{$http.get（'Template1.html'，{cache:$templateCache}）；});myApp.config（函数（$locationProvider，$routeProvider）{$routeProvider.when（'/p1'，{templateUrl:'Template1.html'}）});

Answer 2

有一个模板缓存服务:$templateCache它可以用于在javascript模块中预加载模板。

例如，取自文档：

var myApp=角度模块（'myApp'，[]）；myApp.run（函数（$templateCache）{$templateCache.put（'templateId.html'，'这是模板的内容'）；});

甚至还有一个从html文件预生成javascript模块的任务：咕哝角模板

另一种可能不太灵活的方法是使用内联模板例如，在index.html中有这样的脚本标记：

模板内容

意味着稍后可以使用与路由配置中的实际url相同的方式处理模板(templateUrl:'模板/Template1.html')

Answer 3

我认为我有一个基于Raman Savitski方法的稍微改进的解决方案来解决这个问题，但它有选择性地加载模板。它实际上允许像这样要求的原始语法：

$routeProvider.when（'/p1'，{controller:controller.1，templateUrl:'Template1.html'，preload:true}）

这允许您只需装饰路线，而不必担心在其他地方更新另一个预加载配置。

以下是启动时运行的代码：

角度模块（'MyApp'，[]）.run([“$route”，“$templateCache”，“$http”，（函数（$route，$templateCache，$http）{var-url；for（$route.routes中的var i）{if（$route.routes[i].preload）{if（url=$route.routes[i].templateUrl）{$http.get（url，{cache:$templateCache}）；}}}})]);

Answer 4

预加载模块路由中定义的所有模板。

角度模块（'MyApp'，[]）.run（函数（$templateCache、$route、$http）{var-url；for（$route.routes中的var i）{if（url=$route.routes[i].templateUrl）{$http.get（url，{cache:$templateCache}）；}}})

Answer 5

如果将每个模板包装在脚本标记中，例如：

<script id=“about.html”type=“text/ng-template”><div><h3>关于</h3>这是关于页面太酷了！</div></script>

将所有模板连接到一个大文件中。如果使用Visual Studio 2013，请下载Web要点-它会添加右键单击菜单来创建HTML捆绑包

添加这个家伙编写的代码来更改有棱角的$templatecache服务-它只是一小段代码，并且可以工作：-）

https://gist.github.com/vojtajina/3354046

您的路线templateUrl应如下所示：

$routeProvider.when（当）(“/关于”{控制器：“”，templateUrl:“关于.html”});