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

Service是一个 singleton 对象，创建一次，它是在注入的任何地方传递的相同实例。相反，每个视图将创建一个控制器。因此，如果您有两个使用相同控制器的视图，则不会共享$ scope，将创建并使用单独的控制器实例。因此，如果您将控制器注入服务，则将再次创建另一个实例并将其注入服务。

由于服务应该是通用的并且独立于控制器，因此您不应该按照最佳编码惯例将控制器注入任何服务。

此外，由于服务是 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;
})

什么是传递＆＃34; $ routeParams＆＃34;的最佳方式。到AngularJS的服务？

1 个答案: