Можно ли извлекать шаблоны из $templateCache при настройке my $routeProvider?

Мое намерение - загрузить все шаблоны моего веб-приложения с помощью одного вызова внешнего файла 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 выполняется перед фазой запуска, поэтому, когда я намереваюсь загрузить из шаблонаCache:

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?

Ответы

Ответ 1

У меня была такая же проблема, и после нескольких часов, проведенных на исследованиях, я понял, что задаю себе неправильный вопрос, поскольку то, что я хотел сделать , не обязательно загружало шаблоны с использованием XHR, а просто убедитесь, что они кэшированы и сохранены в одном файле.

У меня есть задача grunt скомпилировать все мои шаблоны JADE в HTML и обернуть их в один большой модуль angular, который загружается как отдельный JS файл с именем templates.js. Все эти вещи выполняются автоматически в фоновом режиме, поэтому после того, как вы потратили 10 минут на его настройку, вы действительно можете забыть работу обезьян и сосредоточиться на коде/разметке.

(ради краткости я собираюсь пропустить часть JADE здесь)

  • изменить html файл
  • Задача grunt-contrib-watch:
    • ловит изменение
    • генерирует angular модули с включенным $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)

Мне нужно было удалить около 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>");
}]);

Ссылки

Ответ 2

если вы используете HTTP-перехватчик, вы можете ввести $templateCache там:

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

Ответ 3

Эта скрипта - это то, что вам нужно.

В принципе - вы можете просто поместить ключ $templateCache в значение свойства templateUrl: внутри конфигурации $routeProvider.