Angular提供的标准服务组件有以下:
- $http:用于处理 XMLHttpRequest
- $location:提供当前URL的信息
- $q: 异步请求使用,promise/deferred模块
- $routeProvider:配置路由
- $log:日志服务
我们看看最常用和调用后端的$http的用法:
$http有下面短方法:$http.get() $http.head() $http.post() $http.put() $http.delete() $http.jsonp()
我们假设调用后端的REST URL是app/phones/phones.json,其返回的是一个Json:
[
{
"age": 13,
"id": "motorola-defy-with-motoblur",
"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
"snippet": "Are you ready for everything life throws your way?"
...
},
...
]
AngularJS的所有Service服务组件都是由依赖注入管理的,DI能够分离表现 数据和控制器,实现分离关注和松耦合。
控制器的代码是:
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
});
注意到:
phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {...}
这表示创建一个名称为'PhoneListCtrl'的服务,其内容是function ($scope, $http) {...},也就是类似
var PhoneListCtrl =function ($scope, $http) {...}
Angular将PhoneListCtrl注入到控制器中,当然PhoneListCtrl也依赖于$scope和$http,它们也是一样,都是被注入器注入。
$http 实现对后端Web服务器的GET请求,URL是: phone/phones.json,路径是相对于当前 index.html文件
当$http成功后success 方法返回一个promise($q)对象。参考:结合RxJS + AngularJS实现异步处理
我们可以使用返回的数据Data赋值到当前的作用域(胶水)$scope中。angular会侦测到JSON响应,然后转换成类似数组的格式。
创建自己的服务
虽然AngularJS提过了很多有用的服务,但是如果你要创建一个很棒的应用,你可能还是要写自己的服务。你可以通过在模块Module api中注册一个服务工厂函数,或者通过Modeul#factory api或者直接通过模块配置函数中的$provide api来实现。
所有的服务都符合依赖注入的原则。它们用一个唯一的名字将自己注册进AngularJS的依赖注入系统(injector),并且声明需要提供给工厂函数的依赖。
使用angular.Module api注册服务:
var myModule = angular.module('myModule', []);
myModule.factory('serviceId', function() {
var shinyNewServiceInstance;
//factory function body that constructs shinyNewServiceInstance
return shinyNewServiceInstance;
});
使用$provide服务:
angular.module('myModule', [], function($provide) {
$provide.factory('serviceId', function() {
var shinyNewServiceInstance;
//factory function body that constructs shinyNewServiceInstance
return shinyNewServiceInstance;
});
});
$的命名约定
前缀$是表示 Angular自己提供的服务名称,如$scope或$provide等,为了防止冲突,最好避免命名自己开发的服务以为$开头。
如果你检查一个scope内部,你也可能会发现一些属性开头也是以 $开头。这些特性被认为是私有的,并且不应该访问或修改。
下面这个代码是将$window注入到自己的服务中:
angular.module('myModule', [], function($provide) {
$provide.factory('notify', ['$window', function(win) {
var msgs = [];
return function(msg) {
msgs.push(msg);
if (msgs.length == 3) {
win.alert(msgs.join("\n"));
msgs = [];
}
};
}]);
});
这是一个通知服务,将消息发送到所有Angular提供的window窗口中显示。
要注意的是所有AngularJS服务都是单例的。这意味着在每一个注入器中都只有一个需要的服务的实例。因为AngularJS极度讨厌全局的东西,这是符合面向对象OO。
我们经常会使用压缩简写对javascript进行缩小,以便获取更小的文件更快下载,压缩简写minfy可能对AngularJS注入有影响。用以下办法:
function PhoneListCtrl($scope, $http) {...}
PhoneListCtrl.$inject = ['$scope', '$http'];
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
使用PhoneListCtrl.$inject 主动注入两个依赖。或者用括号符号[ ]
function PhoneListCtrl($scope, $http) {...}
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', PhoneListCtrl]);
这样之前案例控制器代码就写成了:
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
$resource服务与REST
$resource是一个依赖$Http的服务组件,它创建了一个资源对象,让你与RESTful服务器端数据源实现交互的工厂。返回的是资源对象,提供了高层次的行为,而不需要与低级别$ HTTP服务交互操作方法。需要ngResource 安装(<script src="lib/angular/angular-resource.js"></script>)。具体用法见API
:
对返回的数据进行默认的如下操作:
{ 'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'} };
例如:
var User = $resource('/user/:userId', {userId:'@id'});
var user = User.get({userId:123}, function() {
user.abc = true;
user.$save();
});
User定义为资源$resource类型,小写的user是其一个实例,实际是从服务器抓取的根据id为123的一个User Json数组,那么我们下面可以对user这个实例使用上面几个默认操作,比如user.$save();。可以轻松地执行CRUD操作(创建,读取,更新,删除)。
总结为:
var object = Data.get({id:123}, function() {
object.isDefault = true;
object.$save();
});
下面以phone举例返回列表:
var phonecatServices = angular.module('phonecatServices', ['ngResource']);
phonecatServices.factory('Phone', ['$resource',
function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
}]);
这是从后台返回phone列表的$resource用法。节省了$http之类转换