AngularJS 의 사용자 정의 서비스 상세 설명(factory,service,provider)

머리말
1,3 가지 사용자 정의 서 비 스 를 만 드 는 방식.

Factory

Service

Provider

2.AngularJS 는 백 스테이지 직원 들 이 일 을 하면 서 발명 한 것 으로 그 는 백 스테이지 에 이미 존재 하 는 분 층 사상 을 주로 응용 했다.그래서 우 리 는 하 층 의 역할 을 알 아야 한다.만약 당신 이 전단 인원 이 층 을 나 누 는 것 이 무엇 인지 모른다 면 백 스테이지 의 작은 동료 에 게 물 어 보 는 것 이 좋 겠 다.
dao 층:바로 Model 층 입 니 다.배경 에 있 을 때 이 층 의 역할 은 데이터 베이스 와 상호작용 하 는 데 이 터 를 쓰 면 angularJS 에 주로 ajax 를 씁 니 다.
서비스 층:논리 코드 를 주로 검사 하지만 angularJS 에서 도 데이터(데이터 용기 역할)를 지속 적 으로 사용 하여 서로 다른 controller 를 사용 할 수 있 습 니 다.
controller 층:즉 컨트롤 층 입 니 다.angularJS 에 컨트롤 러 를 쓰 는 것 입 니 다.컨트롤 러 에는 불필요 한 논 리 를 쓰 지 말고 service 층 에 쓰 도록 하 세 요.
그래서 사용자 정의 서 비 스 를 만 드 는 세 가지 방식 이 있 습 니 다.
factory
factory 방식 으로 만 든 서 비 스 는 속성 이 있 고 방법 이 있 는 대상 을 되 돌려 주 는 역할 을 합 니 다.var f=my Factory();


<!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>
  //    
  var app = angular.module('myApp', []);

  //             
  app.factory('myFactory', function() {
    var service = {};//    Object  '
    service.name = "  ";
    var age;//          
    //      getter setter  
    service.setAge = function(newAge){
      age = newAge;
    }
    service.getAge = function(){
      return age; 
    }
    return service;//    Object  
  });
  //     
  app.controller('myCtrl', function($scope, myFactory) {
    myFactory.setAge(20);
    $scope.r =myFactory.getAge();
    alert(myFactory.name);
  });
</script>
</body>
</html>

사용자 정의 서비스 에 서비스 예 시 를 주입 하지만$scope 역할 영역 대상 을 주입 할 수 없습니다.


<script>
  var app = angular.module('myApp', []);
  app.factory('myFactory', function($http,$q) {
    var service = {};
    service.name = "  ";
    //    
    service.getData = function(){
      var d = $q.defer();
      $http.get("url")//       。
      .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);//      
    },function(data){
      alert(data)//      
    });;
  });
</script>

service
service 방식 으로 사용자 정의 서 비 스 를 만 듭 니 다.new 에 해당 하 는 대상:var s=new my Service();속성 과 방법 을 this 에 추가 해야만 controller 에서 호출 할 수 있 습 니 다.


<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);// 16  
    }
    this.getData = function(){
      var d = $q.defer();
      $http.get("ursl")//       。
        .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);//      
    },function(data){
      alert(data)//      
    });
  });
</script>

3.provder
proveder 만.config()함 수 를 전달 할 수 있 는 service 입 니 다.서비스 대상 이 활성화 되 기 전에 모듈 범위 설정 을 하려 면 provider 를 선택해 야 합 니 다.주의해 야 할 것 은 config 함수 에 provider 를 주입 할 때 이름 은 provider Name+Provider 입 니 다.
Provider 를 사용 하 는 장점 은 Provider 대상 이 프로그램의 다른 부분 에 전달 되 기 전에 app.config 함수 에서 수정 할 수 있다 는 것 입 니 다.
Provider 를 사용 하여 service 를 만 들 때 컨트롤 러 에 접근 할 수 있 는 유일한 속성 과 방법 은$get()함수 로 내용 을 되 돌려 줍 니 다.


<body>
<div ng-app="myApp" ng-controller="myCtrl">
</div>

<script>
  var app = angular.module('myApp', []);

  //      ：   provider ，     ：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")//       。
            .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.필터 에 사용자 정의 서비스 주입


<body>
<div ng-app="myApp">
           :
  <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>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Angular에서 타사 스크립트 및 CSS 작업

Angular 방식으로 회로도가 있는 외부 라이브러리를 추가하거나 모듈을 가져옵니다. Angular.json은 Angular 프로젝트의 모든 설정 파일이며 표준 JavaScript 및 CSS 파일과 함께 타사 라이브...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

AngularJS 의 사용자 정의 서비스 상세 설명(factory,service,provider)

좋은 웹페이지 즐겨찾기