Как загрузить $templateCache перед созданием маршрутов в app.config?

В моем приложении AngularJS я пытаюсь создать сборку, используя grunt и следующие плагины.

  • grunt-contrib-clean
  • grunt-contrib-requirejs
  • grunt-угловые-шаблоны
  • grunt-angular-copy

Я могу успешно создать файл main.js со всем кодом Javascript (контроллеры и т. д.), а также добавить частичные файлы с помощью ngtemplates в main.js.

GruntFile.js

ngtemplates:{
      options: {
       append: true, 
       bootstrap:  function(module, script) {
            return 'require([\'angular\', \'app\'], function(angular, app) { app.run([\'$templateCache\', function($templateCache) {' + script + '}]); });';
        }
      },
      app:{
        cwd:      'app',
        src:      '*/partials/*.html',
        dest:     'build/main.js'
      }
    },

requirejs: {
  compile: {
    options: {
      baseUrl: './app',
      mainConfigFile: "./app/main.js",
      optimize: 'none',
      name: 'main',
      out: "./build/<%= pkg.name %>.js",
      preserveLicenseComments: false,
          paths: {
          'domReady': 'empty:',
          'angular': 'empty:',
          "uiRouter": 'empty:',
          "ui-grid": 'empty:',
          "ng-dialog": 'empty:',
          "jquery": 'empty:',
          "ui-bootstrap": 'empty:',
          "d3js": 'empty:',
          "nvd3": 'empty:',
          'angular-nvd3': 'empty:',
          'angucomplete-alt': 'empty:',
          'spin': 'empty:',
          'angular-spinner': 'empty:',
          'moment': 'empty:',
          'angular-moment': 'empty:',
          'angular-sanitize': 'empty:',
          'ng-csv': 'empty:',
          'ng-cookies': 'empty:'
      }
    }
  }
}

В route.js у меня есть

define(['app'], function(app) {
    'use strict';
    return app.config(function($stateProvider) {
        var routes = [
        {
            state: 'home',
            url: '/home',
            templateUrl: 'app/home/partials/home.html',
            controller:'homeController'
        } 
];

        $stateProvider.state(route.state,
            {
                url: route.url,
                // templateUrl: route.templateUrl,
                templateProvider: function($templateCache) {
                    return $templateCache.get(route.templateUrl);
                },
                controller:route.controller,
                params:route.params
            }
        );

загрузочный код, который был введен grunt-contrib-requirejs в конце файла build/main.js.

require(['angular', 'app'], function(angular, app) { app.run(['$templateCache', function($templateCache) {  
  'use strict';

  $templateCache.put('home/partials/home.html',
    "<div class=\"jumbotron text-center\">\r" +
    "\n" +
    "\t<p>{{message}}</p>\r" +
    "\n" +
    "</div>"
  );
  );
}]); });

Теперь проблема в том, что к main.js добавлен загрузочный код внизу. Что помещает шаблоны в $templateCache. Но когда приложение загружается, оно сначала запускает код конфигурации, а затем вызывается app.run(). Что очевидно. Следовательно, $templateCache.get() получает неопределенные значения в route.js.

Как я могу решить эту проблему?


angularjs requirejs gruntjs grunt-contrib-requirejs angular-templatecache
person Pak    schedule 14.08.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны использовать событие $rootScope.$on("$routeChangeStart",function(){}) для обработки его во время выполнения.

А в случае с аунгулярным UI-маршрутом... я думаю, это $stateChangeStart.

person Akshay Dhankhar    schedule 14.08.2015

arrow_upward
0
arrow_downward

Спасибо за ваши ответы, ребята. Но я нашел свои ошибки. Я внес несколько изменений в текущую реализацию, и она начала работать. Я размещаю его здесь, чтобы он мог быть полезен для кого-то вроде меня в будущем.

  1. Я изменил свой Gruntfile.js и обновил задачу ngtemplates, чтобы создать отдельный файл templates.js вместо добавления его в существующий main.js. Мне даже не нужна опция append: false, но я оставляю ее просто так. Также изменен параметр bootstrap:, чтобы использовать define вместо require.

    ngtemplates: {
options: {
append: false,
bootstrap: function(module, script) {
  return 'define([\'angular\', \'app\'], function(angular, app) { app.run([\'$templateCache\', function($templateCache) {' + script + '}]); });';
 }
},
 app: {
 cwd: 'app',
 src: '*/partials/*.html',
 dest: 'app/templates.js'
 }
},

  2. Я изменил свои route.js (вставлен ниже). Добавлена ​​зависимость модуля «templates», чтобы requirejs загружал templates.js и запускал его, что выполнит код $templateCache.put() до того, как он дойдет до строки return $templateCache.get(). И к тому времени templcateCache будет готов. Я также совершил глупую ошибку, не используя тот же КЛЮЧ, чтобы получить шаблон, который я использовал для помещения его в templateCache. У меня был лишний app/ перед ключом, когда я пытался вытащить его из templateCache.

    define(['app', 'templates'], function(app) {
  'use strict';
  return app.config(function($stateProvider) {
        var routes = [{
          state: 'home',
          url: '/home',
          templateUrl: 'home/partials/home.html',
          controller: 'homeController'
        }];



        $stateProvider.state(route.state, {
          url: route.url,
          // templateUrl: route.templateUrl,
          templateProvider: function($templateCache) {
            return $templateCache.get(route.templateUrl);
          },
          controller: route.controller,
          params: route.params
        });

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

person Pak    schedule 17.08.2015