有没有一种方法可以让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'
        });
}]);

$templateCache.put('second.html', '<b>Second</b> template');

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

我希望能够使angularjs在开始时下载部分，而不是在请求时下载

---

可能吗？

是的，至少有两种解决方案：

使用

脚本

指令（）将您的部分放入最初加载的HTML中

如果需要，还可以从JavaScript中填写

$templateCache

（）（可能基于

$http

调用的结果）

如果您想使用方法（2）来填写

$templateCache

，您可以这样做：

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'
        });
}]);

$templateCache.put('second.html', '<b>Second</b> template');

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

---

以下是使用这些技术的方法：

如果您使用Grunt构建项目，有一个插件可以自动将您的部分组装到一个角度模块中，该模块将初始化$templateCache。您可以将此模块与其余代码连接起来，并在启动时从一个文件加载所有内容

---

如果您使用rails，您可以使用资产管道来编译所有haml/erb模板，并将其推送到模板模块中，该模块可以附加到application.js文件中。结账

---

我只是用

eco

为我做这项工作。 默认情况下，链轮支持eco。它是嵌入式Coffeescript的简写，它接受一个eco文件并编译成一个Javascript模板文件，该文件将被视为资产文件夹中的任何其他js文件

您只需创建一个扩展名为.jst.eco的模板并在其中编写一些html代码，rails就会自动编译并使用资产管道为文件提供服务，访问模板的方法非常简单：

jst['path/to/file']（{var:value}）

其中

path/to/file

基于逻辑路径，因此如果您在

/assets/javascript/path/file.jst.eco

中有文件，您可以访问位于

jst['path/file']（

---

要使其与angularjs一起工作，您可以将其传递到template属性而不是templateDir，它将神奇地开始工作

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

<script id="about.html" type="text/ng-template">
<div>
    <h3>About</h3>
    This is the About page
    Its cool!
</div>
</script>

您的路由

模板URL

应如下所示：

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'
        });
}]);

$templateCache.put('second.html', '<b>Second</b> template');

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

---

在Angular

$templateCache

中添加一个构建任务来连接和注册html部分。（这个答案是一个更详细的变量）

对于咕噜声，请使用。 对于吞咽，使用

下面是要说明的配置/代码片段

gruntfile.js示例：

ngtemplates: {
  app: {                
    src: ['app/partials/**.html', 'app/views/**.html'],
    dest: 'app/scripts/templates.js'
  },
  options: {
    module: 'myModule'
  }
}

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'));
    });

gulpfile.js示例：

ngtemplates: {
  app: {                
    src: ['app/partials/**.html', 'app/views/**.html'],
    dest: 'app/scripts/templates.js'
  },
  options: {
    module: 'myModule'
  }
}

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'，“\r”。。。

index.html

<script src="app/scripts/templates.js"></script>
<div ng-include ng-controller="main as vm" src="'app/views/main.html'"></div>

---

另一种方法是使用HTML5一次下载所有文件并将其保存在浏览器缓存中。上面的链接包含更多信息。以下信息来自文章：

将

标记更改为包含

清单

属性：

<html manifest="http://www.example.com/example.mf">

一旦应用程序脱机，它将保持缓存状态，直到发生以下情况之一：

用户为您的站点清除浏览器的数据存储

清单文件已修改。注意：正在更新清单中列出的文件 清单并不意味着浏览器将重新缓存该资源 必须更改清单文件本身

---

您可以将$state传递给控制器，然后当页面加载并调用控制器中的getter时，您可以调用$state.go（'index'）或者你想加载的任何部分。完成。

谢谢你的回复。我喜欢模板缓存的想法，因为我不想将内容放入脚本标记中。如何使用它？文档很糟糕。我在其中一条注释中看到了小提琴。但我想从url加载。根据注释更新答案我有时使用内联

与服务器端包含一起标记。这使我可以将我的部分作为单独的文件保存起来，用于组织目的，但仍然可以在一个文档中传递所有内容。您知道选择一个解决方案与另一个解决方案相比是否有速度提升吗？我使用http调用缓存模板，但问题是缓存模板的名称将是url例如：$http.get（'app/correction/templates/group correction table.html'，{cache:$templateCache}）；然后每当我想加载模板时，我就必须使用这个丑陋的名称：（我不喜欢，像这样：还有

grunt angular templates

，它做同样的事情--有效吗？这对索引文件上的模板也有效吗？我的索引文件中有一个ng视图和ng include，我很难让我的应用程序显示出来。我不确定这是否回答了问题，并且更改了t。）编程语言可能有点过头了。嗨@james，我正在使用这个gulp插件。正确加载所有的.html，但当我尝试将html指定为某个对话框插件的一部分时（我使用的是ng材质），它抛出404.ex-$mdDialog.show({控制器：'entityGridCtrl'，模板URL:'user/partials/entityGrid.html'}）；您是否将我的应用程序/视图引用替换为您的用户/部分？Thx。我没有更改部分的路径，我发布了我的问题-不幸的是，此功能现在已被弃用，因此请注意，使用此方法的风险自担根据HTML标准，“此功能正在从Web平台中删除。（这是一个漫长的过程，需要很多年。）“从2016年初开始，建议的替代品，即服务工人，仍然是一项“实验性技术”。目前，我仍在使用应用程序缓存，因为它对我的应用程序运行良好。