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){……})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值