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

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

• 咕噜咕噜
• grunt contrib requirejs
• 格朗特角模板
• 咕噜声角拷贝

我能够使用所有Javascript代码（控制器等）成功创建main.js文件，还能够使用ngtemplates将部分附加到main.js

Grunfile.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:'
      }
    }
  }
}

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

require（['angular'，'app']，function（angular，app）{app.run（['$templateCache'，function（$templateCache）{
"严格使用",；
$templateCache.put（'home/partials/home.html'，
“\r”+
“\n”+
“\t{{message}
\r”+
“\n”+
""
);
);
}]); });

现在的问题是，main.js在底部附加了引导代码。这会将模板放入$templateCache中。但是当应用程序加载时，它首先运行配置代码，然后调用app.run（）。 这是显而易见的。因此，$templateCache.get（）在routes.js中获取未定义的值

---

我如何解决这个问题

您应该在（“$routeChangeStart”，function（）{}）事件中使用$rootScope.$on来处理它

如果是非常规用户界面路由。。

---

我认为它是$stateChangeStart。

您应该使用$rootScope。$on（“$routeChangeStart”，function（）{}）事件在运行时处理它

如果是非常规用户界面路由。。

---

我想是$stateChangeStart。

谢谢你们的回答。但是我发现了我的错误。我在当前的实现中做了一些更改，它开始工作。我把它放在这里是为了将来能对像我这样的人有所帮助

我更改了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（）

代码。到那时，TemplateCache将准备就绪。我还犯了一个愚蠢的错误，没有使用相同的键来获取模板，而我正使用该键将模板放入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
        });

---

在这些更改之后，我的生成文件夹已准备好按预期使用

谢谢你们的回答，伙计们。但是我发现了我的错误。我在当前的实现中做了一些更改，它开始工作。我把它放在这里是为了将来能对像我这样的人有所帮助

我更改了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（）

代码。到那时，TemplateCache将准备就绪。我还犯了一个愚蠢的错误，没有使用相同的键来获取模板，而我正使用该键将模板放入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
        });

在这些更改之后，我的生成文件夹已准备好按预期使用