Question

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

咕噜-的contrib清洁
咕噜-的contrib-requirejs
咕噜 - 角的模板
咕噜-角复制

我能够使用所有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注入的引导代码。

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（）在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（插入下面）。添加了＆＃39;模板＆＃39;模块依赖性，以便requirejs加载templates.js并运行它，它将在$templateCache.put()行之前执行return $templateCache.get()代码。到那时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？

2 个答案: