如何使用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就是我定義的角度模塊。 以下是我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) 
     { 
      //... 
     } 
    ]); 
});