AngularJs功能（七）--服務

妤鋒シ發布于2019-08-22 13:59 / 1246人閱讀

摘要：通過工廠模式創建自定義服務同樣可以注入依賴，但不能注入作用域對象。名字必須符合規范你的服務名字龍傲天使用方法關聯對應的和使用和方法創建服務，常用于返回一個常量。

服務 Service

服務這個概念其實并不陌生，比如在Java語言中便有這樣的概念，其作用就是對外提供某個特定的功能，如消息服務，菜單服務等，是一個獨立的模塊。

angular的服務是這樣定義的：
Angular services are singletons objects or functions that carry out specific tasks common to web apps.

在Angular中，服務的本質是一些和控制器捆綁在一起的一個單例對象或函數，對外提供特定的功能。通過這些對象提供了在應用的整個生命周期都存有數據的方法，當重載或刷新頁面時，數據不會被清除，而且還與加載之前保持一致。即無論這個服務被注入到任何地方，對象始終只有一個實例。

這與我們自己定義一個function然后在其他地方調用不同，因為服務被定義在一個模塊中，所以其使用范圍是可以被我們管理的。angular的避免全局變量污染意識非常強。

內置服務

Angular提供了很多內置服務，如$scope、$http、$window、$location等。

我們介紹一下$location。（注意服務是如何注入控制器的，后邊會有多帶帶模塊介紹angular的依賴注入）

獲取url的相關方法:


  當前的地址是： {{url}}
  

angular.module("MyApp").controller("MyController"["$scope","$location",function($scope,$location){
  $scope.onclick = function () {
    $scope.url = $location.absUrl();
  }
}])

以"http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=false" 這個路徑為例:

1.獲取當前完整的url路徑:
$location.absUrl():
http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=false

