我有这样的路由设置：
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在开始时而不是在要求时下载两个部分。
可能吗？
Answers:
是的，至少有两种解决方案：
script指令（http://docs.angularjs.org/api/ng.directive:script）将您的局部文件放入最初加载的HTML中$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
<script>标记与服务器端包含一起使用。这使我可以将部分文档保留为单独的文件，以供组织使用，但仍将所有文档都放在一个文档中。
如果您使用Grunt来构建项目，则有一个插件可以自动将您的部件组装成Angular模块，该模块可以启动$ templateCache。您可以将该模块与其余代码连接起来，并在启动时从一个文件加载所有内容。
grunt-angular-templates一种做同样的事情-npmjs.org/package/grunt-angular-templates-可以享受一种享受
添加一个构建任务以连接并在Angular中注册您的html部分$templateCache。（此答案是karlgold答案的更详细的变体。）
对于grunt，请使用grunt-angular-templates。对于gulp，请使用gulp-angular-templatecache。
以下是配置/代码段来说明。
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（此文件由构建任务自动生成）
$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-它会添加一个右键单击菜单来创建HTML捆绑包。
添加此人编写的用于更改角度$templatecache服务的代码-只需一小段代码即可工作：Vojta Jina的Gist
其$http.get应改为使用捆绑文件：
allTplPromise = $http.get('templates/templateBundle.min.html').then(您的路线templateUrl应如下所示：
$routeProvider.when(
"/about", {
controller: "",
templateUrl: "about.html"
}
);如果使用rails，则可以使用资产管道将所有haml / erb模板编译并推送到模板模块中，该模板模块可以附加到application.js文件中。结帐 http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading
我只是用来eco为我做这份工作。
eco默认情况下，Sprockets支持。这是Embedded Coffeescript的简写形式，它需要一个eco文件并将其编译为Javascript模板文件，并且该文件将被视为资产文件夹中的任何其他js文件。
所有你需要做的是建立与扩展.jst.eco模板，写有一些HTML代码，轨道会自动编译和服务与资产管道的文件，以及访问模板是很容易的方式：JST['path/to/file']({var: value});其中，path/to/file基于逻辑路径，因此，如果您在中有文件/assets/javascript/path/file.jst.eco，则可以访问以下位置的模板JST['path/file']()
要使其与angularjs一起使用，您可以将其传递给template属性而不是templateDir，它将神奇地开始工作！
另一种方法是使用HTML5的应用程序缓存一次下载所有文件，并将其保存在浏览器的缓存中。上面的链接包含更多信息。以下信息来自该文章：
更改<html>标签以包含manifest属性：
<html manifest="http://www.example.com/example.mf">清单文件必须与mime-type一起提供text/cache-manifest。
一个简单的清单看起来像这样：
CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js一旦应用程序脱机，它将保持高速缓存，直到发生以下情况之一：