2017-02-22 39 views
0

У меня есть простое приложение AngularJS, которое я пытаюсь реорганизовать для использования RequireJS.Как разрешать зависимости для проекта с помощью AngularJS и RequireJS?

Поскольку контроллеры и службы загружаются async, я не могу использовать ng-app в своем index.html.

Ниже мой 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.

Что я здесь отсутствует? Какую конфигурацию мне нужно сделать, чтобы все было правильно?

ответ

0

Я вижу пару проблем. Сначала приложение не должно создаваться внутри входа. Приложение является базой всех контроллеров и служб.

Поэтому я бы переместил создание приложения в другой файл с именем 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) 
     { 
      //... 
     } 
    ]); 
}); 
+0

Спасибо за ваше предложение. Но у меня мало вопросов: 1. Где я могу настроить свой loginApp? 2. Что происходит с 'login.js'? – pratiksanglikar

+0

взгляните на это сообщение: https://www.startersquad.com/blog/angularjs-requirejs/ – Yaser

+0

Это решило проблему. Спасибо! :) – pratiksanglikar