AngularJS의 공급자
AngularJS의 공급자와 AngularJS의 provider, factory 및 service의 차이점을 소개합니다.
AngularJS의 공급자
공급자는 일종의 서비스입니다. provider() 함수를 사용하면 $get 메서드가 포함된 구성 가능한 서비스를 만들 수 있습니다.
API를 사용하는 웹 애플리케이션을 만드는 것을 상상해 봅시다. 애플리케이션에서 API의 데이터에 액세스하기 위해 API 키를 설정해야 하는 경우 module 구성에서 이를 설정하고 $provide 서비스를 사용하여 공급자에게 입력을 전달할 수 있습니다.
컨트롤러가 공급자를 호출할 때 값을 반환하는 공급자가 있는 모듈을 만들어 보겠습니다. 먼저 script 태그를 사용하여 AngularJS 라이브러리와 app.js 파일을 추가합니다.
# AngularJS
<head>
<script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script src="app.js"></script>
</head>
ng-app을 사용하여 AngularJS 애플리케이션을 정의하고 ng-controller를 사용하여 컨트롤러를 정의합니다.
# AngularJS
<body ng-app="myApp">
<div ng-controller="myController"></div>
</body>
app.js에서 모듈을 생성합니다.
# AngularJS
var module = angular.module("myApp", []);
우리는 provider를 사용할 것입니다. 공급자는 이름에서 알 수 있듯이 값을 제공하므로 이 경우 문자열 값을 제공합니다. 공급자에는 $get이라는 하나의 메서드가 정의되어 있습니다.
공급자는 여러 메서드를 가질 수 있지만 Angular 호출은 $get입니다. 따라서 문자열 값을 반환하는 $get 메서드에 함수를 할당합니다.
# AngularJS
module.provider("myProvider", function(){
this.$get = function(){
return "Value from Provider";
};
});
컨트롤러에 공급자를 삽입하고 공급자의 값 console.log()를 삽입합니다.
# AngularJS
module.controller("myController", function(myProvider){
console.log(myProvider);
});
출력:
위의 예에서 볼 수 있듯이 콘솔의 공급자로부터 정확한 값을 얻었습니다. 그래서 효과가 있었고 공급자를 사용하여 값을 반환하고 메서드에 주입할 수 있습니다.
이것은 모든 공급자가 모두 동일하고 서비스 및 공장도 동일하다는 사실에 유의하는 것이 중요합니다. 그러나 공급자를 몇 번이나 주입하더라도 값은 한 번만 실행됩니다.
아래와 같이 다른 컨트롤러를 만들어 테스트할 수 있습니다.
# AngularJS
module.controller("myController", function(myProvider){
console.log("First Controller:" + myProvider);
});
module.controller("myController2", function(myProvider){
console.log("Second Controller:" + myProvider);
});
공급자의 $get 메서드 내에서 console.log()를 사용하여 공급자 내부의 값을 기록합니다. 따라서 이 공급자가 실행될 때마다 동일한 값을 기록합니다.
이런 식으로 공급자가 한 번 또는 두 번 실행되는지 확인할 수 있습니다.
# AngularJS
module.provider("myProvider", function(){
this.$get = function(){
console.log("Provider Executed!")
return "Value from Provider";
};
});
index.html의 두 번째 컨트롤러에 div를 추가해 보겠습니다.
# AngularJS
<div ng-controller="myController"></div>
<div ng-controller="myController2"></div>
출력:
위의 예는 공급자가 한 번만 실행되지만 공급자의 값이 두 컨트롤러에 모두 주입되는 것을 보여줍니다. 컨트롤러에서 두 개의 출력 메시지를 받았습니다.
Angular는 공급자가 주입될 때 이를 실행하고 $get 및 저장을 호출하고 해당 값을 기억한다는 점에 주목하는 것이 중요합니다. 이후에 제공자가 주입될 때마다 처음 추출한 값을 반환합니다.
AngularJS의 Provider와 Factory의 차이점
우리가 만든 공급자와 동일한 기능을 가진 factory를 만들어 보겠습니다. 이제 공급자를 복사하여 factory로 변경할 것입니다.
팩토리에는 $get 메소드가 없으므로 팩토리에서 직접 함수를 호출하고 값을 반환합니다. 그것이 공급자와 다른 유일한 부분입니다.
우리는 공장을 두 컨트롤러에 모두 주입할 것입니다. app.js의 코드는 다음과 같습니다.
# AngularJS
var module = angular.module("myApp", []);
module.factory("myFactory", function(){
console.log("Factory Executed!")
return "Value from Factory";
});
module.controller("myController", function(myFactory){
console.log("First Controller:" + myFactory);
});
module.controller("myController2", function(myFactory){
console.log("Second Controller:" + myFactory);
});
출력:
위의 예에서 볼 수 있듯이 동일한 결과를 얻습니다. 공급자와 공장 모두 동일한 작업을 수행하지만 factory는 조금 더 적은 코드로 이를 수행할 수 있습니다.
AngularJS의 공급자와 서비스의 차이점 - 2020 - 다른 사람
우리가 만든 공급자와 동일한 기능을 가진 서비스를 만들어 보겠습니다. 이제 공급자를 복사하여 서비스로 변경하겠습니다.
서비스에는 $get 메서드가 없으므로 서비스에서 팩토리와 동일한 함수를 직접 호출하고 값을 반환합니다. 그것이 공급자와 다른 유일한 부분입니다.
우리는 우리의 서비스를 두 컨트롤러에 주입할 것입니다. app.js의 코드는 아래와 같습니다.
# AngularJS
var module = angular.module("myApp", []);
module.service("myService", function(){
console.log("Service Executed!");
this.getValue = function(){
return "Object from Service";
}
});
module.controller("myController", function(myService){
console.log("First Controller:" + myService.getValue());
});
module.controller("myController2", function(myService){
console.log("Second Controller:" + myService.getValue());
});
출력:
위의 예에서 볼 수 있듯이 동일한 결과를 얻습니다. 공급자와 서비스 모두 동일한 작업을 수행하지만 서비스는 문자열 대신 개체를 반환합니다.
요점은 provider, factory, service를 언제 사용해야 하는지입니다. 객체 대신 값을 반환하려면 서비스를 사용할 수 없습니다.
서비스 대신 팩토리를 사용해야 하지만 값 대신 객체를 반환하기 위해 팩토리를 사용할 것입니다. 공급자는 구성 시간을 수행하는 액세스 권한을 제공합니다.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn