AngularJS : 공장 대신 서비스를 사용하는 경우
여기서 조금만 참아주세요.다음과 같은 다른 답변이 있는 것으로 알고 있습니다. 각진:서비스 vs 프로바이더 vs 팩토리
하지만 저는 당신이 언제 공장보다 서비스를 사용할지 아직 알 수 없습니다.
공장에서는 여러 컨트롤러가 호출할 수 있는 '공통' 기능을 작성하기 위해 일반적으로 사용되는 것으로 알고 있습니다.공통 컨트롤러 기능 작성
Angular docs는 서비스보다 팩토리를 선호하는 것 같습니다.그들은 심지어 공장을 사용할 때 "서비스"라고 부르기도 하는데, 이것은 더 혼란스럽다!http://docs.angularjs.org/guide/dev_guide.services.creating_services
그럼 언제 서비스를 이용할 수 있을까요?
서비스만으로 가능하거나 훨씬 쉬운 일이 있을까요?
이면에는 뭔가 다른 점이 있나요?퍼포먼스와 메모리의 차이
여기 예가 있어요.선언하는 방법 말고는 똑같아 보이는데 왜 하나 대 다른 하나를 해야 하는지 모르겠어요.http://jsfiddle.net/uEpkE/
업데이트: Thomas의 답변으로 볼 때 서비스는 단순한 로직을 위한 것이며, 프라이빗 메서드를 사용하여 보다 복잡한 로직을 위한 공장임을 알 수 있는 것으로 보여 아래 바이올린 코드를 업데이트했더니 둘 다 프라이빗 기능을 지원할 수 있는 것 같습니다.
myApp.factory('fooFactory', function() {
var fooVar;
var addHi = function(foo){ fooVar = 'Hi '+foo; }
return {
setFoobar: function(foo){
addHi(foo);
},
getFoobar:function(){
return fooVar;
}
};
});
myApp.service('fooService', function() {
var fooVar;
var addHi = function(foo){ fooVar = 'Hi '+foo;}
this.setFoobar = function(foo){
addHi(foo);
}
this.getFoobar = function(){
return fooVar;
}
});
function MyCtrl($scope, fooService, fooFactory) {
fooFactory.setFoobar("fooFactory");
fooService.setFoobar("fooService");
//foobars = "Hi fooFactory, Hi fooService"
$scope.foobars = [
fooFactory.getFoobar(),
fooService.getFoobar()
];
}
설명.
여기에 다른 것이 있습니다.
첫 번째:
- 서비스를 사용하면 함수의 인스턴스("")를 얻을 수 있습니다.
this'이렇게요. - 팩토리를 사용하는 경우 함수 참조(공장에서의 반환문)를 호출하여 반환되는 값을 얻을 수 있습니다.
두 번째:
AngularJS(값, 상수, 서비스, 공장)의 모든 공급자는 싱글톤입니다.
세 번째:
어느 한쪽(서비스 또는 공장)을 사용하는 것은 코드 스타일에 관한 것입니다.하지만 앵귤러에서 일반적인 방법은JS는 팩토리를 사용합니다.
왜요?
왜냐면 "공장 방법은 물체를 각도(Angular)로 만드는 가장 일반적인 방법입니다.JS 의존성 주입 시스템.매우 유연하고 정교한 생성 논리를 포함할 수 있습니다.공장은 정규 기능이기 때문에 새로운 어휘 범위를 활용하여 "개인" 변수를 시뮬레이션할 수도 있습니다.이는 특정 서비스의 구현 세부사항을 숨길 수 있기 때문에 매우 유용합니다."
(참조: http://www.amazon.com/Mastering-Web-Application-Development-AngularJS/dp/1782161821)).
사용.
서비스 : 단순히 추가하는 것만으로 호출에 도움이 되는 유틸리티 함수를 공유할 수 있습니다.()참조할 수 있습니다., 음음음음음 could could could could could could could could could could could could could could could could could could could could와 함께 사용할 수도 있습니다.injectedArg.call(this)또는 이와 유사합니다.
Factory : 인스턴스를 만들기 위해 새로 만들 수 있는 'class' 함수를 반환할 때 유용합니다.
따라서 서비스에 복잡한 논리가 있고 이러한 복잡성을 드러내고 싶지 않을 때는 공장을 사용하십시오.
다른 경우 서비스 인스턴스를 반환하려면 서비스를 사용하십시오.
하지만 시간이 지나면 80%의 케이스에서 공장을 사용하게 될 것입니다.
상세한 것에 대하여는, http://blog.manishchhabra.com/2013/09/angularjs-service-vs-factory-with-example/ 를 참조해 주세요.
갱신:
훌륭한 투고는 이쪽 : http://iffycan.blogspot.com.ar/2013/05/angular-service-or-factory.html
「기능을 통상의 기능이라고 부르고 싶은 경우는, 팩토리를 사용해 주세요.새 연산자를 사용하여 기능을 인스턴스화하려면 service를 사용하십시오.차이를 모르면 공장을 이용하세요.
갱신:
Angular JS 팀은 작업을 수행하고 다음과 같이 설명합니다.http://docs.angularjs.org/guide/providers
그리고 이 페이지부터:
「공장과 서비스가 가장 일반적으로 사용되는 레시피입니다.두 회사의 유일한 차이점은 서비스 레시피가 커스텀 타입의 오브젝트에 대해 더 잘 작동하는 반면 팩토리는 JavaScript 프리미티브와 함수를 생성할 수 있다는 것입니다."
alernhwkim은 원래 자신의 블로그에 링크된 이 질문에 대한 답변을 올렸으나 진행자가 이를 삭제했다.이 글은 서비스, 프로바이더 및 공장에서 동일한 작업을 수행하는 방법뿐만 아니라 공장에서는 할 수 없는 프로바이더와 서비스에서는 할 수 없는 작업을 설명하는 유일한 게시물입니다.
블로그에서 직접:
app.service('CarService', function() {
this.dealer="Bad";
this.numCylinder = 4;
});
app.factory('CarFactory', function() {
return function(numCylinder) {
this.dealer="Bad";
this.numCylinder = numCylinder
};
});
app.provider('CarProvider', function() {
this.dealerName = 'Bad';
this.$get = function() {
return function(numCylinder) {
this.numCylinder = numCylinder;
this.dealer = this.dealerName;
}
};
this.setDealerName = function(str) {
this.dealerName = str;
}
});
자동차 서비스 개별 차량용으로 변경할 수는 없습니다.하여 "CarFactory"를 실행할 수 .new CarFactory할 수 없다new CarService자동차 서비스
공장이 이렇게 작동하지 않는 이유는 다음과 같습니다.
app.factory('CarFactory', function(numCylinder) {
this.dealer="Bad";
this.numCylinder = numCylinder
});
인스턴스화할 함수를 자동으로 되돌립니다.이러한 작업을 할 수 없기 때문입니다(프로토타입에 추가 등).
app.factory('CarFactory', function() {
function Car(numCylinder) {
this.dealer="Bad";
this.numCylinder = numCylinder
};
Car.prototype.breakCylinder = function() {
this.numCylinder -= 1;
};
return Car;
});
말 그대로 자동차를 생산하는 공장입니다.
그의 블로그의 결론은 꽤 좋다.
결론적으로,
--------------------------------------------------- | Provider| Singleton| Instantiable | Configurable| --------------------------------------------------- | Factory | Yes | Yes | No | --------------------------------------------------- | Service | Yes | No | No | --------------------------------------------------- | Provider| Yes | Yes | Yes | ---------------------------------------------------
{foo;1, bar:2}과 같은 단순한 개체만 필요한 경우 서비스를 사용하십시오. 코딩은 쉽지만 인스턴스화할 수 없습니다.
새로운 고객()이나 새로운 코멘트() 등의 오브젝트를 인스턴스화해야 할 경우 Factory를 사용합니다.
프로바이더를 설정할 필요가 있는 경우는, 테스트 URL, QA URL, 실가동 URL 등, 프로바이더를 사용합니다.
공장에서 물건을 반품할 경우 서비스를 이용해야 합니다.
하지 마세요:
app.factory('CarFactory', function() {
return {
numCylinder: 4
};
});
대신 서비스 사용:
app.service('CarService', function() {
this.numCylinder = 4;
});
이러한 모든 프로바이더의 개념은 처음에 보이는 것보다 훨씬 단순합니다.프로바이더를 분석하여 다른 부품을 꺼내면 매우 명확해집니다.
, 이며, 그 to to히 、 to른 、 른른 、 른른 、 른른 、 른른 、 른 to 、 른 to to 。을 사용하다providerfactoryvalueconstantservice.
프로바이더가 가능한 한 프로바이더를 사용할 수 있기 때문에 코드 기입이 적어집니다.원하는 것을 달성하지 못하면 체인으로 올라가 코드를 더 작성하기만 하면 됩니다.
이 이미지는 프로바이더의 코드를 나타내고 있습니다.이 이미지에서는, 프로바이더의 어느 부분을 공장이나 가치등의 작성에 사용할 수 있는지를 하이라이트 하고 있습니다.
(출처 : simplygoodcode.com )
이미지를 취득한 블로그 투고로부터의 자세한 내용과 예에 대해서는, http://www.simplygoodcode.com/2015/11/the-difference-between-service-provider-and-factory-in-angularjs/ 를 참조해 주세요.
공장 출하시와 서비스에서는 모두 공급자가 설정하고 컨트롤러 및 실행 블록에 주입할 수 있는 싱글톤 객체가 생성됩니다.피주입자의 입장에서 보면 공장에서 온 것이든 서비스든 전혀 차이가 없습니다.
그럼, 공장을 언제, 서비스를 언제 사용할까요?결국 당신의 코딩 선호도에 따라 달라지죠.모듈러형 JS패턴이 마음에 드시면 공장에 가보세요.컨스트럭터 함수("class") 스타일이 마음에 드신다면 서비스를 이용하십시오.두 스타일 모두 개인 구성원을 지원합니다.
이 서비스의 장점은 OOP 관점에서 보다 직관적인 것입니다.즉, "클래스"를 만들고 프로바이더와 연계하여 모듈 전체에서 동일한 코드를 재사용할 수 있으며 단순히 구성 블록의 컨스트럭터에 다른 파라미터를 제공하는 것만으로 인스턴스화된 객체의 동작을 변경할 수 있습니다.
본 서비스와 비교하여 공장에서 할 수 있는 일은 없습니다.그리고 반소절.공장이 더 인기 있는 것 같아요.그 이유는 민간/공공회원을 취급하는 편리함입니다.이 점에 있어서 서비스는 더 서툴 것이다.서비스를 코딩할 때 "this" 키워드를 사용하여 오브젝트 구성원을 공개하는 경향이 있으며, 이러한 공개 구성원은 개인 메서드(내부 기능)에 표시되지 않을 수 있습니다.
var Service = function(){
//public
this.age = 13;
//private
function getAge(){
return this.age; //private does not see public
}
console.log("age: " + getAge());
};
var s = new Service(); //prints 'age: undefined'
Angular는 "new" 키워드를 사용하여 서비스를 생성하므로 Angular가 컨트롤러에 전달되는 인스턴스에도 동일한 단점이 있습니다.물론 다음과 같은 방법으로 문제를 해결할 수 있습니다.
var Service = function(){
var that = this;
//public
this.age = 13;
//private
function getAge(){
return that.age;
}
console.log("age: " + getAge());
};
var s = new Service();// prints 'age: 13'
그러나 서비스 상수가 크면 코드를 읽을 수 없게 됩니다.또한, 서비스 프로토타입은 개인 구성원을 볼 수 없으며 일반 사용자만 사용할 수 있습니다.
var Service = function(){
var name = "George";
};
Service.prototype.getName = function(){
return this.name; //will not see a private member
};
var s = new Service();
console.log("name: " + s.getName());//prints 'name: undefined'
요약하자면, 팩토리를 사용하는 것이 더 편리합니다.공장에는 이러한 단점이 없기 때문입니다.디폴트로 사용하는 것을 추천합니다.
설령 그들이 모든 서비스와 공장이 싱글톤이라고 해도, 나는 그것에 100% 동의하지는 않는다.나는 공장은 싱글톤이 아니며 이것이 나의 답변의 요점이라고 말하고 싶다.모든 컴포넌트(서비스/공장)를 정의하는 이름을 생각해 보겠습니다.즉, 다음과 같습니다.
공장은 싱글톤이 아니기 때문에 주입할 때 원하는 만큼 만들 수 있기 때문에 오브젝트 공장처럼 동작합니다.도메인 엔티티의 팩토리를 생성하여 모델의 객체와 같은 이 객체를 보다 편안하게 작업할 수 있습니다.여러 개체를 가져오면 이 개체에서 매핑할 수 있으며 DDBB와 AngularJs 모델 간에 다른 계층과 같은 역할을 할 수 있습니다.오브젝트에 메서드를 추가하여 AngularJs 앱의 오브젝트를 조금 더 향하게 할 수 있습니다.
한편 서비스는 싱글톤이기 때문에 작성할 수 있는 인스턴스는 1개뿐입니다만, 컨트롤러에 삽입할 때는 1개뿐이기 때문에 공통의 서비스(휴대콜, 기능)와 같은 서비스를 제공합니다.컨트롤러에 접속합니다.
개념적으로는 서비스가 서비스를 제공하는 것처럼 공장에서 클래스의 여러 인스턴스(개체)를 생성할 수 있다고 생각할 수 있습니다.
서비스
구문: module.service('serviceName', 함수); 결과:serviceName을 주입 가능한 인수로 선언하면 실제 함수 참조가 module.service로 전달됩니다.
용도: 주입된 함수 참조에 ()를 추가하는 것만으로 호출에 유용한 유틸리티 함수를 공유할 수 있습니다.injectedArg.call() 또는 이와 유사한 방법으로 실행할 수도 있습니다.
공장
구문: module.factory ('factory Name', 함수);
결과: factoryName을 주입 가능한 인수로 선언하면 module.factory에 전달된 함수 참조를 호출하여 반환된 값이 제공됩니다.
용도: 인스턴스를 만들기 위해 새로 만들 수 있는 '클래스' 함수를 반환할 때 유용합니다.
프로바이더
구문: module.provider('providerName', 함수);
결과: providerName을 주입 가능한 인수로 선언하면 module.provider에 전달된 함수 참조의 $get 메서드를 호출하여 반환되는 값이 제공됩니다.
용도: 인스턴스를 만들기 위해 새로 만들 수 있지만 주입하기 전에 일종의 구성이 필요한 '클래스' 함수를 반환할 때 유용합니다.프로젝트 전체에서 재사용 가능한 클래스에 도움이 될까요?이건 아직 좀 애매해
오브젝트를 작성하든 양쪽에서 기능에 액세스하든 원하는 방식으로 사용할 수 있습니다.
서비스에서 새 개체를 생성할 수 있습니다.
app.service('carservice', function() {
this.model = function(){
this.name = Math.random(22222);
this.price = 1000;
this.colour = 'green';
this.manufacturer = 'bmw';
}
});
.controller('carcontroller', function ($scope,carservice) {
$scope = new carservice.model();
})
주의:
- 기본적으로 service는 생성자 함수가 아닌 객체를 반환합니다.
- 그렇기 때문에 컨스트럭터 함수는 this.model 속성으로 설정됩니다.
- 이 서비스 때문에 오브젝트는 반환되지만 오브젝트 안에는 새로운 오브젝트를 작성하기 위해 사용되는 컨스트럭터 함수가 있습니다.
공장에서 새 개체를 생성할 수 있습니다.
app.factory('carfactory', function() {
var model = function(){
this.name = Math.random(22222);
this.price = 1000;
this.colour = 'green';
this.manufacturer = 'bmw';
}
return model;
});
.controller('carcontroller', function ($scope,carfactory) {
$scope = new carfactory();
})
주의:
- 기본적으로는 factory는 객체가 아니라 컨스트럭터 함수를 반환합니다.
- 그렇기 때문에 컨스트럭터 함수로 새로운 오브젝트를 만들 수 있습니다.
간단한 기능만 이용할 수 있는 서비스를 만듭니다.
app.service('carservice', function () {
this.createCar = function () {
console.log('createCar');
};
this.deleteCar = function () {
console.log('deleteCar');
};
});
.controller('MyService', function ($scope,carservice) {
carservice.createCar()
})
간단한 기능만 이용할 수 있는 팩토리 만들기
app.factory('carfactory', function () {
var obj = {}
obj.createCar = function () {
console.log('createCar');
};
obj.deleteCar = function () {
console.log('deleteCar');
};
});
.controller('MyService', function ($scope,carfactory) {
carfactory.createCar()
})
결론:
- 새 개체를 만들 것인지 아니면 단순한 기능에 액세스하기 위해 원하는 방식으로 사용할 수 있습니다.
- 1대 1로 퍼포먼스에 영향을 주는 일은 없습니다.
- 둘 다 싱글톤 개체이며 애플리케이션당 하나의 인스턴스만 생성됩니다.
- 레퍼런스가 전달되는 모든 인스턴스는 1개뿐입니다.
- 앵귤러 문서에서는 공장(factory)을 service(서비스)라고 하며 service(서비스)라고도 합니다.
가장 일반적으로 사용되는 방법이 공장 및 서비스입니다.이들 간의 유일한 차이점은 상속 계층을 필요로 하는 오브젝트에 대해 서비스 메서드가 더 잘 작동하는 반면 팩토리는 JavaScript 프리미티브와 함수를 생성할 수 있다는 것입니다.
Provider 기능이 핵심 방법이고 다른 모든 방법은 구문 설탕일 뿐입니다.필요한 것은 글로벌 설정이 필요한 재사용 가능한 코드를 작성하는 경우뿐입니다.
서비스를 생성하는 방법에는 Value, Factory, Service, Provider 및 Constant의 5가지 방법이 있습니다.이 상세한 것에 대하여는, 앵귤러 서비스를 참조해 주세요.이 기사에서는, 이러한 모든 방법에 대해, 실제의 데모의 예와 함께 설명합니다.
.
언급URL : https://stackoverflow.com/questions/18939709/angularjs-when-to-use-service-instead-of-factory
'sourcecode' 카테고리의 다른 글
| 객체 속성 액세스를 위한 선택적 체인 연산자 사용 (0) | 2023.04.03 |
|---|---|
| wp-content에 대한 파일 권한을 docker-compose용 공식 워드프레스 이미지로 수정하는 방법 (0) | 2023.04.03 |
| 정수가 선행 0으로 시작하는 경우 JSON이 유효하지 않은 이유는 무엇입니까? (0) | 2023.04.03 |
| 이 "주의: 요청이 아직 크롬으로 완료되지 않았습니다"를 해결하는 방법 (0) | 2023.04.03 |
| Swift에서 두 개의 사전 인스턴스를 결합하려면 어떻게 해야 합니까? (0) | 2023.04.03 |