*2.獲取當前url路徑(當前url#后面的內容,包括參數和哈希值--哈希值介紹):
$location.url();
// /demandManager/view.html?orderId=10&projectId=42&mWin=false*3.獲取當前url的子路徑(也就是當前url#后面的內容,不包括參數):
$location.path()
// /demandManager/view.html

4.獲取當前url的協議(比如http,https)
$location.protocol()
// http

5.獲取當前url的主機名
$location.host()
// localhost

6.獲取當前url的端口
$location.port()
// 80 (這里就是wamp的默認端口號)

*7.獲取當前url的哈希值（hash 屬性是一個可讀可寫的字符串，該字符串是 URL 的錨部分）
$location.hash()
// null

*8.獲取當前url的參數的序列化json對象
$location.search()
// {"orderId":10,"projectId":42,"mWin":"false"}

修改url的相關方法:

于$location.search()，$location.url();，$location.path()，$location.hash()，這四種可以傳入參數進行修改url,在這種情況下,函數的返回值都是$location本身:

1.修改url的子路徑(也就是當前url#后面的內容,包括參數):

參數格式:字符串

$location.url("/demandCustomer/view.html?orderId=10&projectId=42&mWin=true");
//http://39.106.222.235:8080/cds/personalCenter/index.html#/demandCustomer/view.html?orderId=10&projectId=42&mWin=true

2.修改url的子路徑部分(也就是當前url#后面的內容,不包括參數):

參數格式:字符串

$location.path("/demandCustomer/view.html");
//http://39.106.222.235:8080/cds/personalCenter/index.html#/demandCustomer/view.html?orderId=10&projectId=42&mWin=false

3.修改url的哈希值部分

參數格式:字符串

$location.hash("#footer");
//http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=false#footer

4.修改url的參數部分(這是重點啊!!!!!!!!)

(1).傳入兩個參數,第一個參數的格式為字符串:

①第二個參數的格式也是字符串

第一個參數表示url參數的屬性名,第二個參數是該屬性名的屬性值,如果是已有屬性名,則修改,如果不是已有屬性,則新增

$location.search("mWin","true")
//http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=true

②第二個參數的格式為數組,數組中的各個值也是字符串或者布爾值

第一個參數表示url參數的屬性名,第二個參數是該屬性名的值,有多少個值,url中就會依次重復出現多少個.如下:

$location.search("projectSearch",["book","home"])
//http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=false&projectSearch=book&projectSearch=home

(2).傳入兩個參數,第一個參數為字符串,第二個參數為null:

第一個值表示url參數的屬性名,如果是已有屬性名,則刪除該屬性,如果不是已有屬性,那就等于沒改過

$location.search("projectId",null)
//http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&mWin=false

(3).傳入一個參數,格式為json對象:

直接用這個json對象里的鍵值對替換整個url的參數部分

①普通的鍵值對:

$location.search({orderId:11,projectId:45,mWin:true,projectSearch:"book"})
//http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=11&projectId=45&mWin=true&projectSearch=book

②屬性值為一個數組:

$location.search({orderId:11,projectId:45,mWin:true,projectSearch:["book","home"]})
//http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=11&projectId=45&mWin=true&projectSearch=book&projectSearch=home

(4).傳入一個參數,格式為字符串:

直接用這個字符串替換整個url的參數部分(沒有鍵值對,參數部分就是一個屬性名)

$location.search("role")
//http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?role

不存入歷史記錄

在上文的所有修改url的方法的時候,每修改一次,url都會被存入歷史記錄,可以使用后退按鈕回到修改前的url,如果不想要這種效果,而僅僅是替換當前的記錄,可以使用:

$location.replace();

例子：

// 原url:
// http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=false


$location.url("/demandCustomer/view.html?orderId=10&projectId=45&mWin=true");
// 修改一次后:
// http://39.106.222.235:8080/cds/personalCenter/index.html#/demandCustomer/view.html?orderId=10&projectId=45&mWin=true

// 按下后退回到原url:
// http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=false
// 再按下前進回到修改后url:
// http://39.106.222.235:8080/cds/personalCenter/index.html#/demandCustomer/view.html?orderId=10&projectId=45&mWin=true

$location.path("/demandCustomer").replace();
// 修改第二次后調用replace():
// http://39.106.222.235:8080/cds/personalCenter/index.html#/demandCustomer/view.html?orderId=10&projectId=42&mWin=false

// 按下后退,不會回到第二次修改前的url,而是回到第一次修改前的url
// http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=false

監聽路徑跳轉

Angular也可以監聽路徑的變化，這些事件我們會在路由中做講解。（待添加）

http請求

$http是Angular內置的服務，用于服務向服務器發送請求，應用響應服務器傳送過來的數據。
寫法：

寫法一
$http({
  method: "GET", //可以改成POST
  url: "/someUrl"
}).then(function successCallback(response) {
// 請求成功執行代碼
  }, function errorCallback(response) {
// 請求失敗執行代碼
});

寫法二
$http.get("/someUrl",config).then(successCallback, errorCallback); 
$http.get("/someUrl",{params:{"id":3}}).then(successCallback, errorCallback);
$http.post("/someUrl", data:{name:"aaa",id:"1",age:"20"},config).then(successCallback, errorCallback);

jsonp寫法
$http({ 
  method: "JSONP", 
  url: "http://www.b.com/test.php?callback=JSON_CALLBACK"
}).success(function(response){ 
  console.log(response); 
}); 

$http.jsonp(
  "http://www.b.com/test.php?callback=JSON_CALLBACK"
).success(function (response){ 
  console.log(response); 
}); 
//這里要注意，跨域請求的url后一定要追加參數callback，并且callback的值是固定的，即JSON_CALLBACK，不要去做任何改動

這里只做簡單介紹，項目中我們使用的是基于$http的$resource服務，$resource依賴于$http。創建一個resource對象的工廠函數，可以讓你安全的和RESFUL服務端進行數據交互。
需要注入 ngResource 模塊。同樣會有多帶帶模塊介紹。這里是連接（待添加）。

延時器與計時器

J是中的setTimeout()和setInterval()這個大家肯定不會陌生，在Angular中也有同樣的服務
$timeout 服務

angular.module("myApp").controller("myCtrl", function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
       $scope.myHeader = "How are you today?";
    }, 2000);
});
//要在模塊中引入

