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

Question

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

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

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

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

Answer 1

  

有没有办法可以将所有这些HTML文件合并为一个并预先加载文件，以便每个操作都不涉及另一个请求？

是，使用html2js;

或者，确切地说，分别称为grunt-html2js / gulp-html2js

的grunt / gulp插件

如何运作

根据grunt-html2js tutorial：

“html2js是一个插件（...），用于解析应用程序中的所有模板文件，并创建一个填充$templateCache的javascript文件。

这是减少应用启动应用程序所需的请求数量的非常有用的技巧。

它还可以缩小html片段以节省一些bandwitdh。“

----------

根据grunt-html2s Github repository：

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

您可以将此模块与主应用程序代码连接，以便Angular不需要进行任何其他服务器请求来初始化应用程序。“

----------

根据我的说法：）

我喜欢html2js的是您无需更改任何角度代码，只需配置gruntfile.js / gulpfile.js。< / p>

您的templateUrl文件随后$templateCache将automagically提供。

所以它完全符合你的期望：

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

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

  

加载模块后，缓存中的所有模板都可用：无需请求！

GRUNT / GULP CONFIG的例子

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讲师）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自动化似乎是一种更有效的方法。

声明

我对我提到的图书/网站/工具没有特别兴趣或分享。

注意：我还应该添加，您还要将此文件添加到您的html页面：

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

Answer 2

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

像这样......

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

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

Answer 3

易。将它们全部创建为ng-template块：

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

Answer 4

此角度任务已经有一个grunt-angular-templates grunt插件。我已经使用了一段时间了。此插件会使用$templateCache自动将您的HTML模板缓存到一个文件中，您可以在该文件中添加该文件。

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

Answer 5

使用，

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