配置 – 在配置$routeProvider时可以从$templateCache获取模板吗？

我的目的是将我的网络应用程序的所有模板加载到包含所有模板名称和值的列表的外部 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'});
});

Angular尝试从服务器加载home.html,因为$templateCache尚未填写.

假设all.json包含了home.html和my-schedule.html的模板,这个例子就是这个例子.

在配置应用程序的$routeProvider之前,可以填写$templateCache吗？

我有同样的问题,花了几个小时花费在研究上,我意识到我在问自己一个错误的问题,因为我想做的不一定是使用XHR加载模板,只是确保它们被缓存并存储在一个文件

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

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

>编辑html文件
grunt-contrib-watch任务：

抓住变化
>使用$templateCache生成角度模块

>我的网站被重新加载(使用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 config)

我需要删除大约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
> grunt html2js plugin

配置 – 在配置$routeProvider时可以从$templateCache获取模板吗？

猜你在找的Angularjs相关文章