快捷導(dǎo)航

AngularJS之自定義服務(wù)詳解(factory、service、provider)

更新時(shí)間：2017年04月14日 09:03:16 作者：zcl_love_wx

本篇文章主要介紹了AngularJS之自定義服務(wù)詳解(factory、service、provider)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

前言

1、3種創(chuàng)建自定義服務(wù)的方式。

Factory
Service
Provider

2、大家應(yīng)該知道，AngularJS是后臺(tái)人員在工作之余發(fā)明的，他主要應(yīng)用了后臺(tái)早就存在的分層思想。所以我們得了解下分層的作用，如果你是前端人員不了解什么是分層，那么你最好問(wèn)問(wèn)你后臺(tái)的小伙伴。

dao層：就是Model層，在后臺(tái)時(shí)，這一層的作用，就要是寫與數(shù)據(jù)庫(kù)交互數(shù)據(jù)的一層，在angularJS里就主要是寫ajax的。

service層：主查寫邏輯代碼的，但在angularJS里也可以持久化數(shù)據(jù)（充當(dāng)數(shù)據(jù)容器），以供不同的controller高用。

controller層：即控制層，在angularJS里就是寫控制器的。控制器里盡量不要寫那些不必要的邏輯，盡量寫在service層里。
所以，就有了創(chuàng)建自定義服務(wù)的三種方式。

factory

factory方式創(chuàng)建的服務(wù)，作用就是返回一個(gè)有屬性有方法的對(duì)象。相當(dāng)于：var f = myFactory();

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
  <p>{{r}}</p>
</div>

<script>
  //創(chuàng)建模型
  var app = angular.module('myApp', []);

  //通過(guò)工廠模式創(chuàng)建自定義服務(wù)
  app.factory('myFactory', function() {
    var service = {};//定義一個(gè)Object對(duì)象'
    service.name = "張三";
    var age;//定義一個(gè)私有化的變量
    //對(duì)私有屬性寫getter和setter方法
    service.setAge = function(newAge){
      age = newAge;
    }
    service.getAge = function(){
      return age; 
    }
    return service;//返回這個(gè)Object對(duì)象
  });
  //創(chuàng)建控制器
  app.controller('myCtrl', function($scope, myFactory) {
    myFactory.setAge(20);
    $scope.r =myFactory.getAge();
    alert(myFactory.name);
  });
</script>
</body>
</html>

在自定義服務(wù)里注入服務(wù)示例，但不能注入$scope作用域?qū)ο蟆?/p>

<script>
  var app = angular.module('myApp', []);
  app.factory('myFactory', function($http,$q) {
    var service = {};
    service.name = "張三";
    //請(qǐng)求數(shù)據(jù)
    service.getData = function(){
      var d = $q.defer();
      $http.get("url")//讀取數(shù)據(jù)的函數(shù)。
      .success(function(response) {
        d.resolve(response);
      })
      .error(function(){
        d.reject("error");
      });
      return d.promise;
    }    
    return service;
  });
  app.controller('myCtrl', function($scope, myFactory) {
    //alert(myFactory.name);
    myFactory.getData().then(function(data){
      console.log(data);//正確時(shí)走這兒
    },function(data){
      alert(data)//錯(cuò)誤時(shí)走這兒
    });;
  });
</script>

service

通過(guò)service方式創(chuàng)建自定義服務(wù)，相當(dāng)于new的一個(gè)對(duì)象：var s = new myService();，只要把屬性和方法添加到this上才可以在controller里調(diào)用。

<div ng-app="myApp" ng-controller="myCtrl">
  <h1>{{r}}</h1>
</div>
<script>
  var app = angular.module('myApp', []);

  app.service('myService', function($http,$q) {
    this.name = "service";
    this.myFunc = function (x) {
      return x.toString(16);//轉(zhuǎn)16進(jìn)制
    }
    this.getData = function(){
      var d = $q.defer();
      $http.get("ursl")//讀取數(shù)據(jù)的函數(shù)。
        .success(function(response) {
        d.resolve(response);
      })
        .error(function(){
        alert(0)
        d.reject("error");
      });
      return d.promise;
    }
  });
  app.controller('myCtrl', function($scope, myService) {
    $scope.r = myService.myFunc(255);
    myService.getData().then(function(data){
      console.log(data);//正確時(shí)走這兒
    },function(data){
      alert(data)//錯(cuò)誤時(shí)走這兒
    });
  });
</script>

3.provder

只有provder是能傳 .config() 函數(shù)的 service。如果想在 service 對(duì)象啟用之前，先進(jìn)行模塊范圍的配置，那就應(yīng)該選擇 provider。需要注意的是：在config函數(shù)里注入provider時(shí)，名字應(yīng)該是：providerName+Provider.
使用Provider的優(yōu)點(diǎn)就是，你可以在Provider對(duì)象傳遞到應(yīng)用程序的其他部分之前在app.config函數(shù)中對(duì)其進(jìn)行修改。

當(dāng)你使用Provider創(chuàng)建一個(gè)service時(shí)，唯一的可以在你的控制器中訪問(wèn)的屬性和方法是通過(guò)$get()函數(shù)返回內(nèi)容。

<body>
<div ng-app="myApp" ng-controller="myCtrl">
</div>

<script>
  var app = angular.module('myApp', []);

  //需要注意的是：在注入provider時(shí)，名字應(yīng)該是：providerName+Provider  
  app.config(function(myProviderProvider){
    myProviderProvider.setName("大圣");    
  });
  app.provider('myProvider', function() {
    var name="";
    var test={"a":1,"b":2};
    //注意的是，setter方法必須是(set+變量首字母大寫)格式
    this.setName = function(newName){
      name = newName 
    }

    this.$get =function($http,$q){
      return {
        getData : function(){
          var d = $q.defer();
          $http.get("url")//讀取數(shù)據(jù)的函數(shù)。
            .success(function(response) {
              d.resolve(response);
            })
            .error(function(){
              d.reject("error");
            });
          return d.promise;
        },
        "lastName":name,
        "test":test
      }  
    }

  });
  app.controller('myCtrl', function($scope,myProvider) {
    alert(myProvider.lastName);
    alert(myProvider.test.a)
    myProvider.getData().then(function(data){
      //alert(data)
    },function(data){
      //alert(data)
    });
  });
</script>
</body>

4.在過(guò)濾器中注入自定義服務(wù)

<body>
<div ng-app="myApp">
  在過(guò)濾器中使用服務(wù):
  <h1>{{255 | myFormat}}</h1>
</div>

<script>
  var app = angular.module('myApp', []);
  app.service('hexafy', function() {
    this.myFunc = function (x) {
      return x.toString(16);
    }
  });
  app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
      return hexafy.myFunc(x);
    };
  }]);
</script>
</body>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: