有使用AngularJS路由时预加载模板的方法吗？
Angular应用程序加载后，我需要一些模板脱机使用。
像这样的东西将是理想的：
$routeProvider .when('/p1', { controller: controller1, templateUrl: 'Template1.html', preload: true }) 有一个模板caching服务 ： $ templateCache ，可以用来在JavaScript模块中预加载模板。
例如，从文档中提取：
var myApp = angular.module('myApp', []); myApp.run(function($templateCache) { $templateCache.put('templateId.html', 'This is the content of the template'); });
甚至有一个grunt任务可以从html文件中预先生成一个javascript模块： grunt-angular-templates
另一种方式，也许不那么灵活，就是使用内联模板 ，例如，在你的index.html中有一个像这样的脚本标签：
<script type="text/ng-template" id="templates/Template1.html">template content</script>
意味着模板可以稍后以与路由configuration中的真实url相同的方式寻址（ templateUrl: 'templates/Template1.html' ）
这是@gargc的答案的补充。
如果你不想使用script标签来指定你的模板，并且想从文件中加载模板，你可以这样做：
myApp.run(function ($templateCache, $http) { $http.get('Template1.html', { cache: $templateCache }); }); myApp.config(function ($locationProvider, $routeProvider) { $routeProvider.when('/p1', { templateUrl: 'Template1.html' }) });
基于拉曼·萨维茨基（Raman Savitski）的方法，我想我已经稍微改进了这个问题的解决scheme，但它有select地加载模板。 它实际上允许这样要求的原始语法：
$routeProvider.when('/p1', { controller: controller1, templateUrl: 'Template1.html', preload: true })
这允许你只是装饰你的路线，而不必担心在别的地方更新另一个预加载configuration。
这里是开始运行的代码：
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 }); } } } }) ]);
预加载模块路由中定义的所有模板。
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>
将所有模板连成一个大文件。 如果使用Visual Studio 2013，请下载Web Essentials – 它会添加一个右键菜单来创build一个HTML Bundle
添加这个人写的代码来改变angular度$ templatecache服务 – 它只有一小块代码，它的工作原理:-)
https://gist.github.com/vojtajina/3354046
你的路线templateUrl应该是这样的：
$routeProvider.when( "/about", { controller: "", templateUrl: "about.html" } );
