角度のあるサービスに交換可能な方法でアクセスする

Question

私はAngularを初めて使っています。ユーザーにリーダーボードを見せたいこれを達成するために、私はそうのようなコントローラと2つのサービスを作成しました：

1. LeaderboardController尋ねLeaderboardServiceリーダーボードの情報について：

   // Controller 
   angular.module("App.Controllers.LeaderboardController", [ 
       "App.Services.LeaderboardService" 
   ]) 
   .controller("LeaderboardController", ($scope, LeaderboardService) => { 
       $scope.users = LeaderboardService.fetch(); 
   }); 
   
   // Socket Service 
   angular.module('App.Services.SocketService', [ 
       "socketio", 
       "App.Services.LeaderboardService" 
   ]) 
   .service('SocketService', function (io, $state, LeaderboardService) { 
       this.socket 
       .on("connect",() => { 
        console.log("Socket connected"); 
       }) 
       .on("get leaderboard data emit", (res) => { 
        LeaderboardService.users = res; 
       }) 
       .on("disconnect",() => { 
        console.log("Socket disconnected"); 
       }); 
   }); 
   
   // Leaderboard Service 
   angular.module('App.Services.LeaderboardService', [ 
       "App.Services.SocketService" 
   ]) 
   .service('LeaderboardService', function (SocketService) { 
   
       this.users = []; 
   
       this.fetch =() => { 
        console.log("fetching..."); 
        SocketService.emit("get leaderboard data"); 
       } 
   }); 
   

   これが流れています。

2. LeaderboardServiceSocketServiceにサーバーに接続し、リーダーボード情報を取得するように指示します。
3. SocketServiceLeaderboard○Serviceを呼び出し、必要な情報を提供します。

ただし、問題があります。 SocketServiceとLeaderboardServiceはお互いに依存しているので、Angularはそれに不平を言う。

私は少し複雑さを取り除きたいです。次のような方法がありますか。

// PSEUDO CODE 
this.socket.on("get leaderboard data emit", (res) => { 
    angular.resolveController("LeaderBoardController", ($scope) { 
     $scope.users = res; 
    }); 
}); 

私は自分でコントローラを呼び出して再生できますか？

私がこれを行うことに関するベストプラクティスを学ぶことができれば驚くはずです。

ありがとうございます。

Answer 1

私はあなたのソケットサービスを削除し、ただやるべきだと思う：

リーダーボードのサービス：

angular.module('App.Services.LeaderboardService', [ 
    "socketio" 
]) 
.service('LeaderboardService', function() { 

    this.users = []; 

    this.fetch = (scope, callback) => { 

     const setUser = (res) => { 
      this.users = res; 
      callback(this.users); 
     }; 

     console.log("fetching..."); 

     this.socket.emit("get leaderboard data"); 
     this.socket.on('get leaderboard data emit', setUser); 

     scope.$on('$destroy',() => { 
      this.socket.off('get leaderboard data emit', setUser); 
     }); 

    } 

}); 

そして、あなたのコントローラで：

angular.module("App.Controllers.LeaderboardController", [ 
    "App.Services.LeaderboardService" 
]) 
.controller("LeaderboardController", ($scope, LeaderboardService) => { 
    LeaderboardService.fetch($scope, (users) => { 
     $scope.users = users; 
    }); 
}); 

Answer 2

私はAngularJSのIRCで私れる好ましい解決策を見つけましたチャネル。 iceboxは私を助けて問題を解決し、クレジットは彼に行く。

---

このソリューションには別のサービスがあります。

// Socket Service 
angular.module('App.Services.SocketService', [ 
    "socketio", 
    "App.Services.SharedDataService" 
]) 
.service('SocketService', function (io, SharedDataService) { 
    this.socket 
    .on("connect",() => { 
     console.log("Socket connected"); 
    }) 
    .on("get leaderboard data emit", (res) => { 
     SharedDataService.data = res; 
    }) 
    .on("disconnect",() => { 
     console.log("Socket disconnected"); 
    }); 
}); 

// Socket Service 
angular.module('App.Services.SharedDataService', []) 
.service('SharedDataService', function() { 
    this.data = []; 

    this.getData =() => { 
     return this.data; 
    }; 
}); 

コントローラでは、我々は単にそのようSharedDataServiceを参照してください。

angular.module("App.Controllers.LeaderboardController", [ 
    "App.Services.SharedDataService" 
]) 
.controller("LeaderboardController", ($scope, SharedDataService) => { 
    $scope.users = SharedDataService.getData(); 
});