加载 Angular 应用程序后，我需要一些模板可以离线使用。
这样的事情会很理想：
$routeProvider
.when('/p1', {
controller: controller1,
templateUrl: 'Template1.html',
preload: true
})
【问题讨论】：
标签： angularjs offline angularjs-routing
这是@gargc 对答案的补充。
如果你不想使用脚本标签来指定你的模板，并且想从文件中加载模板，你可以这样做：
myApp.run(function ($templateCache, $http) {
$http.get('Template1.html', { cache: $templateCache });
});
myApp.config(function ($locationProvider, $routeProvider) {
$routeProvider.when('/p1', { templateUrl: 'Template1.html' })
});
【讨论】：
$http.get('Template1.html', {cache: $templateCache}); 应该有同样的效果。虽然，它并没有太大的区别:)
有一个模板缓存服务：$templateCache，可用于在 javascript 模块中预加载模板。
例如，取自文档：
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('templateId.html', 'This is the content of the template');
});
甚至还有一个从 html 文件预生成 javascript 模块的繁重任务：grunt-angular-templates
另一种可能不太灵活的方法是使用内联模板，例如，在 index.html 中包含这样的脚本标记：
<script type="text/ng-template" id="templates/Template1.html">template content</script>
意味着以后可以像路由配置中的真实 url 一样处理模板 (templateUrl: 'templates/Template1.html')
【讨论】：
myApp.run(function($templateRequest) { $templateRequest('/url/to/template.html', true); });
我认为基于 Raman Savitski 的方法，我对这个问题有一个稍微改进的解决方案，但它会选择性地加载模板。它实际上允许像这样要求的原始语法：
$routeProvider.when('/p1', { controller: controller1, templateUrl: 'Template1.html', preload: true })
这允许您只装饰您的路线，而不必担心在其他地方更新另一个预加载配置。
这是在启动时运行的代码：
angular.module('MyApp', []).run([
'$route', '$templateCache', '$http', (function ($route, $templateCache, $http) {
var url;
for (var i in $route.routes) {
if ($route.routes[i].preload) {
if (url = $route.routes[i].templateUrl) {
$http.get(url, { cache: $templateCache });
}
}
}
})
]);
【讨论】：
preload: false，我会将其稍微更改为仅不预加载，因此默认情况下会为路由启用预加载。但我认为决定是个人品味，取决于你想做什么。除了那个伟大的sn-p！ +1
preload: true 对我来说效果更好。
预加载模块路由中定义的所有模板。
angular.module('MyApp', [])
.run(function ($templateCache, $route, $http) {
var url;
for(var i in $route.routes)
{
if (url = $route.routes[i].templateUrl)
{
$http.get(url, {cache: $templateCache});
}
}
})
【讨论】：
如果您将每个模板包装在脚本标签中，例如：
<script id="about.html" type="text/ng-template">
<div>
<h3>About</h3>
This is the About page
Its cool!
</div>
</script>
将所有模板连接到 1 个大文件中。如果使用 Visual Studio 2013，下载 Web Essentials - 它添加了一个右键菜单来创建 HTML Bundle
添加这个人为更改 angular $templatecache 服务而编写的代码 - 它只是一小段代码，它可以工作:-)
https://gist.github.com/vojtajina/3354046
您的路线 templateUrl 应如下所示：
$routeProvider.when(
"/about", {
controller: "",
templateUrl: "about.html"
}
);
【讨论】：