将Angular HTTP.get函数转换为一个服务

我试图将我的controllers.js的Angular HTTP.get函数转换为HTTP.get中的services.js

我发现的例子都有相互冲突的方式来实现服务,他们的名字的select是混乱的。 此外,服务的实际angular度文档使用与所有示例不同的语法。 我知道这是超级简单,但请帮助我在这里。

我有app.jscontrollers.jsservices.jsfilters.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'; } 

考虑模块和dependency injection。

所以,让我们说你有这三个文件

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

你需要三个模块

1.主要应用程序模块

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

注意到其他两个模块被注入到主模块中,所以它们的组件可用于整个应用程序。

2.控制器模块

目前您的控制器是全局function,您可能需要将其添加到控制器模块中

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

Books被传递给控制器​​function,并被注入应用程序模块的服务模块提供。

3.服务模块

这是您定义您的Books服务的地方。

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

有多种注册服务的方式。

  • 服务 :传递一个构造函数(我们可以称之为一个类)并返回该类的一个实例。
  • 提供者 :最灵活和可configuration的,因为它使您可以访问注入器在实例化服务时调用的函数
  • 工厂 :在实例化服务时传递注入器调用的函数。

我喜欢使用factoryfunction,只是让它返回一个对象。 在上面的例子中,我们只是返回一个get函数传递成功callback的对象。 你可以改变它来传递一个错误函数。


在评论中编辑回答@ yair的请求,这里是你如何将一个服务注入一个指令。

4.指令模块

我遵循通常的模式,首先添加js文件

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

然后定义一个新的模块并注册一些东西,在这种情况下是一个指令

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

指令模块注入到app.js主模块中。

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

您可能需要遵循不同的策略,并将模块注入指令模块

请注意,几乎所有内容的语法内联依赖注释都是一样的。 该指令是注入相同的书籍服务。

更新的Plunker : http : //plnkr.co/edit/mveUM6YJNKIQTbIpJHco?p=preview

这是服务服务的实现,而不是上面提到的工厂服务。 希望能帮助到你。

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