configuration - 配置我的 $routeProvider 时是否可以从 $templateCache 获取模板？

Question

我的意图是通过一次调用外部 JSON 文件来加载我的 Web 应用程序的所有模板，该文件包含所有模板名称和值的列表。

我目前正在我的应用程序的运行阶段加载这些模板:

app.run(function ($http, $templateCache) {
    $http.get('/templates/all.json').success(function (data) {
        var i;
        for (i = 0; i < data.length; i++) {
            $templateCache.put(data[i].name, data[i].template);
        }
    });
});

但是，Angular.js 配置阶段在运行阶段之前执行，所以当我打算从 templateCache 加载时:

app.config(function($routeProvider, $locationProvider) {
    //App routing
    $routeProvider.
        //Homepage
        when('/', {templateUrl: 'home.html'}).

        //My schedule
        when('/my-schedule', {templateUrl: 'my-schedule.html'});
});

Angular 尝试加载 home.html来自服务器，因为 $templateCache还没有填满。

假设 all.json包含 home.html 的模板和 my-schedule.html对于前面的例子。

是否可以填写 $templateCache在配置应用程序的 $routeProvider 之前?

Answer 1

我遇到了同样的问题，经过几个小时的研究，我意识到我问自己一个错误的问题，因为我想做 不一定要使用 XHR 加载模板但只是 确保它们被缓存并存储在一个文件中 .

我有一项繁重的任务，将我所有的 JADE 模板编译为 HTML，并将它们包装在一个大的 Angular 模块中，该模块作为一个名为 templates.js 的单独 JS 文件加载。 所有这些事情都是在后台自动完成的，所以在你花 10 分钟配置它之后，你实际上可以忘记猴子的工作，专注于代码/标记。

(为简洁起见，我将在这里跳过 JADE 部分)

编辑html文件

grunt-contrib-watch 任务:

捕获变化

生成启用了 $templateCache 的 Angular 模块

我的网站已重新加载(使用 liveReload)

这就是我使用 Grunt.js/JADE 和 html2js 解决问题的方式:

我的 index.jade 文件的头部

  script(src='js/modernizr.js')
  script(src='js/vendor.js')
  script(src='js/templates.js')
  script(src='js/app.js')

主应用程序模块的开始(这里使用 CoffeeScript)

'use strict'
# Declare app level module which depends on filters, and services
App = angular.module('app', [ 
  'templates' // just include the module and forget it
  'foo'
  'bar']).config(...)

GruntFile.json(grunt.js 配置)

我需要删除大约 80% 的代码，只留下与模板相关的任务，认为它只是一个草稿。

module.exports = (grunt)->
  imports = grunt.file.readJSON 'app/imports.json'
  grunt.initConfig
    pkg: grunt.file.readJSON 'package.json'



    watch:
      options:
        livereload: yes


      templates:
        files: 'app/**/*.jade'
        tasks: ['buildTemplates']

    jade:
      default:
        options:
          client: no
          wrap: no
          basePath: 'app/'
          pretty: yes
        files:
          'public/': ['app/**/*.jade']

    html2js:
      options:
        module: 'templates'
        base: 'public/'

      main:
        src: 'public/partials/**/*.html'
        dest: 'public/js/templates.js'


    connect:
      server:
        options:
          port: 8081
          base: 'public'
          keepalive: yes


      livereload:
        options:
          port: 8081
          base: 'public'
          # middleware: (connect, options)-> [lrSnippet, folderMount(connect, options.base)]

    copy:
      assets:
        files:[
          src:['**'], dest:'public/', cwd:'assets/', expand: yes
        ]



  grunt.loadNpmTasks 'grunt-contrib-concat'
  grunt.loadNpmTasks 'grunt-contrib-copy'
  grunt.loadNpmTasks 'grunt-contrib-coffee'
  grunt.loadNpmTasks 'grunt-contrib-clean'
  grunt.loadNpmTasks 'grunt-contrib-connect'
  grunt.loadNpmTasks 'grunt-contrib-compass'
  grunt.loadNpmTasks 'grunt-contrib-watch'
  grunt.loadNpmTasks 'grunt-contrib-livereload'
  grunt.loadNpmTasks 'grunt-jade'
  grunt.loadNpmTasks 'grunt-html2js'

  grunt.registerTask 'buildTemplates', ['clean:templates', 'copy:assets', 'jade', 'html2js:main', 'livereload']


  grunt.registerTask 'default', [ 'connect:livereload', 'watch']

结果

单个 .js 文件，其中包含包含在与此类似的 Angular 模块中的所有应用程序模板的列表:

angular.module("partials/directives/back-btn.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("partials/directives/back-btn.html",
    "<a ng-href=\"{{href}}\" class=\"page-title-bar__back\"> <i class=\"icon-chevron-left\"> </i></a>");
}]);

链接

grunt.js

grunt html2js plugin