1

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

  • grunt-contrib-clean
  • grunt-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
            }
        );

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() 在 routes.js 中获得了未定义的值。

我该如何解决这个问题？

4

2 回答 2

0

您应该使用 $rootScope.$on("$routeChangeStart",function(){}) 事件在运行中处理它。

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

于 2015-08-14T18:11:26.720 回答
0

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

  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. 我更改了我的 routes.js（插入在下面）。添加了 'templates' 模块依赖，以便 requirejs 将加载 templates.js 并运行它，这将在代码行$templateCache.put()之前执行代码return $templateCache.get()。到那时 templcateCache 将准备就绪。我也犯了一个愚蠢的错误，没有使用相同的 KEY 来获取我用来将其放入 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
        });

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

于 2015-08-17T15:50:51.403 回答