서비스와 팩토리에 대한 혼란
공장 내에서는 컨트롤러에 주입된 물건을 반송하는 것으로 알고 있습니다.하고 있습니다.this아무것도 돌려주지 않았어요
서비스는 항상 싱글톤이며, 새로운 공장 오브젝트가 모든 컨트롤러에 삽입된다고 가정하고 있었습니다.그런데 알고 보니 공장 물건도 싱글톤인가요?
데모할 코드 예:
var factories = angular.module('app.factories', []);
var app = angular.module('app', ['ngResource', 'app.factories']);
factories.factory('User', function () {
return {
first: 'John',
last: 'Doe'
};
});
app.controller('ACtrl', function($scope, User) {
$scope.user = User;
});
app.controller('BCtrl', function($scope, User) {
$scope.user = User;
});
「 」를할 때user.firstACtrl 보니, 고 it it it it it ituser.firstBCtrl ★★★★★★★★★★★★★★★★★★★★★★★★★)User★★★★★★★★★★★★★★★★★★?
공장에서 컨트롤러에 새로운 인스턴스가 주입된 것으로 가정했습니다.
모든 각도 서비스는 싱글톤입니다.
Docs(싱글톤으로 서비스 참조):https://docs.angularjs.org/guide/services
마지막으로, 모든 Angular 서비스가 애플리케이션 싱글톤임을 인식하는 것이 중요합니다.즉, 인젝터당 특정 서비스의 인스턴스는 1개뿐입니다.
기본적으로 서비스와 공장 간의 차이는 다음과 같습니다.
app.service('myService', function() {
// service is just a constructor function
// that will be called with 'new'
this.sayHello = function(name) {
return "Hi " + name + "!";
};
});
app.factory('myFactory', function() {
// factory returns an object
// you can run some code before
return {
sayHello : function(name) {
return "Hi " + name + "!";
}
}
});
$1200에 대한 이 프레젠테이션을 참조하십시오.http://slides.wesalvaro.com/20121113/ # /
이 슬라이드는 AngularJs 미팅 중 하나(http://blog.angularjs.org/2012/11/more-angularjs-meetup-videos.html에서 사용되었습니다.
나에게 있어서, 이 발견은, 모든 것이 같은 방법으로 동작하고 있는 것을 깨달았을 때에 나왔습니다.즉, 무언가를 한 번 실행하고, 얻은 가치를 저장하고, 의존성 주입을 통해 참조했을 때, 그 축적된 가치를 토해내는 것입니다.
예를 들어 다음과 같습니다.
app.factory('a', fn);
app.service('b', fn);
app.provider('c', fn);
이 세 가지 차이는 다음과 같습니다.
a는, 으로부터 취득됩니다.fn다른 말로 하면 다음과 같습니다.fn()b은 " " 에서newfn다른 말로 하면 다음과 같습니다.new fn()c은 처음에 를 들어서 '예'를 으로써 얻을 수newfn를 실행하고 나서, 「」를 합니다.$get
즉, 앵귤러 내부에는 캐시 오브젝트 같은 것이 있으며, 각 인젝션의 값은 처음 주입되었을 때 한 번만 할당됩니다.또한 다음과 같습니다.
cache.a = fn()
cache.b = new fn()
cache.c = (new fn()).$get()
는 이 말을 사용합니다.this 중, ★★★★★★★★★★★★★★★★★★★★★★★★★★★★」this.$get프로바이더에 있습니다.
생생한 예
"hello world" 예
factoryserviceprovider:
var myApp = angular.module('myApp', []);
//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
this.sayHello = function() {
return "Hello, World!"
};
});
//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!"
}
};
});
//provider style, full blown, configurable version
myApp.provider('helloWorld', function() {
// In the provider function, you cannot inject any
// service or factory. This can only be done at the
// "$get" method.
this.name = 'Default';
this.$get = function() {
var name = this.name;
return {
sayHello: function() {
return "Hello, " + name + "!"
}
}
};
this.setName = function(name) {
this.name = name;
};
});
//hey, we can configure a provider!
myApp.config(function(helloWorldProvider){
helloWorldProvider.setName('World');
});
function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
$scope.hellos = [
helloWorld.sayHello(),
helloWorldFromFactory.sayHello(),
helloWorldFromService.sayHello()];
}
다음과 같이 공장에서 새로운 클래스를 반환할 수 있도록 컨스트럭터 함수를 반환하는 방법도 있습니다.
function MyObjectWithParam($rootScope, name) {
this.$rootScope = $rootScope;
this.name = name;
}
MyObjectWithParam.prototype.getText = function () {
return this.name;
};
App.factory('MyObjectWithParam', function ($injector) {
return function(name) {
return $injector.instantiate(MyObjectWithParam,{ name: name });
};
});
MyObjectWithParam을 사용하는 컨트롤러에서 이 작업을 수행할 수 있습니다.
var obj = new MyObjectWithParam("hello"),
예는 해 주세요.
http://plnkr.co/edit/GKnhIN?p=previewhttpplnkr.co/edit/GKnhIN?p=
페이지가 논의된 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」이 페이지에서 논의되었습니다.
httpsgroups.google.com/forum/ /angular://groups.google.com/forum/ #!msg/angular/56sdORWEoqg/b8hdPskXZJ
주요 차이점은 다음과 같습니다.
서비스
문::module.service( 'serviceName', function );
결과: serviceName을 주입 가능한 인수로 선언하면 함수 인스턴스가 에 전달됩니다.module.service.
용도: 주입된 함수 참조에 ()를 추가하는 것만으로 호출에 유용한 유틸리티 함수를 공유할 수 있습니다.또, 다음과 같이 실행할 수 있습니다.injectedArg.call( this )또는 이와 유사합니다.
공장
문::module.factory( 'factoryName', function );
결과: factoryName을 주입 가능한 인수로 선언하면 전달된 함수 참조를 호출하여 반환된 값이 제공됩니다.module.factory.
용도: 인스턴스를 만들기 위해 새로 만들 수 있는 '클래스' 함수를 반환할 때 유용합니다.
각도도 확인합니다.스택 오버플로우에 관한 JS 문서 및 유사한 질문이 서비스와 팩토리에 대해 혼동되었습니다.
다음은 서비스와 팩토리를 사용하는 예입니다.Angular에 대해 자세히 알아보기JS 서비스 vs 팩토리
첫 번째 답변에 덧붙여, .service()는 좀 더 객체 지향적인 스타일(C#/Java)로 코드를 작성한 분들을 위한 것이라고 생각합니다(이 키워드를 사용하여 프로토타입/컨스트럭터 함수를 통해 객체를 인스턴스화).
팩토리는 Javascript/기능적인 코딩 스타일에 보다 자연스러운 코드를 작성하는 개발자를 위한 것입니다.
angular.js 내의 .service 및 .factory 메서드의 소스 코드를 살펴봅니다.내부적으로는 모두 프로바이더 메서드를 호출합니다.
function provider(name, provider_) {
if (isFunction(provider_)) {
provider_ = providerInjector.instantiate(provider_);
}
if (!provider_.$get) {
throw Error('Provider ' + name + ' must define $get factory method.');
}
return providerCache[name + providerSuffix] = provider_;
}
function factory(name, factoryFn) { \
return provider(name, { $get: factoryFn });
}
function service(name, constructor) {
return factory(name, ['$injector', function($injector) {
return $injector.instantiate(constructor);
}]);
}
매우 심플하게:
.service - 등록된 함수가 컨스트럭터로 호출됩니다('신규'라고도 함).
.factory - 등록된 함수는 단순한 함수로 호출됩니다.
둘 다 한 번 호출되면 싱글톤 개체가 앱의 다른 구성 요소에 삽입됩니다.
모든 프로바이더는 같은 방법으로 동작합니다. 가지 방법service,factory,provider더 적은 코드로 같은 일을 할 수 있게 해 주세요.
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」value ★★★★★★★★★★★★★★★★★」constant.
each each each each each each each each each each each each each provider은 ㅇㅇㅇㅇㅇㅇㅇ로 끝납니다.value에는 제한이 추가되어 있습니다.따라서 둘 중 하나를 결정하기 위해서는 어느 쪽이 더 적은 코드로 원하는 것을 달성해야 하는지 자문해야 합니다.
여기 제 말이 무슨 뜻인지 보여주는 사진이 있습니다.
이 이미지는 다음 블로그 투고에서 입수할 수 있습니다.
다음은 서비스 대 공장 간의 차이를 확인하는 데 유용할 수 있는 서비스 대 공장의 몇 가지 예를 제시하겠습니다.기본적으로 서비스에는 "new..."가 호출되어 있으며 이미 인스턴스화되어 있습니다.팩토리는 자동으로 인스턴스화되지 않습니다.
기본적인 예
단일 메서드를 가진 클래스 개체를 반환합니다.
다음은 하나의 방법을 사용하는 서비스입니다.
angular.service('Hello', function () {
this.sayHello = function () { /* ... */ };
});
메서드를 사용하여 개체를 반환하는 팩토리는 다음과 같습니다.
angular.factory('ClassFactory', function () {
return {
sayHello: function () { /* ... */ }
};
});
값을 반환하다
번호 목록을 반환하는 공장:
angular.factory('NumberListFactory', function () {
return [1, 2, 3, 4, 5];
});
console.log(NumberListFactory);
번호 목록을 반환하는 서비스:
angular.service('NumberLister', function () {
this.numbers = [1, 2, 3, 4, 5];
});
console.log(NumberLister.numbers);
두 경우 모두 출력은 같습니다.숫자 리스트입니다.
고도의 예
공장 사용 "클래스" 변수
이 예에서는 CounterFactory를 정의하고 카운터를 증감하여 현재 카운트를 가져오거나 작성된 CounterFactory 개체 수를 가져올 수 있습니다.
angular.factory('CounterFactory', function () {
var number_of_counter_factories = 0; // class variable
return function () {
var count = 0; // instance variable
number_of_counter_factories += 1; // increment the class variable
// this method accesses the class variable
this.getNumberOfCounterFactories = function () {
return number_of_counter_factories;
};
this.inc = function () {
count += 1;
};
this.dec = function () {
count -= 1;
};
this.getCount = function () {
return count;
};
}
})
'어울리다'를 합니다.CounterFactory여러 카운터를 만듭니다.클래스 변수에 액세스하여 작성된 카운터 수를 확인할 수 있습니다.
var people_counter;
var places_counter;
people_counter = new CounterFactory();
console.log('people', people_counter.getCount());
people_counter.inc();
console.log('people', people_counter.getCount());
console.log('counters', people_counter.getNumberOfCounterFactories());
places_counter = new CounterFactory();
console.log('places', places_counter.getCount());
console.log('counters', people_counter.getNumberOfCounterFactories());
console.log('counters', places_counter.getNumberOfCounterFactories());
이 코드의 출력은 다음과 같습니다.
people 0
people 1
counters 1
places 0
counters 2
counters 2
"공장"과 "서비스"는 DI(Dependency Injection)를 각도별로 수행하는 다른 방법입니다.
따라서 아래 코드와 같이 "서비스"를 사용하여 DI를 정의할 때,그러면 "Logger" 객체의 새로운 GLOBAL 인스턴스가 생성되어 함수에 주입됩니다.
app.service("Logger", Logger); // Injects a global object
"factory"를 사용하여 DI를 정의해도 인스턴스는 생성되지 않습니다.메서드를 전달하기만 하면 나중에 사용자가 내부적으로 오브젝트인스턴스를 호출해야 합니다.
app.factory("Customerfactory", CreateCustomer);
아래는 "서비스"의 DI 프로세스가 "공장"과 어떻게 다른지를 시각적으로 보여주는 간단한 이미지입니다.
시나리오에 따라 다른 유형의 개체를 생성하려는 경우 팩토리를 사용해야 합니다.예를 들어 시나리오에 따라 단순한 '고객' 오브젝트, '주소' 오브젝트를 가진 '고객' 오브젝트, '전화' 오브젝트를 가진 '고객' 오브젝트를 만듭니다.여기 이 단락에 대한 자세한 설명이 있습니다.
Utility, Logger, Error Handler 등의 유틸리티 또는 공유 기능을 삽입하는 경우 서비스를 사용해야 합니다.
서비스 스타일: (아마도 가장 단순한) 실제 함수를 반환합니다.주입된 함수 참조에 ()를 추가하여 호출하는 데 유용한 유틸리티 함수를 공유할 때 유용합니다.
Angular에서의 서비스JS는 함수 집합을 포함하는 싱글톤 JavaScript 개체입니다.
var myModule = angular.module("myModule", []);
myModule.value ("myValue" , "12345");
function MyService(myValue) {
this.doIt = function() {
console.log("done: " + myValue;
}
}
myModule.service("myService", MyService);
myModule.controller("MyController", function($scope, myService) {
myService.doIt();
});
Factory style: (더 복잡하지만 더 복잡함) 함수의 반환값: java의 new Object()와 같은 개체를 인스턴스화합니다.
팩토리는 가치를 창조하는 함수입니다.서비스, 컨트롤러 등공장에서 주입된 값이 필요합니다.공장에서 온 디맨드로 값을 생성합니다.값이 생성되면 삽입해야 하는 모든 서비스, 컨트롤러 등에 대해 값이 재사용됩니다.
var myModule = angular.module("myModule", []);
myModule.value("numberValue", 999);
myModule.factory("myFactory", function(numberValue) {
return "a value: " + numberValue;
})
myModule.controller("MyController", function($scope, myFactory) {
console.log(myFactory);
});
Provider style: (풀 블로우, 구성 가능한 버전) 함수의 $get 함수의 출력을 반환합니다.설정 가능.
각진 공급자JS는 가장 유연한 공장 형태입니다.서비스 또는 공장에서와 마찬가지로 공급자를 모듈에 등록합니다.단, provider() 함수를 사용하는 경우는 제외합니다.
var myModule = angular.module("myModule", []);
myModule.provider("mySecondService", function() {
var provider = {};
var config = { configParam : "default" };
provider.doConfig = function(configParam) {
config.configParam = configParam;
}
provider.$get = function() {
var service = {};
service.doService = function() {
console.log("mySecondService: " + config.configParam);
}
return service;
}
return provider;
});
myModule.config( function( mySecondServiceProvider ) {
mySecondServiceProvider.doConfig("new config param");
});
myModule.controller("MyController", function($scope, mySecondService) {
$scope.whenButtonClicked = function() {
mySecondService.doIt();
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="MyCtrl">
{{serviceOutput}}
<br/><br/>
{{factoryOutput}}
<br/><br/>
{{providerOutput}}
<script>
var app = angular.module( 'app', [] );
var MyFunc = function() {
this.name = "default name";
this.$get = function() {
this.name = "new name"
return "Hello from MyFunc.$get(). this.name = " + this.name;
};
return "Hello from MyFunc(). this.name = " + this.name;
};
// returns the actual function
app.service( 'myService', MyFunc );
// returns the function's return value
app.factory( 'myFactory', MyFunc );
// returns the output of the function's $get function
app.provider( 'myProv', MyFunc );
function MyCtrl( $scope, myService, myFactory, myProv ) {
$scope.serviceOutput = "myService = " + myService;
$scope.factoryOutput = "myFactory = " + myFactory;
$scope.providerOutput = "myProvider = " + myProv;
}
</script>
</body>
</html><!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div ng-controller="MyCtrl">
{{hellos}}
</div>
<script>
var myApp = angular.module('myApp', []);
//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
this.sayHello = function() {
return "Hello, World!"
};
});
//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!"
}
};
});
//provider style, full blown, configurable version
myApp.provider('helloWorld', function() {
this.name = 'Default';
this.$get = function() {
var name = this.name;
return {
sayHello: function() {
return "Hello, " + name + "!"
}
}
};
this.setName = function(name) {
this.name = name;
};
});
//hey, we can configure a provider!
myApp.config(function(helloWorldProvider){
helloWorldProvider.setName('World');
});
function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
$scope.hellos = [
helloWorld.sayHello(),
helloWorldFromFactory.sayHello(),
helloWorldFromService.sayHello()];
}
</script>
</body>
</html>기본적인 차이점은 공급자가 초기(비개체), 배열 또는 콜백 함수 값을 공장 선언 변수에 설정할 수 있다는 것입니다.따라서 객체를 반환할 경우 명시적으로 선언하고 반환해야 합니다.
한편 서비스를 사용할 수 있는 것은 서비스 선언 변수를 객체에 설정하는 경우뿐이므로 객체의 명시적인 작성과 반환을 회피할 수 있습니다.반면 이 키워드를 사용할 수 있습니다.
즉, "제공자는 보다 일반적인 형식이며 서비스는 개체로만 제한됩니다."
디자인 패턴의 차이는 다음과 같습니다.
서비스:해당 유형의 개체를 만들기 위해 새로 만들 형식을 반환합니다.Java 유추를 사용하면 Java Class 정의를 반환합니다.
Factory: 즉시 사용할 수 있는 콘크리트 개체를 반환합니다.Java Analogy에서 Factory는 Java 객체를 반환합니다.
저를 포함한 많은 사람들이 혼란스러워 하는 부분은 코드 내에서 서비스 또는 공장을 동일한 방법으로 사용할 수 있다는 것입니다. 두 경우 모두 코드 내에서 즉시 실행할 수 있는 구체적인 오브젝트입니다.즉, 본 서비스의 경우, 고객님을 대신하여 서비스 선언서에 "new"라고 기재되어 있는 각도가 호출됩니다.나는 이것이 복잡한 개념이라고 생각한다.
이것이 서비스 대 공장 대 프로바이더를 이해하기 위한 최선의 간단한 답변입니다.
출처 : https://groups.google.com/forum/ #!msg/angular/56sdORWeoqg/HuZsOsMvKv4J
다음은 ben이 데모 http://jsbin.com/ohamub/1/edit?html,output에서 말하는 내용입니다.
코드에 주된 차이를 나타내는 코멘트가 있습니다만, 여기서 조금 더 자세히 설명하겠습니다.참고로, 저는 지금 막 이 일을 생각하고 있기 때문에, 뭔가 잘못된 말을 하면 가르쳐 주세요.
서비스
구문: module.service('serviceName', 함수);
결과: serviceName을 주입 가능한 인수로 선언하면 실제 함수 참조가 module.service로 전달됩니다.
용도: 주입된 함수 참조에 ()를 추가하는 것만으로 호출에 유용한 유틸리티 함수를 공유할 수 있습니다.injectedArg.call() 또는 이와 유사한 방법으로 실행할 수도 있습니다.
공장
구문: module.factory ('factory Name', 함수);
결과: factoryName을 주입 가능한 인수로 선언하면 module.factory에 전달된 함수 참조를 호출하여 반환된 값이 제공됩니다.
용도: 인스턴스를 만들기 위해 새로 만들 수 있는 '클래스' 함수를 반환할 때 유용합니다.
프로바이더
구문: module.provider('providerName', 함수);
결과: providerName을 주입 가능한 인수로 선언하면 module.provider에 전달된 함수 참조의 $get 메서드를 호출하여 반환되는 값이 제공됩니다.
용도: 인스턴스를 만들기 위해 새로 만들 수 있지만 주입하기 전에 일종의 구성이 필요한 '클래스' 함수를 반환할 때 유용합니다.프로젝트 전체에서 재사용 가능한 클래스에 도움이 될까요?이건 아직 좀 애매해."벤
잠시 혼란스러웠는데 여기서 간단하게 설명하려고 노력 중입니다.이게 도움이 되길 바라!
angular .factory ★★★★★★★★★★★★★★★★★」angular .service둘 다 서비스를 초기화하고 동일한 방식으로 작동하기 위해 사용됩니다.
유일한 차이점은 서비스를 초기화하는 방법입니다.
둘 다 싱글톤입니다.
var app = angular.module('app', []);
공장
앱.factory)(<service name>,<function with a return value>)
반환값을 사용하여 가지고 있는 함수에서 서비스를 초기화하려면 이 값을 사용해야 합니다.factory★★★★★★ 。
예.
function myService() {
//return what you want
var service = {
myfunc: function (param) { /* do stuff */ }
}
return service;
}
app.factory('myService', myService);
이 서비스를 (예를 들어 컨트롤러에) 주입할 때:
- Angular는 주어진 함수를 호출합니다.
myService()). - Singleton - 동일한 개체를 한 번만 호출, 저장 및 전달합니다.
서비스
app.service)<service name>,<constructor function>)
컨스트럭터 함수에서 서비스를 초기화하려면 (사용)this.service★★★★★★ 。
예.
function myService() {
this.myfunc: function (param) { /* do stuff */ }
}
app.service('myService', myService);
이 서비스를 (예를 들어 컨트롤러에) 주입할 때:
- 의지
new된 기능을 입력한다(「」로서).new myService()). - Singleton - 동일한 개체를 한 번만 호출, 저장 및 전달합니다.
NOTE: If you use
factory with
<constructor function> or
service with
<function with a return value>, it will not work.
예 - 데모
Pascal Precht의 블로그 투고 덕분에 차이를 이해할 수 있었습니다.
서비스는 이름 및 서비스를 정의하는 함수를 사용하는 모듈상의 메서드입니다.컨트롤러, 디렉티브 및 필터와 같은 다른 컴포넌트에 특정 서비스를 주입하여 사용할 수 있습니다.팩토리는 모듈상의 메서드이며 팩토리를 정의하는 이름과 함수도 필요합니다.또, 서비스와 같은 방법으로 주입해 사용할 수도 있습니다.
새로 만든 오브젝트는 컨스트럭터 함수의 프로토타입 속성 값을 프로토타입으로 사용하기 때문에 오브젝트.create()를 호출하는 Angular 코드를 찾았습니다.이것은 인스턴스화되었을 때 서비스 컨스트럭터 함수라고 생각됩니다.그러나 공장 함수는 호출된 함수일 뿐이므로 공장에 오브젝트 리터럴을 반환해야 합니다.
공장용으로 찾은 각 1.5 코드는 다음과 같습니다.
var needsRecurse = false;
var destination = copyType(source);
if (destination === undefined) {
destination = isArray(source) ? [] : Object.create(getPrototypeOf(source));
needsRecurse = true;
}
factory() 함수의 각도 소스 코드 스니펫:
function factory(name, factoryFn, enforce) {
return provider(name, {
$get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
});
}
전달된 이름과 공장 함수를 가져와 공장 함수인 $get 메서드를 가진 동일한 이름의 공급자를 반환합니다.인젝터는 특정 의존관계를 요구할 때마다 기본적으로 $get() 메서드를 호출하여 해당 서비스의 인스턴스를 지원하는 공급자에게 요구합니다.따라서 프로바이더를 작성할 때 $get()이 필요합니다.
각도가 1.5인 서비스 코드는 다음과 같습니다.
function service(name, constructor) {
return factory(name, ['$injector', function($injector) {
return $injector.instantiate(constructor);
}]);
}
service()를 호출하면 실제로는 factory()를 호출하는 것으로 나타났습니다.그러나 서비스 컨스트럭터 기능을 그대로 공장에 전달하는 것은 아닙니다.또한 지정된 생성자가 개체를 인스턴스화하도록 인젝터에 요청하는 함수를 전달합니다.
즉, My Service를 어딘가에 삽입하면 코드에 다음과 같은 일이 발생합니다.
MyServiceProvider.$get(); // return the instance of the service
다시 기술하기 위해 서비스는 팩토리를 호출합니다.이것은 대응하는 프로바이더의 $get() 메서드입니다.또한 $injector.instantiate()는 최종적으로 컨스트럭터 함수를 사용하여 Object.create()를 호출하는 메서드입니다.그래서 서비스에서는 '이것'을 사용합니다.
ES5의 경우 service()와 factory() 중 어느 쪽을 사용하든 상관없습니다.서비스 공급자를 만드는 것은 항상 공장입니다.
하지만 서비스에서도 동일한 작업을 수행할 수 있습니다.서비스는 생성자 함수이지만 객체 리터럴을 반환하는 것을 막지 않습니다.즉, 서비스 코드를 공장에서와 같은 방법으로 작성할 수도 있고, 다른 말로 하면 서비스 코드를 공장에서 작성하여 오브젝트를 반환할 수도 있습니다.
왜 대부분의 사람들이 서비스보다 공장을 이용하는 것을 추천하나요?이것은 파웰 코즐로프스키의 책에서 나온 최고의 대답이다.Angular를 사용한 웹 응용 프로그램 개발 마스터JS.
공장 방법은 물체를 Angular로 만드는 가장 일반적인 방법입니다.JS 의존성 주입 시스템.매우 유연하고 정교한 생성 논리를 포함할 수 있습니다.공장은 정규 기능이기 때문에 새로운 어휘 범위를 활용하여 "개인" 변수를 시뮬레이션할 수도 있습니다.이는 특정 서비스의 구현 세부사항을 숨길 수 있기 때문에 매우 유용합니다."
- 팩토리에서는 실제로 팩토리 내부에 오브젝트를 생성하여 반환할 수 있습니다.
- 이 서비스에서는 표준 기능만 사용할 수 있습니다.
this이치노 - 프로바이더와 함께라면
$get데이터를 반환하는 개체를 가져오는 데 사용할 수 있습니다.
AngularJS의 비즈니스 로직을 처리하는 방법에는 세 가지가 있습니다. (Yaakov의 Coursera Angular에서 영감을 받았습니다.)JS 코스)는 다음과 같습니다.
- 서비스
- 공장
- 프로바이더
여기서는 서비스 대 팩토리에 대해서만 설명하겠습니다.
서비스:
구문:
app.module
var app = angular.module('ServiceExample',[]);
var serviceExampleController =
app.controller('ServiceExampleController', ServiceExampleController);
var serviceExample = app.service('NameOfTheService', NameOfTheService);
ServiceExampleController.$inject = ['NameOfTheService'] //very important as this protects from minification of js files
function ServiceExampleController(NameOfTheService){
serviceExampleController = this;
serviceExampleController.data = NameOfTheService.getSomeData();
}
function NameOfTheService(){
nameOfTheService = this;
nameOfTheService.data = "Some Data";
nameOfTheService.getSomeData = function(){
return nameOfTheService.data;
}
}
index.displaces를 표시합니다.
<div ng-controller = "ServiceExampleController as serviceExample">
{{serviceExample.data}}
</div>
본 서비스의 주요 기능은 다음과 같습니다.
게으른 인스턴스화:서비스가 주입되지 않으면 인스턴스화되지 않습니다.따라서 이를 사용하려면 모듈에 주입해야 합니다.
싱글톤:여러 모듈에 삽입된 경우 모든 인스턴스는 하나의 특정 인스턴스에만 액세스할 수 있습니다.따라서 서로 다른 컨트롤러 간에 데이터를 공유하는 것이 매우 편리합니다.
공장
이제 앵귤러에 있는 공장에 대해 이야기해 봅시다.JS
먼저 다음 구문을 살펴보겠습니다.
app.filename:
var app = angular.module('FactoryExample',[]);
var factoryController = app.controller('FactoryController', FactoryController);
var factoryExampleOne = app.factory('NameOfTheFactoryOne', NameOfTheFactoryOne);
var factoryExampleTwo = app.factory('NameOfTheFactoryTwo', NameOfTheFactoryTwo);
//first implementation where it returns a function
function NameOfTheFactoryOne(){
var factory = function(){
return new SomeService();
}
return factory;
}
//second implementation where an object literal would be returned
function NameOfTheFactoryTwo(){
var factory = {
getSomeService : function(){
return new SomeService();
}
};
return factory;
}
이제 컨트롤러에서 위의 두 가지를 사용합니다.
var factoryOne = NameOfTheFactoryOne() //since it returns a function
factoryOne.someMethod();
var factoryTwo = NameOfTheFactoryTwo.getSomeService(); //accessing the object
factoryTwo.someMethod();
공장 출하 시의 특징:
이러한 유형의 서비스는 공장 설계 패턴을 따릅니다.공장은 새로운 오브젝트나 메서드를 만드는 중심 장소라고 생각할 수 있습니다.
이는 싱글톤뿐만 아니라 맞춤형 서비스도 제공합니다.
.service()method는 항상 같은 타입의 서비스(싱글톤)를 생산하는 공장입니다.동작을 설정하는 쉬운 방법은 없습니다.그거.service()보통 method는 설정이 전혀 필요 없는 바로가기용으로 사용됩니다.
간결하고 간단한 설명은 https://stackoverflow.com/a/26924234/5811973를 참조하십시오.
상세한 것에 대하여는, https://stackoverflow.com/a/15666049/5811973 를 참조해 주세요.
또한 angularJs 문서에서도 다음을 참조하십시오.
이 유추로 알 수 있습니다.어떤 값을 반환하는 일반 함수와 새로운 키워드를 사용하여 인스턴스화되는 컨스트럭터 함수의 차이를 생각해 보십시오.따라서 팩토리 작성은 일부 값(프라이머리 또는 오브젝트)을 반환하는 일반 함수 작성과 비슷하지만 서비스 작성은 새로운 키워드를 사용하여 인스턴스를 생성할 수 있는 컨스트럭터 함수(OO 클래스)를 작성하는 것과 같습니다.여기서 주의할 점은 서비스 방식을 사용하여 서비스를 생성하면 Angular에서 지원되는 의존성 주입 메커니즘을 사용하여 서비스 인스턴스가 자동으로 생성된다는 것입니다.JS
언급URL : https://stackoverflow.com/questions/13762228/confused-about-service-vs-factory
'programing' 카테고리의 다른 글
| Eclipse에서 다른 폴더로 프로젝트 이동 (0) | 2023.04.24 |
|---|---|
| 열을 삭제하지 않고 NOT NULL에서 NULL로 변경할 수 있습니까? (0) | 2023.04.24 |
| iOS 8 렌더링되지 않은 뷰의 스냅샷은 빈 스냅샷이 됩니다. (0) | 2023.04.24 |
| Eclipse 프로젝트의 JDK 버전을 변경하는 방법 (0) | 2023.04.24 |
| 오류: CUICatalog:잘못된 자산 이름 제공: (null) 또는 잘못된 축척 비율: 2.0000 (0) | 2023.04.24 |