$interval 服務

angular.module("myApp").controller("myCtrl", function($scope, $timeout) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
    //時間綁定。
});

自定義服務 創建自定義服務

3種創建自定義服務的方式。

Factory

Service

Provider

之前也沒有提到過，Angular這套框架最開始是由后臺人員開發的，應用了后臺早就存在的分層思想。所以項目也是使用這一設計模式。由此創建自定義服務時用到了上述三種方式。

Factory

factory方式創建的服務，作用就是返回一個有屬性有方法的對象。

//通過工廠模式創建自定義服務
//同樣可以注入依賴，但不能注入$scope作用域對象。
angular.module("MetronicApp").factory("myFactory", ["$resource","UrlConfig",function($resource,UrlConfig) {
    var service = {};//定義一個Object對象"
    service.name = "龍傲天";
    service._getUrl = UrlConfig.url;
    var age;//定義一個私有化的變量
    //對私有屬性寫getter和setter方法
    service.setAge = function(newAge){
        age = newAge;
    }
    service.getAge = function(){
        return age; 
    }
    //原始需求詳情
    service.getUrl = function (id) {
        return $resource(service._getUrl).get({orderId: id});
    };
    return service;//返回這個Object對象
}]);
//創建控制器
angular.module("MetronicApp").controller("myCtrl",["$scope", "myFactory",function($scope, myFactory) {
    $scope.name = myFactory.name;
    myFactory.setAge(20);
    $scope.age =myFactory.getAge();
    myFactory.getUrl(id).$promise.then(function (result) {
      scope.model = result.data;
    });;
}]);

service

在service使用構造函數的方法去用它，在控制器中是以new的方式引入，所以可以調用 service中定義的屬性

//通過工廠模式創建自定義服務
//依賴注入其他模塊
angular.module("MetronicApp").controller("myCtrl",["$scope"",myService",function($scope,myService){  
  $scope.name=myService.name;
  myService.get(id).$promise.then(function (result) {
    $scope.model = result.data;
  });
}])

/*Service是new出來的，所以可以直接調用里面的屬性*/
angular.module("MetronicApp").service("myService",["$resource","UrlConfig",function($resource,UrlConfig){
   this.name = "龍傲天";
   this.url = UrlConfig.url;
   this.get = function (id) {
        return this.$resource(this._getUrl).get({orderId: id});
    };
}])

Provider

如果想在 service 對象啟用之前，先進行模塊范圍的配置，那就應該選擇 provider。
當你使用Provider創建一個自定義服務時，可以通過$get()函數返回內容，唯一可以寫進config配置階段的一種。如果服務，必須要在配置階段執行，那么必須使用provider。

使用Provider的優點就是，你可以在Provider對象傳遞到應用程序的其他部分之前在app.config函數中對其進行修改。

//名字必須符合規范：myProvider（你的Provider服務名字）+Provider
angular.module("MetronicApp").config(function(myProviderProvider){
  myProviderProvider.name = "龍傲天"
})
//使用$get方法關聯對應的config
angular.module("MetronicApp").provider("myProvider",["$resource","UrlConfig",function($resource,UrlConfig){
  this.$get = function(){
    return {
      name : this.name,
      age : 18,
      url : UrlConfig.url ,
      getData : function(id){
        return this.$resource(UrlConfig.url).get({orderId: id});
      }
    }
  } 
}])

angular.module("MetronicApp").controller("myCtrl",["$scope","myProvider",function($scope,myProvider){
  $scope.model = {
    name : myProvider.name,
    age : myProvider.age,
    url : myProvider.url,
  }
  myProvider.getData(id).$promise.then(function (result) {
    $scope.model.data = result.data;
  });
}])

constant和value

使用constant和value方法創建服務，常用于返回一個常量。

angular.module("MetronicApp").constant("$age", {
 age: "18"
});
angular.module("MetronicApp").value("$name", {
  name : "龍傲天"
});
angular.module("MetronicApp").controller("MyController", function($scope, $age, $name){
  $scope.name = $name.name
  $scope.USD = $age.age
})

