190

我有这样的路线设置：

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 在开始时而不是在请求时下载部分内容。

是否可以？

4

8 回答 8

270

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

  1. 使用script指令 ( http://docs.angularjs.org/api/ng.directive:script ) 将您的部分放入最初加载的 HTML
  2. 如果需要，您还可以从 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});

这里是那些技术的 plunker：http ://plnkr.co/edit/J6Y2dc?p=preview

于 2012-09-10T07:16:44.657 回答
25

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

https://npmjs.org/package/grunt-html2js

于 2013-04-20T21:30:43.743 回答
16

添加构建任务以在 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"...

索引.html

<script src="app/scripts/templates.js"></script>
<div ng-include ng-controller="main as vm" src="'app/views/main.html'"></div>
于 2014-12-11T20:07:35.167 回答
11

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

<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服务而编写的代码 - 它只是一小段代码并且它可以工作：Vojta Jina 的 Gist

它$http.get应该更改为使用您的捆绑文件：

allTplPromise = $http.get('templates/templateBundle.min.html').then(

您的路线templateUrl应如下所示：

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );
于 2014-02-03T10:48:34.580 回答
2

如果您使用 rails，您可以使用资产管道来编译并将您的所有 haml/erb 模板推送到一个模板模块中，该模块可以附加到您的 application.js 文件中。结帐 http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

于 2013-04-28T12:09:10.507 回答
0

我只是用来eco为我做这项工作。 ecoSprockets 默认支持。它是 Embedded 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 一起工作，你可以将它传递给模板属性而不是 templateDir，它就会开始神奇地工作！

于 2013-06-24T08:56:31.660 回答
0

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

于 2016-09-16T17:16:33.273 回答
-1

另一种方法是使用 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

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

  1. 用户为您的站点清除浏览器的数据存储。
  2. 清单文件已修改。注意：更新清单中列出的文件并不意味着浏览器会重新缓存该资源。清单文件本身必须更改。
于 2015-12-18T22:01:31.020 回答