将参数从控制器传递到角度服务？

Question

I'm an angular newby. I'm hoping to pass params to a service that fetches data form a server depending on those params. for example, if I want to pass a book name string and then use it in the service to concatenate with the request url. The documentation does not show clearly in this subject and I could not find helpful examples in other resources.

Let say, this is the controller:

app.controller('BookController', ['$scope', '$routeParams', 'books', function($scope, $routeParams, books) {
  // sending params to books service before a successful return 
  books.success(function(data) {
    $scope.book = data[$routeParams.bookId];
  });

and this is the service

app.factory('books', ['$http', function($http) {
    // var url = 'http://...' + ParamFromController + '.json'
    return $http.get(url)
    .success(function(data) {
            return data;
    })
    .error(function(err) {
            return err; 
    });
}]);

So, how can I send params to 'books' service and then use it in the service? Thanks a lot in advance.

Answer 1

You can declare your service as:

app.factory('books', ['$http', function($http) {
    // var url = 'http://...' + ParamFromController + '.json'
    return {
      getVal: function(url,options){
         return $http.get(url,options)
      }
    } 
}]);

and use it in your controller and provide appropriate params to pass into 'books' service:

app.controller('BookController', ['$scope', '$routeParams', 'books', function($scope, $routeParams, books) {
  // sending params to books service before a successful return 
  books.getVal('api/activity.json',{'name':'abc'}).success(function(data) {
    $scope.book = data[$routeParams.bookId];
  });

Also, dont use the .success() callback both in your service and controller function . The books service is returning a promise( $http returns a promise implicitly) and you can handle that in controller.

Answer 2

Right now you are returning the promise / result of the $http as the service instance. Services are not meant to work this way. You should return an object that holds several properties / methods that define your service:

app.factory('books', ['$http', function($http) { 
  var instance = {
    getBook: function(bookId) {  
      return $http.get(...);
    }
  }

  return instance;
}

In the controller you can then use the books service as follows:

books
  .getBook($routeParams.bookId)
  .then(function (result) { ... });

Answer 3

app.factory('books', ['$http', function($http) {

var booksService = {};

booksService.getBook = function(bookId){
{
     return $http.get(url, bookId);
};

return booksService;
}]);

and in your controller

app.controller('BookController', ['$scope', '$routeParams', 'books', function($scope, $routeParams, books) {
 books.getBook($routeParams.bookId).success(function(data) {
    $scope.book = data;
  });