過濾器中使用自定義服務

angular.module("MetronicApp").service("myService",["UrlConfig",function(UrlConfig){
   this.name = "龍傲天";
   this.url = UrlConfig.url;
   this.getUrl = function (url) {
        var arr=url.split("/");
        arr.push(this.url);
        arr.push(this.name);
        return arr.join("/")
    }
}])
app.filter("myFilter",["myService", function(myService) {
    return function(url) {
        return myService.getUrl(url);
    };
}]);

管理服務的依賴 添加自定義服務依賴項方法

我們在自定義服務時，會依賴對象或服務，有下面三種方式：

(1) 隱式聲明

在參數中直接調用，但這種方式在代碼壓縮時注入的對象可能會失效

angular.module("MetronicApp").service("myService", function($resource,UrlConfigService) {
 //code
})

(2) 調用$inject屬性

function myService($resource,UrlConfigService) {
//code
}
myService.$inject = ["$resource","UrlConfigService"];
angular.module("MetronicApp").service("myService", myService);

(3) 顯式聲明

在創建服務的函數中，添加一個數組，在數組中按順序聲明需要注入的服務或對象名稱，這種方式既高效也不會丟失代碼，推薦使用(在上述實例中我們是用的都是此方法)

angular.module("MetronicApp").service("myService",["$resource","UrlConfig",function($resource,UrlConfig){
   this.name = "龍傲天";
   this.url = UrlConfig.url;
   this.get = function (id) {
        return this.$resource(this._getUrl).get({orderId: id});
    };
}])

在angular的modul（模塊）中注入服務，也可以在定義modul時使用數組作為第二個參數，在此處把服務注入進去，這樣在函數體中使用不一致的服務名稱也是可以的，不過要確保注入的順序是一致的。（這個作為穿插，項目中可以使用定義的服務名稱，也能定義簡化參數名稱）注意此方法只針對顯式聲明有效。

angular.module("MetronicApp").controller("myCtrl",["$scope"",myDemandManageService",function($scope,myService){ 
   //這里的myService就是指myDemandManageService;
  $scope.name=myService.name;
  myService.get(id).$promise.then(function (result) {
    $scope.model = result.data;
  });
}])

嵌套注入服務

在Angular中，有時需要將一個自定義的服務注入到另一個自定義的服務中，形成嵌套注入的形式，通常只需要將被注入的服務作為內置服務，采用顯式聲明的方式注入即可。
// 使用factory定義confirm服務

angular.module("MetronicApp").factory("confirm", ["$window", function ($win) {
   return function (msg) {
     $win.confirm(msg);
  }
}]);
// 將confirm服務顯式的注入到fontWay服務中
angular.module("MetronicApp").service("fontWay", ["$window", "confirm", function ($win, con) {
  return function (t, msg) {
    return (t) ? con(msg) : $win.alert(msg);
  }
}]);
angular.module("MetronicApp").controller("MyCtrl", ["$scope", "fontWay", function ($scope, fontWay) {
  $scope.ask = function (t, msg) {
    fontWay(t, msg);
  }
}])

服務的其他配置

創建好的服務一般比較復雜，如果后期需要修改，往往面臨很高的風險，Angular為服務添加了一些設置項，如裝飾器(decorator)，可以在不修改原代碼的情況下為服務添加其他功能。

服務的裝飾器（decorator）

裝飾器(decorator)是Angular中內置服務$provide所特有的一項設置函數，通過它可以攔截服務在實例化時創建的一些功能，并對原有功能進行優化和替代。

// 使用工廠函數factory定義myService服務

angular.module("MetronicApp").factory("myService", function () {
  return {
    name: "龍傲天",
    age: 18
  }
});
// 使用$provider的裝飾器decorator為服務myService擴展一個title屬性
//關鍵的地方是在于decorator方法的回調函數的參數$delegate,指的是當前的數據(繼承)；項目中可以使用這個來做你想做的事情。
angular.module("MetronicApp").config(function ($provide) {
  $provide.decorator("myService", function ($delegate) {
    $delegate.title = "CDS";
    return $delegate;
  })
});

