是否可以配置我的$ routeProvider时取从$ templateCache模板？(Is it

我的目的是我的一个单独调用的Web应用程序的所有模板加载包含所有模板的名称和值的列表外部JSON文件。

我目前装上我的应用程序的运行阶段这些模板：

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

角试图加载home.html从服务器，因为$templateCache尚未填补。

假设all.json包含模板home.html和my-schedule.html为prevous例子。

是否有可能填补$templateCache配置应用程序的前$routeProvider ？

Answer 1:

我有同样的问题后几个小时花费在研究中，我意识到，我问自己错误的问题，因为我想做的事不一定加载使用XHR的模板 ，但只是被肯定，他们正在缓存和存储在一个文件 。

我有咕噜任务编译我的JADE模板HTML和在其中加载称为templates.js一个单独的JS文件一个大角度模块包装他们。 所有这一切都在后台自动完成的，所以你已经花了10分钟后，将其配置，你可以真正忘记了猴子的工作，并专注于代码/标记。

（为简便起见，我要在这里跳过JADE部分）

编辑HTML文件
咕噜-的contrib手表任务：
1. 捕捉变化
2. 产生具有$ templateCache角模块启用
我的网站被重新加载（使用liveReload）

这是我走近使用Grunt.js /玉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配置）

我需要删除CA码的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.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
咕噜html2js插件

Answer 2:

如果你使用HTTP拦截器，你可以注入的$templateCache有：

    $provide.factory('myHttpInterceptor', ['$templateCache', function($templateCache) {
        return {
            request: function(config) {
                // do fancy things with $templateCache here
                return config;
            }
        };
    }]);

Answer 3:

这小提琴是你所需要的。

基本上-你可以把$templateCache在关键templateUrl:里面的属性值$routeProvider配置。