高效利用Angular中內(nèi)置服務(wù)$http、$location等
AngularJS中為我們提供了眾多的內(nèi)置服務(wù),通過(guò)這些內(nèi)置服務(wù)可以輕松的實(shí)現(xiàn)一些常用功能。下面對(duì)Angular中常用的內(nèi)置服務(wù)進(jìn)行一下總結(jié)。
1.$location服務(wù)
$location服務(wù)用于返回當(dāng)前頁(yè)面的URL地址,示例代碼如下:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
這里為$scope對(duì)象定義了myUrl變量,然后利用$location服務(wù)讀取到了URL地址并存儲(chǔ)到myUrl中。
2..$http服務(wù)
$http 是 AngularJS 中最常用的服務(wù),它經(jīng)常用于服務(wù)器的數(shù)據(jù)傳輸。下面的例子中服務(wù)向服務(wù)器發(fā)送請(qǐng)求,應(yīng)用響應(yīng)服務(wù)器傳送過(guò)來(lái)的數(shù)據(jù)。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
3.$timeout()服務(wù)和$interval()服務(wù)
這兩個(gè)服務(wù)的功能對(duì)應(yīng)的是javascript中的setTimeout()和setTimeInterval函數(shù)。一個(gè)簡(jiǎn)單的實(shí)時(shí)更新時(shí)間例子如下:
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
除了Angular中提供的內(nèi)置服務(wù)外,我們也可以自己定義服務(wù),利用service即可,下面是一個(gè)定義服務(wù)的基本代碼框架:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
定義好服務(wù)后,我們可以像使用內(nèi)置的Angular服務(wù)一樣使用它:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
以上就是針對(duì)Angular中常用的內(nèi)置服務(wù)進(jìn)行的匯總,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
詳解AngularJs路由之Ui-router-resolve(預(yù)加載)
本篇文章主要介紹了詳解AngularJs路由之Ui-router-resolve(預(yù)加載),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
AngularJS使用攔截器實(shí)現(xiàn)的loading功能完整實(shí)例
這篇文章主要介紹了AngularJS使用攔截器實(shí)現(xiàn)的loading功能,結(jié)合完整實(shí)例形式分析了AngularJS攔截器的設(shè)置、調(diào)用及l(fā)oading功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
AngularJS實(shí)現(xiàn)注冊(cè)表單驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)注冊(cè)表單驗(yàn)證功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10
angularJS實(shí)現(xiàn)表格部分列展開(kāi)縮起示例代碼
這篇文章主要介紹了angularJS實(shí)現(xiàn)表格部分列展開(kāi)縮起示例代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-09-09
Angular基于Constructor?Parameter的依賴(lài)注入方式詳解
這篇文章主要為大家介紹了Angular基于Constructor?Parameter的依賴(lài)注入方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
AngularJS extend用法詳解及實(shí)例代碼
這篇文章主要介紹了AngularJS extend用法詳解的相關(guān)資料,并附實(shí)例代碼,幫助大家學(xué)習(xí)理解,需要的朋友可以參考下2016-11-11
Angularjs實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示效果
本篇文章主要介紹了Angularjs實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示的方法,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01
Angularjs 實(shí)現(xiàn)移動(dòng)端在線(xiàn)測(cè)評(píng)效果(推薦)
這篇文章主要介紹了Angularjs 實(shí)現(xiàn)移動(dòng)端在線(xiàn)測(cè)評(píng)效果,需要的朋友可以參考下2017-04-04
Angular引入swiper后autoplay失效的解決辦法詳解
這篇文章主要介紹了Angular引入swiper后autoplay失效的解決辦法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
angular6的table組件開(kāi)發(fā)的實(shí)現(xiàn)示例
這篇文章主要介紹了angular6的table組件開(kāi)發(fā)的實(shí)現(xiàn)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12

