如何使用 AngularJS 和 RequireJS 解决项目的依赖关系？

Question

我有一个简单的 AngularJS 应用程序，我正在尝试重构它以使用 RequireJS。

由于控制器和服务是异步加载的，我无法在我的 index.html.

中使用 ng-app

以下是我的main.js

require.config({
    paths: {
        "angular": '../../bower_components/angular/angular',
        "angularCookies": '../../bower_components/angular-cookies/angular-cookies'
    },
    shim: {
        angular: {
            exports: "angular"
        },
        angularCookies : {
            deps: ["angular"]
        }
    }
});

require(['angular', './login/js/login'],
    function (angular) {
        angular.bootstrap(document, ['loginApp']);
    }
);

我的 login.js 是我定义 angular 模块的地方。以下是我的 login.js

'use strict';
define(['angular',
        'angularCookies',
        './login.controller'],
    function(angular, angularCookies, loginController) {
    angular.module('loginApp', [
            'ngCookies'])
        .config(['$cookiesProvider',
            function($cookiesProvider) {
              $cookiesProvider.defaults.path = '/';
              $cookiesProvider.defaults.domain = 'localhost';
            }
        ])
        .run(['$cookies',
            'loginService',
            function($cookies, loginService) {

            }
        ]).controller(loginController);
});

可以看出，它依赖于loginController，而loginController依赖于loginService。

我的 loginService 定义为 --

"use strict";

define(['angular',
        'angularCookies'],

    function (angular, angularCookies) {

        var loginService = angular.module('loginApp')
            .factory('loginService', [
                '$http',
                '$cookies',
                function ($http, $cookies) {

                    // My functions and other code here.

                }]);
        return loginService;
    });

使用此配置时出现错误 - Module 'loginApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我在这里错过了什么？我需要做什么配置才能正确？

Answer 1

我发现了几个问题。首先，不应在登录内创建应用程序。该应用程序是所有控制器和服务的基础。

所以我会将应用创建移动到另一个名为 app.js.

的文件中

然后在我的需求配置中：

shim: {
    'app': {
        deps: ['angular', 'angular-route', 'angularCookies']
    },
    angularCookies : {
        deps: ["angular"]
    }
}

并且：

require
(
    [
        'app'
    ],
    function(app)
    {
        angular.bootstrap(document, ['loginApp']);
    }
);

然后你的控制器将是：

 define(['loginApp'], function(app)
 {
     app.controller('loginController',
     [
         '$scope',

         function($scope)
         {
             //...
         }
     ]);
 });

如何使用 AngularJS 和 RequireJS 解决项目的依赖关系？

How to resolve dependencies for a project using AngularJS and RequireJS?

javascript

require

requirejs

angularjs