Wie können Abhängigkeiten für ein Projekt mit AngularJS und RequireJS aufgelöst werden?

Question

Ich habe eine einfache AngularJS-Anwendung, die ich versuche, RequireJS zu refaktorieren.

Da Controller und Dienste async geladen sind, kann ich ng-app nicht in meinem index.html verwenden.

Es folgt mein 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']); 
    } 
); 

Mein login.js ist, wo ich ein Winkelmodul am definieren. Es folgt mein 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); 
}); 

Wie zu sehen ist, ist es auf loginController abhängig ist und loginController auf loginService abhängig ist.

Mein loginService ist definiert als -

"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; 
    }); 

Mit dieser Konfiguration ich eine Störung erhalte - 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.

Was bin ich hier fehlt? Welche Konfiguration muss ich tun, um es richtig zu machen?

Answer 1

Ich sehe ein paar Probleme. Zuerst sollte die App nicht innerhalb des Logins erstellt werden. Die App ist die Basis aller Controller und Dienste.

Also würde ich die App-Erstellung in eine andere Datei namens app.js verschieben.

Da ist in meinem benötigen config:

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

Und:

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

Und dann würde der Controller sein:

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

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