AngularJS + RequireJS 不工作答案

【问题标题】：AngularJS + RequireJS not workingAngularJS + RequireJS 不工作
【发布时间】：2014-10-10 06:54:27
【问题描述】：

我正在使用 AngularJS 和 RequireJS。

新问题： RequireJS 不加载任何控制器。我正在使用this tutorial。

老问题： RequireJS 加载 main.js 文件、bootstrap.min.js 文件和 jQuery。这很好用。但由于某种原因它不会加载角度。

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

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

控制台中没有显示错误信息！

解决方案：我通过在 deps 数组中添加“角度”来修复它。

我的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
    ...

感谢您的帮助！ :-)

【问题讨论】：

在'./bootstrap'之后的deps数组中添加'angular'
您不必要地为 Angular 声明了多个 exports 属性。您唯一需要的是'angular'，其余的都扔掉。

标签： javascript angularjs requirejs

【解决方案1】：

我认为您应该将 angular.bootstrap 与 RequireJS 一起使用。此外，您应该向 deps 添加角度。这里api参考：

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

【讨论】：

好的，我已经使用 this Tutorial 设置了这个 - 将 Angular 添加到 deps 工作正常。现在出现了问题，控制器没有从引导程序加载。

【解决方案2】：

以下解决了我的问题：

将依赖项添加到 main.js 的 deps 数组中。
Twitter Bootstrap 和 Bootstrap.js 文件遇到了名称冲突。我通过将 'bootstrap': '../bower_components/bootstrap/dist/js/bootstrap.min' 重命名为 'tw-bootstrap': '../bower_components/bootstrap/dist/js/bootstrap.min' 并重命名所有其他关系解决了这个问题。

【讨论】：

【解决方案3】：

过去几个小时寻找相同问题的解决方案，挖掘所有可能的方法，但最终通过将角度模块名称 'app' 重命名为其他名称（即 'myApp'）得到解决方案。然后它开始工作。

此处修改代码

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

    require(['domReady!'], function (document) {
        ng.bootstrap(document, ['myApp']);
    });
});
My app.js file:

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

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

【讨论】：