（11）AngularJS 1.X 之自定義服務

2024-04-27 15:17:59

字體：大中小

來源：轉載

供稿：網友

引言通過service方法自定義服務1 使用模塊service方法自定義服務2 使用PRovide服務的service方法自定義服務3 service自定義服務解釋通過factory方法自定義服務1 使用模塊factory方法自定義服務2 使用服務factory方法自定義服務3 解釋factory方法自定義的服務通過provider方法自定義服務1 provider定義簡單服務2 provider定義需要配置的服務3 provider創建的服務需要注意的地方使用供應商修改默認表達式符號1 使用interpolateProvider供應商修改默認表達式服務服務注入代碼壓縮問題

1.引言

在本篇博客中主要介紹一下如何自定義服務，為什么要自定義服務？首先我們應該意識到：在開發的過程中，controller 這一層應該很薄；也就是說，應用里大部分的業務邏輯和持久化數據都應該放在 service里。controller 中就不應該存儲持久化數據，出于內存性能的考慮，controller 只在需要的時候才會初始化，一旦不需要就會被拋棄。因此，每次當你切換或刷新頁面的時候， Angular 會清空當前的 controller。與此同時，service 可以用來永久保存應用的數據，并且這些數據可以在不同的 controller 之間使用。

關于自定義服務有三種方法，三種方法分別為：

provider factoryservice

這三種方法創建自定義服務都有著自己的特點，我們以前說過：服務的類型有兩種，一種是具有供應商的服務，一種是不具備供應商的服務，通過Provider方法創建的服務是具有供應商的，因此我們可以將Provider創建的服務傳入config方法進行配置；而Factory，Service方法創建的服務是不具備供應商概念的，Factory，Service兩個方法創建服務也有細微的區別，接下來我們分別使用這三種方法創建自定義服務。

2.通過`service`方法自定義服務

service方法定義的服務是用new關鍵字實例化的。因此，我們可以直接給this添加屬性，然后服務返回this。我們也可以將自定義的服務注入到我們的控制器中。使用service方法自定義服務也有兩種方式，一種是通過模塊的service方法自定義服務，一種是通過$provide服務自定義服務。接下來我們就來看一下這兩種方法。

重點說明service自定義服務是new一個函數對象（一定是對象）

2.1 使用模塊`service`方法自定義服務

自定義服務，服務名稱為$myService var app = angular.module('myApp',[]); app.service("$myService",function(){ var _name="wpx"; this.getName=function(){ return _name; } })在控制區中注入我們的服務 app.controller("firstController", function ($scope,$myService) { $scope.name=$myService.getName() })html片段<div ng-controller="firstController">{{name}}</div>運行結果

這里寫圖片描述

2.2 使用`$provide`服務的`service`方法自定義服務

自定義我們的服務：$myService var app = angular.module('myApp',[], function ($provide) { $provide.service("$myService", function () { var _name="wpx"; this.getName= function () { return _name; } }) });將服務注入到控制器中 app.controller("firstController", function ($scope,$myService) { $scope.name=$myService.getName() })html 片段 <div ng-controller="firstController">{{name}}</div>運行結果

這里寫圖片描述

2.3 `service`自定義服務解釋

首先我們注意到：service自定義的服務是一個函數。service自定義的服務函數是可以注入其他服務的，比如我注入$http服務，可以這么寫//注入其他服務app.service("$myService",function($http){ })service自定義的服務是new出來的，也就是說改服務的實現和函數類用法一樣，比如： function myClass() { } var a=new myClass();

3.通過`factory`方法自定義服務

使用factory方法自定義服務也是有兩種方式，通過模塊定義，通過$provide服務的factory方法定義服務，factory創建的服務和service方法定義的服務是有區別的，factory 方法直接把一個函數當成一個對象的$get方法，因此factory 創建的服務 是可以直接返回字符串的。（service自定義的服務就不可以直接返回字符串），接下來我們就使用factory 方法自定義我們的服務

重點說明factory自定義服務是是調用函數 ，然后返回一個對象，或者是數據

3.1 使用模塊`factory`方法自定義服務

自定義服務,服務名稱為：$myFactory1（返回字符串） var app = angular.module('myApp',[]); app.factory("$myFactory1",function(){ return "aaaa"; })自定義服務,服務名稱為：$myFactory2（返回對象）app.factory("$myFactory2",function(){ var _name; function getName(){ return _name; } function setName(name) { _name=name; } return { getName:getName, setName:setName } })將自定義服務注入到控制器app.controller("firstController", function ($scope,$myFactory1,$myFactory2) { $scope.name=$myFactory1 $myFactory2.setName("wpx");})app.controller("secondController", function ($scope,$myFactory2) { $scope.name=$myFactory2.getName() })html片段 <div ng-controller="firstController">{{name}}</div> <div ng-controller="secondController">{{name}}</div>運行結果

