Question

我整天都在苦苦挣扎，似乎我是唯一一个遇到这个问题的人。

在编译之前一切都很完美，甚至在没有设置的情况下进行编译：

almond: true,
wrap: true,

即使使用这些设置，grunt仍可正常运行而不会出现错误。但角度永远不会被引导！如果我尝试通过以下方式在控制台中手动引导它：

angular.bootstrap（document，[＆＃39; wtvApp＆＃39;]）;

返回

Error: [$injector:modulerr] Failed to instantiate module wtvApp due to: Error: [$injector:nomod] Module 'wtvApp' is not available!

我希望能够提供单个文件而不是：

<script data-main="scripts/main" src="components/requirejs/require.js"></script>

我的grunt.js配置:(删除一些路径以简化）

requirejs: {
  dist: {
    options: {
      baseUrl: 'app/scripts',
      name: '../components/almond/almond.js',
      include: ['main.js'],
      out: 'dist/scripts/main.js',
      mainConfigFile: "app/scripts/main.js",
      optimize: 'uglify2',
      generateSourceMaps: true,
      preserveLicenseComments: false,
      useStrict: true,
      wrap: true,
      almond: true,
      findNestedDependencies: true
    }
  }
},

main.js

require.config({
paths: {
    jquery: '../components/jquery/dist/jquery',
    angular: '../components/angular/angular',
    modernizr: "../components/foundation/js/vendor/custom.modernizr",
    async: "../components/async/lib/async",
    underscore: "../components/underscore/underscore",
    gapi: "https://apis.google.com/js/client.js?onload=load",
    foundation:  '../components/foundation/js/foundation/foundation',
    foundationDatePicker: '../components/foundation-datepicker/js/foundation-datepicker',
    ngCookies: '../components/angular-cookies/angular-cookies',
    ngSanitize: '../components/angular-sanitize/angular-sanitize',
    ngRoute: '../components/angular-route/angular-route',
    services: '../scripts/services',
    fixedservices: '../scripts/fixedservices',
    controllers: '../scripts/controllers',
    filters: '../scripts/filters',
    resources: '../scripts/resources',
    animations: '../scripts/animations',
    directives: '../scripts/directives',
    wtvApp: '../scripts/app',
},
shim: {
    jquery: {
        exports: '$'
    },
    angular: {
      deps: ['jquery'],
      exports: 'angular'
    },
    modernizr: { deps: ['jquery'] },
    async: {
      exports: 'async'
    },
    underscore: {
      exports: '_'
    },
    foundation: { deps: ['jquery', 'modernizr'] },
    foundation_orbit: { deps: ["foundation"] },
    foundationDatePicker: { deps: ["foundation"] },
    dante: { deps: ["jquery", "underscore", "sanitize"] },
    ngCookies: { deps: ['angular'] },
    ngSanitize: { deps: ['angular'] },
    ngRoute: { deps: ['angular'] },
    ngResource : { deps: ['angular'] },
    ngAnimate : { deps: ['angular'] },
    snap: { deps: ['angular'] },
    ngSnap: { deps: ['angular', 'snap'] },
    wtvApp: { deps: ['angular', 'foundation', 'ngCookies', 'ngSanitize', 'ngRoute', 'ngResource', 'ngAnimate' ] },
},
priority: [
    'jquery',
    'angular'
]
});

window.name = "NG_DEFER_BOOTSTRAP!";

define([
'jquery',
'angular',
'async',
'modernizr',
'underscore',
'gapi',
'wtvApp',
],
function ($, angular, async, modernizr,underscore) {
    'use strict';
    //when everything is loaded run wtvApp
    $( document ).ready(function() {
        angular.bootstrap(document, ['wtvApp']);
    });
}
);

app.js

'use strict';

define('wtvApp',['jquery',
    'angular',
    'async',
    ], function () {

      var wtvApp = angular.module( 'marketApp', [
        'ngRoute', 
        'ngAnimate'
      ]);

      wtvApp.config(
        ['$routeProvider',
        function ($routeProvider) {

          $locationProvider
            .html5Mode(true)
            .hashPrefix('!');


          $routeProvider 

            //CART
            .when('/cart',{
              templateUrl: 'views/frontdesk/cart.html',
            })
            .when('/card',{
              templateUrl: 'views/frontdesk/card.html',
            })

            //REDIRECT TO HOME
            .otherwise({
              redirectTo: '/'
            });

        }]);

      wtvApp.run(['$route', '$location', '$rootScope', function ($route, $location, $rootScope) {

        $rootScope.$on('$viewContentLoaded', function () {
          $(document).foundation();
        });

      }])


      return wtvApp;

 });

Answer 1

解决了!!!

requirejs: {
  dist: {
    options: {
      baseUrl: 'app/scripts',
      include: ['main.js'],
      out: 'dist/scripts/main.js',
      mainConfigFile: "app/scripts/main.js",
      optimize: "uglify2",
      preserveLicenseComments: false,
      generateSourceMaps: true,
      useStrict: true,
      almond: true,
      wrap: true,
      insertRequire: ['main.js'], // <-- added this
      findNestedDependencies: true
    }
  }
},

Answer 2

经过深思熟虑后，我终于找到了如何让它按照我想要的方式工作。

System.exit(0)

Answer 3

您定义：

angular.module( 'marketApp', [

和Bootstrap：

angular.bootstrap(document, ['wtvApp']);

angular.bootstrap获取模块的DOM节点和名称。你应该按照以下方式进行引导：

angular.bootstrap(document, ['marketApp']);

不能让requirejs，angularjs和杏仁一起工作

3 个答案: