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)傳入兩個引數,第一個引數是字串,第二個引數有以下三種情況
1、第二個引數也是字串
$location.search(‘name’,’code-bunny’);——name是引數的屬性名,code-bunny是引數的屬性值,若已有name屬性則修改,若沒有,則新增
2、第二個引數是一個數組
$location.search(‘name’,[‘cwj’,’mitu’]);——name是引數的屬性名,‘cwj’,’mitu’都是name屬性的值,即這個url引數有多個同名屬性。name=cwj&name=mitu
3、第二個引數是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()函式
(五)自定義服務
建立服務的方式有五種:(也是依賴注入的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){……})