有没有办法让AngularJS在开始时加载部分，而不是在需要的时候？
我有这样的路由设置：
var myApp = angular.module('myApp', []). config(['$routeProvider', function ($routeProvider) { $routeProvider. when('/landing', { templateUrl: '/landing-partial', controller: landingController }). when('/:wkspId/query', { templateUrl: '/query-partial', controller: queryController }). otherwise({ redirectTo: '/landing' }); }]); 我希望能够使angularjs在开始时下载这两个部分，而不是在请求时下载。
可能吗？
是的，至less有两种解决scheme：
- 使用
script指令（ http://docs.angularjs.org/api/ng.directive:script ）将您的部分放入最初加载的HTML - 如果需要的话，您也可以从JavaScript填充
$templateCache（ http://docs.angularjs.org/api/ng.$templateCache ）（可能基于$http调用的结果）
如果你想使用方法（2）来填充$templateCache你可以这样做：
$templateCache.put('second.html', '<b>Second</b> template');
当然模板内容可能来自$http调用：
$http.get('third.html', {cache:$templateCache});
下面是这些技巧： http ://plnkr.co/edit/J6Y2dc?p=preview
如果您使用Grunt构build项目，则会有一个插件将自动将您的部分组装到一个Angular模块中，以便使$ templateCache充满。 你可以连接这个模块和其余的代码，并在启动时加载一个文件中的所有内容。
添加一个构build任务来在Angular $templateCache连接和注册你的html partials。 （ 这个答案是karlgold答案的一个更详细的变体。 ）
对于咕噜 ，使用grunt-angular-templates 。 对于吞咽 ，使用gulp-angular-templatecache 。
下面是configuration/代码片段来说明。
gruntfile.js示例：
ngtemplates: { app: { src: ['app/partials/**.html', 'app/views/**.html'], dest: 'app/scripts/templates.js' }, options: { module: 'myModule' } }
gulpfile.js示例：
var templateCache = require('gulp-angular-templatecache'); var paths = ['app/partials/.html', 'app/views/.html']; gulp.task('createTemplateCache', function () { return gulp.src(paths) .pipe(templateCache('templates.js', { module: 'myModule', root:'app/views'})) .pipe(gulp.dest('app/scripts')); });
templates.js（这个文件是由构build任务自动生成的）
$templateCache.put('app/views/main.html', "<div class=\"main\">\r"...
的index.html
<script src="app/scripts/templates.js"></script> <div ng-include ng-controller="main as vm" src="'app/views/main.html'"></div>
如果将每个模板包装在脚本标记中，例如：
<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服务 – 它只是一小段代码，它的工作原理： Vojta Jina's Gist
它的$http.get应该被修改为使用你的包文件：
allTplPromise = $http.get('templates/templateBundle.min.html').then(
你的路线templateUrl应该是这样的：
$routeProvider.when( "/about", { controller: "", templateUrl: "about.html" } );
如果您使用rails，则可以使用资产pipe道将所有haml / erb模板编译并插入到可以附加到application.js文件的模板模块中。 结帐http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading
我只是用eco来为我做这个工作。 eco默认支持Sprockets。 这是embedded式Coffeescript的简写，它将一个生态文件和编译成一个Javascript模板文件，该文件将被视为您的资产文件夹中的任何其他js文件。
所有你需要做的就是创build一个扩展名为.jst.eco的模板，并在其中写入一些html代码，rails将自动编译并提供资产pipe道的文件，访问模板的方法非常简单： JST['path/to/file']({var: value}); 其中path/to/file基于逻辑path，所以如果你在/assets/javascript/path/file.jst.eco有文件，你可以在JST['path/file']()
为了使它和angularjs一起工作，你可以把它传递给模板属性而不是templateDir，它会开始神奇的工作！
您可以将$ state传递给您的控制器，然后当页面加载并调用控制器中的getter时，您可以调用$ state.go（'index'）或任何您想要加载的部分。 完成。
另一种方法是使用HTML5的应用程序caching来下载所有文件一次，并将其保存在浏览器的caching中。 上面的链接包含更多的信息。 以下信息来自文章：
更改您的<html>标签以包含manifest属性：
<html manifest="http://www.example.com/example.mf">
清单文件必须与MIMEtypes的text/cache-manifest 。
一个简单的清单看起来像这样：
CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js http://cdn.example.com/scripts/main.js
一旦应用程序脱机，它将保持caching，直到发生以下情况之一：
- 用户清除浏览器的数据存储为您的网站。
- 清单文件被修改。 注意：更新清单中列出的文件并不意味着浏览器将重新caching该资源。 清单文件本身必须改变。
