javascript - AngularJS + RequireJS 不工作

Question

我正在将 AngularJS 与 RequireJS 结合使用。

新问题: RequireJS 不加载任何 Controller 。我正在使用this tutorial .

老问题:RequireJS 加载 main.js 文件、bootstrap.min.js 文件和 jQuery。这效果很好。但由于某种原因它没有加载 Angular 。

我使用的是chrome，在开发者工具选项卡“网络”中只加载了上面提到的3个文件。

console.log(typeof Angular); 等于undefined。 (我已经在开发者控制台中尝试过)

控制台中没有显示错误消息!

解决方案:我通过向 deps 数组中添加“Angular”来修复该问题。

我的main.js代码是: //需要JS配置

require.config({ // Code format changed
// alias library paths
paths: {
    'jquery': '../bower_components/jquery/dist/jquery.min',
    'domReady': '../bower_components/requirejs-domready/domReady',
    'angular': '../bower_components/angular/angular.min',
    'angular-route': '../bower_components/angular-route/angular-route.min',
    'ngFx': '../bower_components/ngFx/dist/ngFx.min',
    'angular-ui-router': '../bower_components/angular-ui-router/release/angular-ui-router.min',
    'bootstrap': '../bower_components/bootstrap/dist/js/bootstrap.min'
},

// angular does not support AMD out of the box, put it in a shim
shim: {
    'angular': {
        exports: 'angular'
    },
    'angular-route': {
        deps: [ "angular" ]
    },
    'ngFx': {
        deps: [ "angular" ]
    },
    'angular-ui-router': {
        deps: [ "angular" ]
    },
    'bootstrap': {
        deps: [ "jquery" ]
    }
},

// Kick start application
deps: [
    './bootstrap',
    'domReady',
    'angular',
    'angular-route',
    'ngFx',
    'angular-ui-router',
    'bootstrap'
]
});

我的bootstrap.js文件:

define([
   'require',
   'angular',
   'app',
   'routes'
], function (require, ng) {
    'use strict';

    require(['domReady!'], function (document) {
        ng.bootstrap(document, ['app']);
    });
});

我的app.js文件:

define([
    'angular',
    './controllers/index',
    './directives/index',
    './filters/index',
    './services/index'
], function (ng) {
    'use strict';

    return ng.module('app', [
        'app.services',
        'app.controllers',
        'app.filters',
        'app.directives',
        'ngFx',
        'ngRoute'
    ]).config(function ($urlRouterProvider) {
        $urlRouterProvider.otherwise('/');
    });
});

文件夹结构:

angular
    controllers
        index.js
        menu.js
        module.js
    directives
    filters
    services

    app.js
    bootstrap.js
    main.js
    routes.js
bower_components
    ...

感谢您的帮助! :-)

Answer 1

我认为你应该将 angular.bootstrap 与 RequireJS 一起使用。此外，您还应该向 deps 添加 Angular。这里api引用:

https://docs.angularjs.org/api/ng/function/angular.bootstrap