複数のモジュールでサービスを使用するAngularJS

Question

私は2つのモジュールを接続する必要があります。 mainPageと呼ばれるメインモジュールには、ルータと呼ばれる第2のモジュールが組み込まれています。それらは別々のファイルにあります。私はmainPAGEとルータでuserPropagatorServiceというサービスを使いたいと思っています。 このサービスは、現在ログインしているユーザーを取得および設定するために使用する必要があります。 ルータモジュールにサービスを注入しようとしましたが、エラーが発生します。 これをどうすれば実現できますか？

メインページファイル：

var app = angular.module('mainPage',['reg','router']); 

//Returns a promise which generates our user. 
app.factory('userLoginService',['$http',function ($http){ 

    return{ 
    loginService: function(username,password){ 

     var info = {username:username, password:password} 

     var user={}; 

     //Returning http request because of promises 
     return $http({ 

      url: 'webapi/users/login', 
      method: 'POST', 
      data: info, 
      headers: { 
       'Content-Type': 'application/x-www-form-urlencoded' 
      }, 
      transformRequest: function(obj) { 
       var str = []; 
       for(var p in obj) 
       str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); 
       return str.join("&"); 
      }, 
      data:{username: info.username, password: info.password} 

     }).then(function (response) 
     { 

      user = response.data 
      return user; 

     }); 

    } 
    } 
}]); 


app.service('userPropagatorService', function(){ 

    return{ 

     get:function(){ 

      return this.u; 
     }, 

     set:function(user){ 

      this.u = user; 

     } 
    } 

}); 

ルータファイル：

var r = angular.module('router',['ngRoute']) 
    .config(['$routeProvider', '$locationProvider','userPropagatorService', 
     function($routeProvider, $locationProvider, userPropagatorService) { 

     $locationProvider.html5Mode(true); 

     $routeProvider 
     .when("/home",{ 
      templateUrl: "pages/MainPage.html", 
      controller:"homeController" 
     }) 
     .when("/forums",{ 
      templateUrl: "pages/forumsPage.html", 
      controller:"forumController" 
     }) 
     .when("/topics",{ 
      templateUrl: "pages/topicsPage.html", 
      controller:"topicsController" 
     }) 
     .when("/comments",{ 
      templateUrl: "pages/commentsPage.html", 
      controller:"commentsController" 
     }) 
     .otherwise({ 
      redirectTo:"/home" 
     }); 
    }]) 

    .controller("homeController",['$scope','$http',function($scope,$http){ 

     /*$http({ 
      url: "webapi/forums/all", 
      method:"GET" 
     }) 
     .then(function(response){ 
      console.log("YEA!"); 
      console.log(response.data); 
     }, 
     function(response){ 
      console.log("NO:("); 
     })*/ 

     $scope.username = "visitor!" 
     $scope.user = userPropagatorService.get(); 
     if($scope.user != null){ 
      $scope.username=$scope.user.username + "!"; 
     } 

    }]) 
    .controller("forumController",['$scope','$http',function($scope,$http){ 

     $scope.username = "visitor!" 

    }]) 
    .controller("commentsController",['$scope','$http',function($scope,$http){ 

     $scope.username = "visitor!" 

    }]); 

Answer 1

あなたはrouterモジュールでuserLoginServiceを使用したい場合は、メインアプリの外に壊れする必要があります。

var app = angular.module('mainPage',['reg','router']); 

angular.module("services",[]) 
    .factory('userLoginService',['$http',function ($http){ 

    return{ 
     //Service code here 
    }; 
}]); 

次にrouterモジュールに依存関係として追加：

var r = angular.module('router',['ngRoute','services']) 

Answer 2

あなたはconfigブロックにサービス "userPropagatorServiceを" 注入傾けます。 そこから$ methodとreturn関数を持つプロバイダにします。

ang.provider('userPropagatorService', function(){ 
    return{ 
      get:function(){ 
         console.log("in get"); 
     }, 
      set:function(user){ 
      }, 
      $get: function(){ 
        return { 
         meth1: function(){ 

         } 
        } 
      } 
    } 
}); 

ang.config(function(userPropagatorServiceProvider){ 
    console.log(userPropagatorServiceProvider.meth1()) 
})