>  기사  >  웹 프론트엔드  >  AngularJS의 공급자 간의 차이점에 대해 이야기해 보세요.

AngularJS의 공급자 간의 차이점에 대해 이야기해 보세요.

青灯夜游
青灯夜游앞으로
2020-08-26 10:18:491910검색

AngularJS의 공급자 간의 차이점에 대해 이야기해 보세요.

관련 튜토리얼 권장사항: "angular Tutorial"

Provider란 무엇입니까?

angularjs공급자에 대한 문서 정의:

provider는 $get() 메소드 객체. 인젝터는 <code>$get 메서드를 호출하여 새 서비스 인스턴스를 생성합니다. 공급자에는 공급자를 구성하는 데 사용할 수 있는 몇 가지 다른 방법도 있습니다. $get()方法的对象。injector调用$get方法创建一个新的service的实例。provider还有一些其他的方法,可以用来配置provider。

AngularJS使用$provide注册新的providers。providers基本上都会创建一个新实例, 但每个provider只创建一次。$provide

AngularJS는 $provide를 사용하여 새로운 공급자를 등록합니다. 공급자는 기본적으로 새 인스턴스를 생성하지만 각 공급자는 한 번만 생성됩니다. $provide는 사용자 정의 공급자를 생성하는 6가지 방법을 제공하며 간단한 코드 예제를 통해 각각 설명하겠습니다.

6가지 방법은 다음과 같습니다.
  • constant
  • value
  • service
  • factory
  • decorator
  • pro vider

Constant

상수는 어디에나 주입될 수 있습니다. 상수는 데코레이터가 가로챌 수 없습니다. 즉, 상수 값은 절대 변경할 수 없습니다.

var app = angular.module(&#39;app&#39;, []); 
app.config(function ($provide) {
  $provide.constant(&#39;movieTitle&#39;, &#39;The Matrix&#39;);
}); 

app.controller(&#39;ctrl&#39;, function (movieTitle) {
  expect(movieTitle).toEqual(&#39;The Matrix&#39;);
});

AngularJS는 상수를 생성하는 더 쉬운 방법을 제공합니다. 위의 3~5줄의 코드를 다음과 같이 다시 작성할 수 있습니다.

app.constant(&#39;movieTitle&#39;, &#39;The Matrix&#39;);
Value


value는 삽입할 수 있는 간단한 값이며 문자열일 수 있습니다. 숫자든, 함수든.

상수와의 차이점은 값을 구성에 주입할 수 없지만 데코레이터가 값을 가로챌 수 있다는 것입니다.

var app = angular.module(&#39;app&#39;, []); 
app.config(function ($provide) {
 $provide.value(&#39;movieTitle&#39;, &#39;The Matrix&#39;)
});

app.controller(&#39;ctrl&#39;, function (movieTitle) {
 expect(movieTitle).toEqual(&#39;The Matrix&#39;);
})

가치를 창출하는 쉬운 방법:

app.value(&#39;movieTitle&#39;, &#39;The Matrix&#39;);
Service

service는 주입할 수 있는 생성자입니다. 원하는 경우 함수에 필요한 종속성을 지정할 수 있습니다.

서비스는 싱글톤이며 한 번만 생성됩니다. 서비스는 데이터 공유 등 컨트롤러 간에 데이터를 전송하는 좋은 방법입니다.

var app = angular.module(&#39;app&#39; ,\[\]); 
app.config(function ($provide) {
 $provide.service(&#39;movie&#39;, function () {
   this.title = &#39;The Matrix&#39;;
 });
});

app.controller(&#39;ctrl&#39;, function (movie) {
 expect(movie.title).toEqual(&#39;The Matrix&#39;);
});

쉬운 서비스 생성 방법:

app.service(&#39;movie&#39;, function () {
 this.title = &#39;The Matrix&#39;;
});
Factory

factory는 주입 가능한 함수입니다.

서비스와 동일: 팩토리도 싱글톤이며 이 함수에서 종속성을 지정할 수도 있습니다.

차이점은: 팩토리는 일반 함수를 주입하고 AngularJ는 이 함수를 호출하는 반면 서비스는 생성자를 주입한다는 것입니다.


service는 new를 호출하여 새 객체를 생성하는 생성자입니다. 팩토리를 사용하면 함수가 원하는 것을 반환하도록 할 수 있습니다.

factory는 $get 메소드만 있는 공급자임을 알 수 있습니다.

var app = angular.module(&#39;app&#39;, []); 
app.config(function ($provide) {
 $provide.factory(&#39;movie&#39;, function () {
   return {
     title: &#39;The Matrix&#39;;
   }
 });
}); 

app.controller(&#39;ctrl&#39;, function (movie) {
 expect(movie.title).toEqual(&#39;The Matrix&#39;);
});

팩토리를 만드는 간단한 방법:

app.factory(&#39;movie&#39;, function () {
 return {
   title: &#39;The Matrix&#39;;
 }
});
Decorator

decorator는 다른 공급자를 수정하거나 캡슐화할 수 있지만 상수는 장식할 수 없습니다.

var app = angular.module('app', []); 
app.value(&#39;movieTitle&#39;, &#39;The Matrix&#39;); 
app.config(function ($provide) {
 $provide.decorator('movieTitle', function ($delegate) {
   return $delegate + ' - starring Keanu Reeves';
 });
});

app.controller('myController', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves');
});
Provider

provider는 모든 공급자 중에서 가장 복잡하며 복잡한 생성 기능과 구성 옵션을 가질 수 있습니다.

provider는 실제로 구성 가능한 공장입니다. 공급자는 개체나 생성자를 허용합니다.

var app = angular.module(&#39;app&#39;, []); 
app.provider(&#39;movie&#39;, function () {
 var version;
 return {
   setVersion: function (value) {
     version = value;
   },
   $get: function () {
     return {
       title: &#39;The Matrix&#39; + &#39; &#39; + version
     }
   }
 }
});

app.config(function (movieProvider) {
 movieProvider.setVersion(&#39;Reloaded&#39;);
});

app.controller(&#39;ctrl&#39;, function (movie) {
 expect(movie.title).toEqual(&#39;The Matrix Reloaded&#39;);
});
요약

모든 공급자는 한 번만 인스턴스화되므로 모두 싱글톤입니다.

상수를 제외하고 다른 공급자를 꾸밀 수 있습니다.

상수는 어디에나 주입할 수 있는 값이며, 그 값은 변경할 수 없습니다.

value는 단순 주입 가능한 값입니다.

service는 주입 가능한 생성자입니다.

factory는 주입 가능한 함수입니다.

Decorator는 상수를 제외한 다른 공급자를 수정하거나 캡슐화할 수 있습니다.

provider는 구성 가능한 공장입니다.

영어 원본 주소: https://xebia.com/blog/differences-between-providers-in-angularjs/

관련 추천: 프로그래밍 교육

🎜

위 내용은 AngularJS의 공급자 간의 차이점에 대해 이야기해 보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제