【AngularJS中的自定義服務service VS factory VS provider】---它們的區別，你知道麼？

時間 2019-12-13

標籤 angularjs 自定義服務 service factory provider 它們區別知道欄目 AngularJS 简体版

原文原文鏈接

在介紹AngularJS自定義服務以前，咱們先來了解一下AngularJS~前端

學過HTML的人都知道，HTML是一門很好的僞靜態文本展現設計的聲明式語言，可是，要構建WEB應用的話它就顯得乏力了。angularjs

而AngularJS是爲了克服HTML在構建應用上的不足而設計的。服務器

AngularJS是一款優秀的前端JS框架，已經被用於Google的多款產品當中。它有着諸多特性，最爲核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等……app

AngularJS經過新的屬性和表達式擴展了HTML；能夠構建一個單一頁面應用程序；並且學習起來很是簡單。框架

有了以上的瞭解，咱們來看一下AngularJS中的自定義服務。ide

angularjs中可經過三種方式自定義服務，模塊化

分別爲$service，$factory，$provider。函數

下面我就給你們分別介紹一下三種AngularJS自定義服務的區別：學習

1、服務servicethis

第一次被注入時實例化，只實例化一次，整個應用的生命週期中是個單例模式，能夠用來在controller之間傳遞數據；

使用new關鍵字實例化，因此直接使用this定義service，若是你不知道緣由，就看看js中的this。
例如：

1 .service('myService', ['', function() {
2 this.getName = function() {
3 return 'CooMark';
4 }
5 }])

內置服務：
>>> 使用內置服務,必須在Controller中經過函數的參數注入進來！！！！！

$location：返回當前頁面的 URL地址。
$http:向服務器發送請求，應用響應服務器傳送過來的數據,相似於Ajax
$timeout：至關於setTimeout();
$interval：至關於setInterval();

（參考代碼）body部分：

1 <body ng-app="app" ng-controller="ctrl">
2     <p>[功能]<br />
3        {{gongneng}}
4     </p>
5     <p>255轉爲16進製爲:{{num}}</p>
6 </body>

（參考代碼）JS部分：

先導入JS文件angular.js！！！

1 <script src="libs/angular.js"></script>

 2     <script>
 3         angular.module("app",[])
 4         .controller("ctrl",function($scope,$location,$timeout,$interval,$hexafy){
 5             
 6 //          $scope.local = $location.$$absUrl;
 7 //          $scope.local = $location.absUrl();
 8 
 9             $scope.local = $location.$$host;
10             
11             $timeout(function () {
12                 $scope.myHeader = "How are you today?";
13             }, 2000);
14             $scope.num = 0;
15             
16             $interval(function(){
17                 $scope.num ++;
18             },1000);
19             
20             $scope.gongneng = $hexafy.$$gongneng;
21             $scope.hexafy = $hexafy;
22         })
23         
24         /*自定義服務*/
25         .service('$hexafy', function() {
26             this.$$gongneng = "將轉入的數字，轉爲16進制";
27             this.myFunc = function (x) {
28                 return x.toString(16);
29             }
30         })
31         
32         /*自定義過濾器*/
33         .filter("filt",function(){
34             return function(x){
35                 return x.toString(16);
36             }
37         })
38         /*在過濾器中，調用自定義服務*/
39         .filter("filt1",function($hexafy){
40             return function(x){
41                 return $hexafy.myFunc(x);
42             }
43         })
44         
45         
46     </script>

2、服務factory

factory是一個函數用於返回值，一般咱們使用factory函數來計算或返回值。

factory使用上，與service差距不大。

（參考代碼） body部分參考服務Service，JS代碼以下：

先導入JS文件angular.js！！！

 1 <script src="libs/angular.js"></script>
 2     <script>
 3         angular.module("app",[])
 4         .config()
 5         .controller("ctrl",function($scope,hexafy){
 6             $scope.gongneng = hexafy.gongneng;
 7             $scope.num = hexafy.myFunc(255);
 8         })
 9         .factory('hexafy',function(){
10             var obj = {
11                 gongneng : "將轉入的數字，轉爲16進制",
12                 myFunc:function(x){
13                     return x.toString(16);
14                 }
15             };
16             return obj;
17         })
18     
19 </script>

3、服務provider

一、在AngularJS中，Service，factory都是基於provider實現的。
二、在provider中，經過$get()方法提供了factory的寫法，用於返回 value/service/factory。；
三、provider是三種自定義服務中，惟一能夠寫進config配置階段的一種。

若是服務，必需要在配置階段執行，那麼必須使用provider。不然，通常使用Service或factory。

4、擴展：angularjs的依賴注入和自定義服務有什麼區別

AngularJS其實是在調用前面出現的代碼（就是$provide.provider的版本）。

從字面上來講，angularjs的依賴注入和自定義服務基本上沒有差異。

value方法也同樣，若是咱們須要從$get函數（也就是咱們的factory函數）返回的值永遠相同的話，

咱們可使用value方法來編寫。

好了~~~今天的博客內容就先分享到這裏，歡迎留言~~~

你們一塊兒加油哦！一塊兒學習，一塊兒進步！