您的位置：首页 > Web前端 > AngularJS

AngularJS入门之Services

2015-05-29 09:12 232 查看

关于AngularJS中的DI

在开始说AngularJS的Service之前，我们先来简单讲讲DI（Dependency Injection，通常中文称之为“依赖注入”）。

DI是一种软件设计模式，主要为了解决组件获取它的依赖组件的问题。DI的概念渗透在AngularJS的各个地方，AngularJS使用一个专门的子系统（$injector）进行DI管理，这个过程包括了创建组件、解析、获取它的依赖组件，并将这些依赖组件回传给请求组件。

我们其实已经在不知不觉中使用DI了（比如在AngularJS自定义Directive中的出现过）：

app.directive('myCurrentTime', ['$interval', 'dateFilter', function ($interval, dateFilter) {
}

上述代码片段在添加Controller时，其中$interval就是Controller中依赖注入Service的推荐方法。由于$injector的存在，对于我们只需将所需服务的名称传入我们的模块即可，底层的工作都将由$injector包办。

$injector的原理如下图：

<!DOCTYPE >
<html>
<head>
<script src="/Scripts/angular.js"></script>
<script type="text/javascript">
(function () {
var app = angular.module('httpServiceTest', []);

app.controller('myController', ['$scope', '$http', function ($scope, $http) {
$scope.students = [];
$http.get('data.txt').
success(function (data, status, headers, config) {
$scope.students = data.students;
console.log(data);
console.log(data.students);
console.log($scope.students);
}).
error(function (data, status, headers, config) {
});
}]);
})();
</script>
</head>
<body ng-app="httpServiceTest" ng-controller="myController">
<div ng-repeat="stu in students">
<p>Name: {{stu.Name}}</p>
<p>Age: {{stu.Age}}</p>
<br />
</div>
</body>
</html>

View Code

关于$http：

$http的基本调用格式：

$http(config).success(function(data,status,headers,config){ }).error(function(data,status,headers,config){ });

config为Json对象，完整参数说明如下：

method{string} - HTTP方法，示例值GET、POST等

url{string} - 请求资源的绝对或者相对路径，示例值 http://mytest.com/user/example 或 /myservice/user/example

params{Object.<string|Object>} - URL的请求参数部分，可以直接是一个完整的字符串也可以是一个对象，对象将被自动JSon序列化（一般给Get使用）

data{string|Object} - 请求参数内容（一般给Post使用）

headers{Object} - Http请求的Headers

xsrfHeaderName{string} - 防XSRF（跨站请求伪造）的Header名称

xsrfCookieName{string} - 防XSRF的Cookie名称

transformRequest{function(data,headersGetter)|Array.<function(data,headersGetter)>} - 自定义Http请求格式的方法

transformResponse{function(data, headersGetter, status)|Array.<function(data, headersGetter, status)>} - 自定义Http响应格式的方法

paramSerializer{string|function(Object):string} - 序列化params的方法

cache{boolean|Cache} - boolean类型指定是否缓存GET请求，或者指定一个由$cacheFactory创建的缓存实例

timeout{number|Promise} - number为请求超时时间（单位为毫秒）；或者指定一个可以中断请求的promise

withCredentials{boolean} - 是否需要证书，详见：requests with credentials

responseType{string} - 返回类型，详见：requestType

注意：由于是入门类文章，本章中对于以上各个参数的用法不深入展开了，这部分内容今后单独开一章来讨论。

$http调用原型中，方法success和error为$http调用返回的promise，promise是由AngularJS的核心服务$q提供的一种处理异步请求的实现方式，关于promise的细节，本篇也不做展开，可参考官方文档：https://docs.angularjs.org/api/ng/service/$q。我们只需知道，由于success和error是$http方法调用返回的promise（承诺），因此在异步完成$http方法的调用完成、失败或超时后，最终必定会调用success或者error方法。

$http的调用原型看起来比较复杂，为了便于使用，AngularJS提供了$http调用的快捷方式（如$http.get, $http.post等），其基本格式如下：

$http.get('/someUrl').success(successCallback);
$http.post('/someUrl', data).success(successCallback);

$http所有方法的快捷方式（其中[config]表示config为可选参数）：

$http.get ：get(url, [config])

$http.head ：head(url, [config])

$http.post ：post(url, data, [config])

$http.put ：put(url, data, [config])

$http.delete ：delete(url, [config])

$http.jsonp ：jsonp(url, [config])

$http.patch ：patch(url, data, [config])

好了，通过本篇的介绍，我们已经基本了解了DI的概念，以及AngularJS中如何使用DI来完成Service的使用，我们还重点看了一下$http以及它的使用方式，当然，关于更多$http的细节今后会单独开一篇讨论的。

如果你和我一样也是AngularJS的新手，那通过这么多天的学习后，我们已经能使用AngularJS完成一个真正的Web网站的原型的搭建了：AngularJS负责前端，数据由后端服务提供。还犹豫什么呢，赶紧自己试试吧。

参考资料

AngularJS官方文档DI：https://docs.angularjs.org/guide/di

AngularJS官方文档Service：https://docs.angularjs.org/api/ng/service

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航