Каков наилучший способ передать «$ 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.

Служба является singleton объект, созданный один раз, когда тот же экземпляр передается туда, куда он вводится. По контрасту контроллер будет создан по одному для каждого вида. Поэтому, если у вас есть два представления с использованием одного и того же контроллера, отдельные экземпляры контроллера будут созданы и использованы ими, не разделяя область $. Итак, если вы введете контроллер в службу, снова будет создан и добавлен другой экземпляр службы.

Поскольку служба должна быть общей и независимой от контроллера, вы не должны вводить контроллер в какую-либо службу в соответствии с лучшей практикой кодирования.

Кроме того, как услуга одноточечна и может быть использована любым контроллером или представлениями, он должен быть независимым от просмотра/маршрута и, следовательно, вы не можете использовать $routeParams внутри службы.

Вместо этого вы можете передать $routeParams.matchId в качестве аргумента методу службы.

Примечание: В контроллере, вы использовали $routeParams..matchId с double dots (..) вместо $routeParams.matchId.

Кроме того, нет matchService.getMatch внутри matchService, который используется контроллером.

Вы должны исправить их.

Я изменил код ниже, как я объяснил и посмотрю.

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; 
})