我想转换一个角度HTTP.get在我的功能controllers.js的服务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>
您需要三个模块
1.主要APP模块
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';
}]);
Books传递给控制器的功能，并通过其主要的应用程序模块中注入服务模块提供。
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);
});
}
};
}]);
有注册服务的多种方式。
- 服务 ：传递一个构造函数（我们可以称之为类），并返回类的一个实例。
- 供应商 ：最灵活和可配置的，因为它可以让你访问功能喷油器调用实例化服务时
- 厂家 ：传递函数实例化服务时，喷油器调用。
我的使用偏好factory功能，只是有它返回一个对象。 在上面的例子中，我们只返回一个对象与get传递成功的回调函数。 你可以改变它传递一个错误的功能了。
编辑评论回答@亚伊尔的要求，这里是你将如何注入一个服务为一体的指令。
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);
}
}]);
