"$ routeParams"をAngularJSのサービスに渡す最善の方法は何ですか？

Question

私のangularJsアプリでは、コントローラで$ routeParamsを取得できますが、サービスでどのように取得する必要がありますか？私は心配のアプローチの分離に従って、私のHTTP要求を私のコントローラとは別にしておきたいと思います。

私は私のapp.jsに下記試みたが、私はすべてのError: $injector:unpr Unknown Provider

var app = angular.module('app', ['ngRoute']); // TODO: 'ngAnimate', 'ui.bootstrap' 

app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){ 

    $routeProvider 
     .when('/', { 
      templateUrl: '/app/static/home.html', 
      controller: 'mainController as mainCtrl' 

     }) 
     .when('/match/id-:matchId', { 
      templateUrl: '/app/components/match/matchView.html', 
      controller: 'matchController as matchCtrl' 
     }); 

    // use the HTML5 History API 
    $locationProvider.html5Mode(true); 
}]); 

app.controller('matchController', ['$routeParams', 'matchService', function ($routeParams, matchService) { 
    var matchCtrl = this; 
    matchCtrl.matchId = $routeParams..matchId; // how can I move this into the service 

    this.getMatchId = function() 
    { 
     return matchCtrl.matchId; 
    }; 

    var promise = matchService.getMatch(); 
    promise.then(function (data) 
    { 
     matchCtrl.match = data; 
    }); 
}]) 

app.service("matchService", function ($http, $q, matchController) 
{ 
    var matchId = matchController.getTable(); 

    var url = 'https://jsonplaceholder.typicode.com/posts/1'; 
    $http({ 
     method: 'GET', 
     cache: true, 
     url: url, 
     headers: { 
      'Content-Type': 'application/json;charset=UTF-8' 
     } 
    }). 
    success(function(response) { 
     //your code when success 
     // lgTblCtrl.amateurTable = data; 
     deferred.resolve(response); 
     console.log('SUCCESS!'); 
    }). 
    error(function(response) { 
     //your code when fails 
     console.log('ERROR!'); 
    }); 

    this.getTable = function() 
    { 
     return deferred.promise; 
    }; 
}) 

Answer 1

まずを取得し、あなたは内に注入されるmatchServiceがmatchControllerとmatchControllerに注入され循環参照を作成しましたmatchService。

サービスは、シングルトンオブジェクトです。作成されたオブジェクトは、一度作成されると、一度作成されると、同じインスタンスが挿入されるたびに渡されます。対照的に、コントローラはビ​​ューごとに1つ作成されます。したがって、同じコントローラを使用する2つのビューがある場合、$ scopeを共有しないことによって、別々のコントローラインスタンスが作成され、それらによって使用されます。したがって、コントローラにサービスを注入すると、もう1つのインスタンスが作成され、サービスに注入されます。

サービスは汎用でコントローラから独立している必要があるため、最良のコーディング方法に従ってコントローラを任意のサービスに注入しないでください。

シングルトンであり、任意のコントローラまたはビューで使用できるため、ビュー/ルートとは独立している必要があります。サービス内で$routeParamsを使用することはできません。

代わりに、$routeParams.matchIdを引数としてサービスメソッドに渡すことができます。

注：あなたのコントローラでは、あなたがdouble dots (..)代わりの$routeParams.matchIdと$routeParams..matchIdを使用していました。

また、コントローラによって使用されるmatchService内には、matchService.getMatchはありません。

修正する必要があります。

私が説明したように、以下のコードを変更しました。

var app = angular.module('app', ['ngRoute']); // TODO: 'ngAnimate', 'ui.bootstrap' 

app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){ 

    $routeProvider 
     .when('/', { 
      templateUrl: '/app/static/home.html', 
      controller: 'mainController as mainCtrl' 

     }) 
     .when('/match/id-:matchId', { 
      templateUrl: '/app/components/match/matchView.html', 
      controller: 'matchController as matchCtrl' 
     }); 

    // use the HTML5 History API 
    $locationProvider.html5Mode(true); 
}]); 

app.controller('matchController', ['$routeParams', 'matchService', function ($routeParams, matchService) { 
    var matchCtrl = {}; 

    var promise = matchService.getMatch($routeParams.matchId); 
    promise.then(function (data) 
    { 
     matchCtrl.match = data; 
    }); 
}]) 

app.service("matchService", function ($http, $q) 
{ 
    var deferred = $q.defer(); 

    function getMatch(matchId) { 
     var url = 'https://jsonplaceholder.typicode.com/posts/1'; 
     return $http({ 
     method: 'GET', 
     cache: true, 
     url: url, 
     headers: { 
      'Content-Type': 'application/json;charset=UTF-8' 
     } 
     }). 
     then(function(response) { 
     //your code when success 
     // lgTblCtrl.amateurTable = data; 
     deferred.resolve(response); 
     console.log('SUCCESS!'); 
     }, function(response) { 
     //your code when fails 
     console.log('ERROR!'); 
     deferred.reject(response); 
     }); 

     return deferred.promise; 
    } 

    this.getMatch = getMatch; 
})