如何在 app.config 中创建路由之前加载 $templateCache？

Question

在我的 AngularJS 应用程序中，我正在尝试使用 grunt 和以下插件创建构建。

grunt-contrib-clean
grunt-contrib-requirejs
grunt-angular-模板
grunt-angular-复制

我能够使用所有 Javascript 代码（控制器等）成功创建 main.js 文件，并且还能够使用 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:'
      }
    }
  }
}

在 routes.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
            }
        );

在 build/main.js 文件末尾由 grunt-contrib-requirejs 注入的 bootstrap 代码。

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 底部附加了 bootstrap 代码。它将模板放入 $templateCache。但是当应用程序加载时，它首先运行配置代码，然后调用 app.run() 。这是显而易见的。因此，$templateCache.get() 在 routes.js.

中得到未定义的值

我该如何解决这个问题？

Answer 1

你应该使用 $rootScope.$on("$routeChangeStart",function(){}) 事件来处理运行.

如果是 aungular ui-route.. 我认为是 $stateChangeStart。

Answer 2

谢谢大家的回答。但是我发现了我的错误。我对当前的实现做了一些改动，它开始工作了。我把它放在这里，以便将来对像我这样的人有所帮助。

我更改了 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'
 }
},

我更改了 routes.js（插入下方）。添加了 'templates' 模块依赖项，以便 requirejs 加载 templates.js 和运行它，这将在到达 return $templateCache.get() 行之前执行 $templateCache.put() 代码。到那时 templcateCache 将准备就绪。我也犯了一个愚蠢的错误，没有使用相同的 KEY 来获取我用来将其放入 templateCache 的模板。我在尝试从 templateCache 中拉回密钥时在密钥前面有一个额外的 app/。

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

进行这些更改后，我的构建文件夹就可以按预期使用了。

如何在 app.config 中创建路由之前加载 $templateCache？

How to load $templateCache before routes are created in app.config?

requirejs

angularjs

gruntjs

grunt-contrib-requirejs

angular-templatecache