将Angular HTTP.get函数转换为服务
|
我试图将我的controllers.js中的Angular HTTP.get函数转换为services.js中的服务。
我发现所有的例子都有冲突的方式来实现服务，他们选择的名称是混乱。此外，服务的实际角度文档使用了与所有示例不同的语法。我知道这是超级简单，但请帮助我在这里。 我有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';
}
考虑模块和依赖注入。
所以，让我们说你有这三个文件 <script src="controllers.js"></script> <script src="services.js"></script> <script src="app.js"></script> 你需要三个模块 主应用模块 angular.module('MyApp',['controllers','services'])
.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/bookslist',{
templateUrl: 'partials/bookslist.html',controller: "BooksListCtrl"
})
.otherwise({redirectTo: '/bookslist'});
}]);
请注意，其他两个模块注入到主模块中，因此它们的组件可用于整个应用程序。 2.控制器模块 目前您的控制器是一个全局函数，您可能需要将其添加到控制器模块中 angular.module('controllers',[])
.controller('BooksListCtrl',['$scope','Books',function($scope,Books){
Books.get(function(data){
$scope.books = data;
});
$scope.orderProp = 'author';
}]);
图书被传递到控制器功能，并且由在主应用程序模块中注入的服务模块提供。 3.服务模块 这是您定义图书服务的位置。 angular.module('services',[])
.factory('Books',['$http',function($http){
return{
get: function(callback){
$http.get('books.json').success(function(data) {
// prepare data here
callback(data);
});
}
};
}]);
有多种方式注册服务。 > service：被传递一个构造函数(我们可以称之为一个类)并返回一个类的实例。 我喜欢使用工厂函数，只是它返回一个对象。在上面的示例中，我们只返回一个带有get函数的对象，该对象传递了一个成功回调。你可以改变它传递一个错误函数。 在评论中编辑回答@ 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','services','directives'])
您可能需要遵循不同的策略并将模块注入到指令模块中 请注意，语法内联依赖性注释对于几乎所有内容都是相同的。指令注入相同的图书服务。 更新Plunker：http://plnkr.co/edit/mveUM6YJNKIQTbIpJHco?p=preview （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |