AngularJS学习（三）——服务

服务——一个函数或对象，可以对外提供某种特定功能。可以在Angular应用中使用

 

内置服务：

（一）$location返回当前页面的url

用‘http://localhost/$location/21.2%$location.html#/foo?name=buuny#myhash’作为例子

1、获取当前完整的url路径：$location.absUrl()——获取上面的整个url

 

2、获取当前url的路径（#后面的内容，包括参数和哈希值）

$location.url();——“/foo?name=buuny#myhash”

对当前url路径进行修改$location.url(‘/foo2?name=bunny2$age=12#myhash2’);

 

3、获取当前url的子路径（#后面的内容，不包括参数）

$location.path();——“/foo”

对当前子路径进行修改$location.path(“/foo2/foo3”);——将/foo改成/foo2/foo3

 

4、获取当前url协议（http或https）

$location.protocol();——http

 

5、获取当前主机名

$location.host();——localhost

 

6、获取当前url的端口

$location.port();——80（wamp的默认端口）

 

7、获取当前url的希哈值

$locatioin.hash();——myhash

 

8、获取当前url的参数的序列化json对象

$location.search();——{“name”,”bunny”}

修改url的参数，其传入的参数有三种情况，根据情况的不同，修改的结果也不同

（1）传入两个参数，第一个参数是字符串，第二个参数有以下三种情况

①第二个参数也是字符串

$location.search(‘name’,’code-bunny’);——name是参数的属性名，code-bunny是参数的属性值，若已有name属性则修改，若没有，则新增

②第二个参数是一个数组

$location.search(‘name’,[‘cwj’,’mitu’]);——name是参数的属性名，‘cwj’,’mitu’都是name属性的值，即这个url参数有多个同名属性。name=cwj&name=mitu

③第二个参数是null

$location.search(‘name’,null)——若是已有属性，则删除该属性，如不是已有属性，则无变化

 

（2）只传入一个参数，格式时候json对象

直接用json的键对值替换url的整个参数部分

$location.search({“name”:”bunny”,”age”:16});

$location.search({“name”:[“bunny1”,”bunny2”],”age”:16});

 

（3）只传入一个参数，格式是字符串

也是代替整个url的参数部分，没有键对值，参数部分是属性名，若转为json对象这个属性的值为true

 

上面红色字体的部分都是可以传入参数进行修改的。返回的值都是$location它本身

 

（二）$http 向服务器发送请求

$http返回的是一个promise对象，拥有success()和error().但是在Angular1.6开始就不再支持success()和error()方法了，改用then().

$http({
       params(查询字符串，跟在URL后面，可以是字符串也可以是对象。如果值不是字符串，，则会被json序列化)
       method:’GET’/’POST’
       url:
    }).then(function successCallback(response){
       //请求成功代码
        },function errorCallback(response){
       //请求失败代码
    });

response是响应对象，内含以下属性：

（1）data：代表转换过后的响应体

（2）status：响应的http状态码

（3）statusText：status的文本模式

（4）headers：这个函数是头信息的getter函数，可以接受一个参数，用于获取对应的值

（5）config：这个对象是用来生成原始请求的完整设置对象

 

$http方法的简写：

$http.get(‘url’).then(function successCallback(response){
       //请求成功代码
},errorCallback(response){
       //请求失败代码
})

除此以外还有$http.put,$http.delete,$http.json……

 

默认情况下，$http服务是不会对请求进行本地缓存，可以通过向$http请求传入一个布尔值或者一个缓存实例来启用缓存$http.get(‘url’,{cache:true});

 

$http服务中的拦截器

通过$httpProvider提供一个名为interceptors的数组来接收拦截器服务注册

$http服务的时候，Angular都会通过我们定义的拦截点进行相应的Ajax操作

可以拦截的点：（都是方法来的）

（1）request：拦截请求，该方法在http发送请求到服务器之前执行。该方法接收请求配置对象作为参数，然后返回配置对象或promise。若返回无效参数或者promise则会被拒绝，调用失败

（2）response：拦截响应。在http接收到从服务器过来的响应之后执行。因此可以修改响应报文或者其他操作。该方法接收响应对象为参数，然后返回响应或者promise

响应对象包括[请求配置（requestion figuration）头（headers）状态（status）和后台传过来的数据（data）]

（3）requestError：拦截请求异常（有时候请求失败或被拦截器拒绝）

请求异常拦截器会拦截上一个请求拦截器（resuest）中断的请求，它可以用来恢复请求或撤销请求之前所做的配置

（4）responseError：响应异常拦截器（后台调用失败）

 

（三）$timeout——对应JS的setTimeOut()函数

（四）$interval——对应JS的setInyerval()函数

（五）$scope——作用域

一个JS对象，有其属性和方法，用于存储模型的语境，模型放在这个语境下才能被控制器、指令和表达式等访问

Angular.module("appName",[]).controller("controllerName",function($scope){
    $scope.carName="bus";//可以在模块上运用这个属性
})

 

（六)$rootScope——根作用域

可作用于整个应用，可在该应用中的各个controller中使用

 

（七）自定义服务

创建服务的方式有五种：（也是依赖注入的5个核心组件。依赖注入：一个或更多的依赖（或服务）被注入（或者说是被引用）到一个独立的对象（应用程序）中，然后成为这个对象（应用程序）的一部分

）

$provider

module中的service()

module中的factory()

module中的value()

module中的constant()

 

value()方法，创建一个简单的JS对象，用于向控制器传递值

//创建一个defaultName的值为5，然后将defaultName这个value对象注入到控制器：
angular.module(“appName”,[ ]).value(“defaultName”,5);
angular.module(“appName”,[ ]).controller(“controllerName”,function($scope,defauleName){
       //操作……
});

 

service()：

angular.module("myapp",[]).service("myService",function(){
                     this.toUpper=function(val){
                            return val.toUpperCase();
                     };
                     this.toLower=function(val){
                            return val.toLowerCase();
                     };
              });

在controller或filter中运用

angular.module("myapp",[])controller("myCtrl",function(myService, $scope){……})

 

factory()：用于返回值

angular.module("myapp",[]).factory("mathService",function(){
                     var factory={};//定义一个对象
                     factory.multiply=function(a,b){
                            return a*b;
                     }
                     return factory;//返回一个对象，实际被注入的服务就是这个对象
              });

注入controller中：

angular.module("myapp",[])controller("myCtrl",function(mathService, $scope){……})