這里寫圖片描述

3.2 使用服務`factory`方法自定義服務

話不多少，直接上代碼

var app = angular.module('myApp',[], function ($provide) { $provide.factory("factoryName",function () { //服務代碼 }) });

3.3 解釋`factory`方法自定義的服務

第一點：factory的服務是當作方法來調用第二點：factory自定義服務也可以注入其他服務，比如：$httpapp.factory("$myFactory1",function($http){ //代碼實現 //記得return })第三點：服務是單例的，通過實例我們知道，服務可以在多個控制器之間傳遞數據（在控制器一中給服務添加數據，然后在控制器2中讀取數據）

4.通過`provider`方法自定義服務

在前面我們說過provider方法定義的服務最大的區別在于具有供應商的概念，具有了供應商我們就可以通過config方法配置一些全局的屬性。首先我們先使用provider定義一個簡單的服務。

4.1 `provider`定義簡單服務

使用模塊的provider定義一個服務（叫做mySelf） var app = angular.module('myApp',[]); app.provider("$mySelf", function () { this.$get=function(){ return { message:"$mySelf" } } })使用$provide定義一個服務（叫做mySelf） var app = angular.module('myApp',[], function ($provide) { $provide.provider("$mySelf", function () { this.$get=function(){ return { message:"$mySelf" } } }) });將自定義服務注入到控制器app.controller("firstController", function ($scope,$mySelf) { $scope.message=$mySelf.message })html片段 <div ng-controller="firstController">{{message}}</div>運行結果

這里寫圖片描述

4.2 `provider`定義需要配置的服務

剛剛我們說過：通過provider定義的服務會生成供應商，有供應商的服務可以通過模塊的config方法進行配置，接下來我們來使用一下供應商。

創建一個自定義的服務（該服務需要配置一個attr屬性） var app = angular.module('myApp',[]); app.provider("$mySelf", function () { //需要配置的屬性 this.attr=""; this.$get=function(){ var that=this; var service={}; var _attr="$mySelf.attr"; service.getAttr=function(){ return _attr+"-----"+that.attr; } return service; } })通過供應商配置屬性（在服務的后面添加Provider就是供應商）app.config(function ($mySelfProvider) { $mySelfProvider.attr="config.attr"; })將服務注入到控制器中app.controller("firstController", function ($scope,$mySelf) { $scope.attr=$mySelf.getAttr(); })html片段<div ng-controller="firstController">{{attr}}</div>運行結果

這里寫圖片描述

4.3 `provider`創建的服務需要注意的地方

使用provider方法創建服務具有供應商我們可以通過config配置供應商的屬性使用provider自定義服務是如何創建的？首先我們看一下服務的定義//首先我們new了一下，服務函數然后使用this.$get方法，將得到的結果注入到了控制器中，也就是說provider方法創建的服務其實是service方法和factory方法的一個組合使用。app.provider("$mySelf", function () { //需要配置的屬性 this.attr=""; this.$get=function(){ var that=this; var service={}; var _attr="$mySelf.attr"; service.getAttr=function(){ return _attr+"-----"+that.attr; } return service; } })*

5 使用供應商修改默認表達式符號

前面我們說了，部分服務是具有供應商的，既然AngularJS提供了一些默認的服務，那么就應該有一些默認的供應商，這里我們就使用一下默認的供應商修改一下默認的表達式，默認表達式是{{表達式}}，現在我們將其修改為#表達式#。

5.1 使用`$interpolateProvider`供應商修改默認表達式服務

使用config方法設置供應商 var app = angular.module('myApp',[]); app.config(function ($interpolateProvider) { $interpolateProvider.startSymbol("#"); $interpolateProvider.endSymbol("#"); })使用新的表達數輸出數據//控制器app.controller("firstController", function ($scope) { $scope.attr="hello world";})//html片段<div ng-controller="firstController">#attr#</div>運行結果

這里寫圖片描述

6 服務注入，代碼壓縮問題

在使用服務的時候，不可避免的就會涉及到依賴注入的問題，如果服務的名稱過長，那么我們多次使用服務代碼的體積就會變得越來越大，所以我們在注入服務的時候可以給服務：起別名。利用非常短的別名來代替服務，接下來我們看一看如何注入我們的服務，以$scope服務為例：

app.controller("firstController",["$scope","$rootScope",function ($s,$rs) { $s.name="wpx"; $rs.age="20"; }])html代碼片段<div ng-controller="firstController">{{name}}---{{age}}</div>運行結果

這里寫圖片描述