将Angular HTTP.get函数转换为一个服务
我试图将我的controllers.js的Angular HTTP.get函数转换为HTTP.get中的services.js 。
我发现的例子都有相互冲突的方式来实现服务，他们的名字的select是混乱的。 此外，服务的实际angular度文档使用与所有示例不同的语法。 我知道这是超级简单，但请帮助我在这里。
我有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'; }
考虑模块和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); } }]);
