如何在 Angular UI 路由器中预加载模板？

Question

我正在使用 Angular UI 路由器。我有很多这样的模板调用：

var access = {
        name: 'access',
        templateUrl: 'app/access/partials/a1.html',
    };

Access 提供的页面取决于 :content。

有没有一种方法可以将所有这些 HTML 文件合并为一个文件并预加载这些文件，这样每个操作都不会涉及另一个请求？我意识到我可以将我的 HTML 直接放在模板中，但是我可以将多个模板中的 HTML 合并到一个文件中并预先加载它以便在需要时准备好吗？

Answer 1

使用，

yourApp.run(['$templateCache', function($templateCache) {
  $templateCache.removeAll();    
}])

你的问题也在本站指出， http://javahow.net/questions/27321315/using-angulars-ui-router-how-can-we-make-sure-the-new-version-of-the-html-part

Answer 2

Is there a way that I could combine all these HTML files into one and pre-load the files so every action didn't involve another request?

是，通过使用html2js;

或者，确切地说，一个 grunt/gulp 插件分别调用 grunt-html2js / gulp-html2js

工作原理

根据这个grunt-html2js tutorial:

" html2js 是一个插件 (...)，它解析应用程序中的所有模板文件并创建一个 javascript 文件来填充 $templateCache.

这是一个非常有用的技巧，可以减少您的应用启动应用程序所需的请求数。

它还可以缩小 html 片段，同时节省一些带宽。

------------

根据 grunt-html2s Github repository:

"html2js 将一组模板转换为 JavaScript 并将它们组装成一个 Angular 模块，该模块在加载模块时直接启动缓存。

您可以将此模块与您的主要应用程序代码连接起来，这样 Angular 就不需要发出任何额外的服务器请求来初始化应用程序。"

------------

根据我的说法:)

我喜欢 html2js 的一点是 您不需要更改任何 angular 代码，只需配置 gruntfile.js / gulpfile.js.

您的 templateUrl 文件将 automagically 在 $templateCache 中可用。

所以它完全符合您的要求：

将所有模板合并到一个模块中；
编写模块的 JavaScript 源代码；

您需要做的就是在代码中将模块指定为依赖项。

Once the module is loaded, all your templates are available in the cache: no request needed!

GUNT 示例/GULP 配置

grunt.initConfig({
  html2js: {
    options: {
    base: 'app',
    module: 'templates',
    htmlmin: {
      ... many available options: see GitHub repo ...
    }
  },
    main: {
      src: ['app/**/*.html'],
      dest: 'templates.js'
    },
  },
})

然后只使用模板模块作为依赖：

angular.module('myApp', [ 'templates']);

------------

这是来自 gulp-html2js GitHub 存储库的示例：

gulp.task('scripts', function() {
  gulp.src('fixtures/*.html')
    .pipe(html2js({
      outputModuleName: 'template-test',
      useStrict: true
    }))
    .pipe(concat('template.js'))
    .pipe(gulp.dest('./'))
})

正在测试

更重要的是，html2js也是test directives that use the templateUrl property的一个很好的工具。

了解更多信息

看完Joel Hooks' (Egghead instructor) book about automation我就遇到了html2js，强烈推荐。

EggHead 网站的

Watch a dedicated video about html2js in the pro section。

Testing directives using the templateUrl property with Karma and karma-ng-html2js-preprocessor

注意

从技术上讲，您可以只使用 ng-html2js，而不使用 Gulp 或 Grub；然后您可以使用如下命令行：

ng-html2js inputFile [outputFile] [-m moduleName] [--module-var ngModule]

但是，由于您需要运行每个 templateUrl 文件的上述命令，Gulp/Grub 自动化似乎是一种更有效的方法。

免责声明

我对我提到的 book/websites/tools 没有特别的兴趣或股份。

注意：我还要补充，你也把这个文件添加到你的html页面：

 <script src="path/to/templates.js"></script>

Answer 3

为什么不在主 html 文件中使用 ng-include 一次加载所有 html。

像这样...

<div ng-repeat="template in templates">
                <ng-include src="template.url"></ng-include>             
            </div>

所以这里的模板是一个对象数组，其中包含您要在 main.html 文件中立即加载的所有 url 其他模板。

Answer 4

简单。将它们全部创建为 ng-template 个块：

<script type="text/ng-template" id="app/access/partials/a1.html">
    Content of the template.
</script>

Answer 5

已经有一个 grunt-angular-templates grunt 插件专门针对这个 angular 任务。我已经使用它一段时间了。此插件使用 $templateCache 自动将您的 HTML 模板缓存在一个文件中，您可以将其添加到您的应用程序中。

grunt-angular-模板 - https://www.npmjs.com/package/grunt-angular-templates

如何在 Angular UI 路由器中预加载模板？

How can I pre load a template in Angular UI router?

angularjs

angular-ui-router

根据这个grunt-html2js tutorial:

------------

根据 grunt-html2s Github repository:

------------

根据我的说法:)

------------