AngularJS와 인증 서비스가 다른 파일

Question

에 내가 게으른 로딩 만들려면이 자습서를 사용하고 있습니다 : http://ify.io/lazy-loading-in-angularjs/

를 그리고 인증을 위해이 튜토리얼 : 나는 다른 파일에 인증 서비스를 저장하고 싶었 https://coderwall.com/p/f6brkg

, AuthenticationService.js라고 말하고 내 app.js에 의존성으로 주입하십시오. 그러나 서비스에 define(['app'], function(){ ... }을 사용하기 전에 app.js를 부트 스트랩해야하고 반환해야합니다.

어떻게하면됩니까?

는 내가 지금까지 있습니다.

이

define(
[ 
    'app/scripts/routes', 
    'app/scripts/services/dependencyResolverFor', 
    'app/scripts/services/AuthenticationService', 
    'uiRouter' 
], 
function(config, dependencyResolverFor, AuthenticationService) 
{ 
    var app = angular.module('app', ['ngRoute','ui.router']); 
    console.log(AuthenticationService); 
    // Register all providers. We can now lazy load files as needed. 
    // Provide dependencies through the routes.js 
    app.config([ 
     '$routeProvider', 
     '$locationProvider', 
     '$controllerProvider', 
     '$compileProvider', 
     '$filterProvider', 
     '$provide', 
     '$stateProvider', 
     function($routeProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $stateProvider) { 
      app.controller = $controllerProvider.register; 
      app.directive = $compileProvider.directive; 
      app.filter  = $filterProvider.register; 
      app.factory = $provide.factory; 
      app.service = $provide.service; 

      $locationProvider.html5Mode(false); 

      if(config.routes !== undefined) { 
       angular.forEach(config.routes, function(route, path) { 
        // Routing happens here 
       }); 
      } 
     } 
    ]); 

    // Check User 
    app.run(['$rootScope', '$state', function($rootScope, $state) { 
     $rootScope.$on("$stateChangeStart", function(event, currentRoute, prevRoute){ 
      // Authenticate here and have access to the service 
     }); 
    }]); 

    return app; 
}); 

AuthenticationService.js이 (가 같이되고 싶어 app.js 현재 작동하지 않는 그것은 app을 말한다 때문에 app.js에서 아직 반환되지 않았으므로 정의되지 않았습니다.

define(['app'], function(app) 
{ 
    app.service('AuthenticationService', function(){ 
     var isLogged = false; 
     var user  = 'guest'; 
     var username = ''; 

     this.login = function() { isLogged = true; }; 
     this.checkLogin = function() { return isLogged; }; 
    }); 
}); 

Answer 1

AuthenticationService를 별도의 각 모듈에 배치 한 다음 주 앱을 하위 모듈 (즉, 하위 모듈)에 종속되게 할 수 있습니다. AuthenticationService가 정의 된 모듈). 뭔가 같은 ...

angular.module('OtherModule', []).service('AuthenticationService', /* etc */); 

다음 모듈을 포함한다 :

이

var app = angular.module('app', ['ngRoute','ui.router', 'OtherModule']); 

편집 : 당신은 (예를 들어, 하나의 app.js에 주입하기) 모듈 객체에 .name을 호출 할 수 있습니다 얻기를 이름이기 때문에 'OtherModule'문자열을 의존성으로 하드 코딩 할 필요가 없습니다.

var app = angular.module('app', ['ngRoute','ui.router', InjectedModule.name]);