angular.module("MetronicApp").controller("MyCtrl", function ($scope, myService) {
  $scope.model = myService;
});

服務是Angular的一個難點，大家可以先理解，在項目中參照上述實例做比較。。任重而道遠啊。。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92714.html

angular - 收藏集 - 掘金

摘要：如何在中使用動畫前端掘金本文講一下中動畫應用的部分。與的快速入門指南推薦前端掘金是非常棒的框架，能夠創建功能強大，動態功能的。自發布以來，已經廣泛應用于開發中。如何在 Angular 中使用動畫 - 前端 - 掘金本文講一下Angular中動畫應用的部分。首先，Angular本生不提供動畫機制，需要在項目中加入Angular插件模塊ngAnimate才能完成Angular的動畫機制...

AlexTuan 2019-08-20 17:19 評論0 收藏0
阿拉伯-漢字-數字轉換

摘要：說明本文實現了一個從阿拉伯數字到中文數字，以及從中文數字到阿拉伯數字的轉換算法。源代碼在這里阿拉伯數字轉中文給定一個阿拉伯數字，把它轉變為漢語表示的數字。說明本文實現了一個從阿拉伯數字到中文數字，以及從中文數字到阿拉伯數字的轉換算法。同時用Vuejs和Angularjs同時實現了一遍，對比了一下這兩個框架的優劣。在本例中，Vuejs的方便靈活性完勝Angularjs。源代碼在這里...

王軍 2019-08-02 15:55 評論0 收藏0
MEAN.js 文檔

摘要：感謝使用框架本文檔涵蓋構建應用所需的基礎知識。用于數據校驗的組件及相關文件在此目錄進行管理。除了自定義中間件外，還是用了諸多第三方的中間件，它們是五測試我們使用組件對服務端代碼進行測試。識別當前導航從已有導航中刪除給定標識的導航配置。本文同步至個人博客 MEAN.js 文檔，轉載請注明出處。 Overview 感謝使用 MEAN.js 框架！本文檔涵蓋構建 MEAN 應用所需的基礎...

Hydrogen 2019-06-26 17:37 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前一、團隊組織網站說明騰訊 AlloyTeam 團隊騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

zxhaaa 2019-08-22 16:11 評論0 收藏0

發表評論

登陸后可評論

0條評論

妤鋒シ

男|高級講師

我要關注我要私信

TA的文章

tensorflow架構

閱讀 3027·2023-04-25 18:06
《C語言入門》三子棋C語言實現（詳細版）

閱讀 3272·2021-11-22 09:34
GreenCloudVPS：新加坡機房全線4.4折優惠，1G和10Gbps帶寬，KVM VPS年付$

閱讀 2857·2021-08-12 13:30
前端面試每日3+1——第116天

閱讀 2045·2019-08-30 15:44
第六天移動端Web開發注意事項

閱讀 1660·2019-08-30 13:09
Week3：張士超，你到底把一周的好文章放哪里了

閱讀 1630·2019-08-30 12:45
img的間隙

閱讀 1715·2019-08-29 11:13
面向Web設計和開發的12款Chrome插件

閱讀 3608·2019-08-28 17:51

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

AngularJs功能（七）--服務

服務的裝飾器（decorator）

相關文章

angular - 收藏集 - 掘金

阿拉伯-漢字-數字轉換

MEAN.js 文檔

前端資源分享-只為更好前端

發表評論

0條評論

妤鋒シ

男|高級講師

TA的文章

tensorflow架構

《C語言入門》三子棋C語言實現（詳細版）

GreenCloudVPS：新加坡機房全線4.4折優惠，1G和10Gbps帶寬，KVM VPS年付$

前端面試每日3+1——第116天

第六天移動端Web開發注意事項

Week3：張士超，你到底把一周的好文章放哪里了

img的間隙

面向Web設計和開發的12款Chrome插件

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

AngularJs功能（七）--服務

服務的裝飾器（decorator）

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！