Convert Angular HTTP.get function to service

Question

I am trying to convert an Angular HTTP.get function into my controllers.js to a service in services.js .

In the examples I found, everyone has conflicting ways to implement the service, and their choice of names is confused. In addition, the actual Angular documentation for services uses a different syntax than all the examples. I know this is very simple, but please help me here.

I have app.js , controllers.js , services.js , filters.js .

app.js

 angular.module('MyApp', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/bookslist', {templateUrl: 'partials/bookslist.html', controller: BooksListCtrl}). otherwise({redirectTo: '/bookslist'}); } ]); 

controllers.js

 function BooksListCtrl($scope,$http) { $http.get('books.php?action=query').success(function(data) { $scope.books = data; }); $scope.orderProp = 'author'; } 

Answer 1

Think of modules and dependency injection.

So let's say you have these three files

 <script src="controllers.js"></script> <script src="services.js"></script> <script src="app.js"></script> 

You will need three modules

1. The main application module

 angular.module('MyApp', ['controllers', 'services']) .config(['$routeProvider', function($routeProvider){ $routeProvider .when('/bookslist', { templateUrl: 'partials/bookslist.html', controller: "BooksListCtrl" }) .otherwise({redirectTo: '/bookslist'}); }]); 

Please note that the other two modules are introduced into the main module, therefore their components are available for the entire application.

2. Controller module

Currently your controller is a global function, you can add it to the controller module.

 angular.module('controllers',[]) .controller('BooksListCtrl', ['$scope', 'Books', function($scope, Books){ Books.get(function(data){ $scope.books = data; }); $scope.orderProp = 'author'; }]); 

Books is passed to the controller function and is provided by an accessible service module that has been added to the main application module.

3. Service module

This is where you define your Books service.

 angular.module('services', []) .factory('Books', ['$http', function($http){ return{ get: function(callback){ $http.get('books.json').success(function(data) { // prepare data here callback(data); }); } }; }]); 

There are several ways to register services.

• service : the constructor function is passed (we can call it a class) and returns an instance of the class.
• provider : the most flexible and customizable as it gives you access to the injector call functions when creating a service instance
• factory : the function that the injector calls when creating the service instance is passed.

My preference is to use the factory function and just return the object. In the above example, we simply return the object using the get function, which receives a success callback. You can also change it to pass the error function.

---

Edit The response to the @yair request in the comments is here, how you should introduce the service into the directive.

4. Directive module

I follow the usual pattern, first add the js file

 <script src="directives.js"></script> 

Then define a new module and register the material, in this case the directive

 angular.module('directives',[]) .directive('dir', ['Books', function(Books){ return{ restrict: 'E', template: "dir directive, service: {{name}}", link:function(scope, element, attrs){ scope.name = Books.name; } }; }]); 

Deploy the directive module in the main module in app.js

 angular.module('MyApp', ['controllers', 'services', 'directives']) 

You might want to follow a different strategy and insert the module into the directives module

Note that the annotation for the syntax of inline dependencies is the same for almost everything. The directive introduces the same book service.

Updated by Plunker : http://plnkr.co/edit/mveUM6YJNKIQTbIpJHco?p=preview

Answer 2

The following is a service implementation instead of the aforementioned factory service. Hope this helps.

app.js

 angular.module('myApp', ['controllers', 'services']) .config(['$routeProvider', function($routeProvider){ $routeProvider .when('/bookslist', { templateUrl: 'partials/bookslist.html', controller: "BooksListCtrl" }) .otherwise({redirectTo: '/bookslist'}); }]); 

service.js

 angular.module('services', []) .service('books', ['$http', function($http){ this.getData = function(onSuccess,onError){ $http.get('books.json').then( onSuccess,onError); } }]); 

controller.js

 angular.module('controllers',[]) .controller('BooksListCtrl', ['$scope', 'books', function($scope, books){ $scope.submit = function(){ $scope.books = books.getData($scope.onSuccess,$scope.onError); } $scope.onSuccess = function(data){ console.log(data); $scope.bookName = data.data.bookname; } $scope.onError = function(error){ console.log(error); } }]);