AngularJS: 서비스 vs 프로바이더 vs 팩토리
Service,Provider ★★★★★★★★★★★★★★★★★」FactoryAngular JS?
각도에서JS 메일링 리스트 서비스 vs 팩토리 vs 프로바이더 및 그 주입 사용법을 설명하는 놀라운 스레드를 입수했습니다.답변 편집:
서비스
문::module.service( 'serviceName', function );
결과:serviceName을 주입 가능한 인수로 선언하면 함수의 인스턴스가 제공됩니다. 바꿔 말하면 new FunctionYouPassedToService().
공장
문::module.factory( 'factoryName', function );
결과:factoryName을 주입 가능한 인수로 선언하면 module.factory에 전달된 함수 참조를 호출하여 반환되는 값이 제공됩니다.
프로바이더
문::module.provider( 'providerName', function );
결과:providerName을 주입 가능한 인수로 선언하면 (new ProviderFunction()).$get()get 메서드는 $get 메서드로 호출됩니다.ProviderFunction"module.default" 입니다.
공급자는 모듈 설정 단계에서 설정할 수 있다는 장점이 있습니다.
제공된 코드는 여기를 참조하십시오.
다음은 Misko의 훌륭한 추가 설명입니다.
provide.value('a', 123);
function Controller(a) {
expect(a).toEqual(123);
}
이 경우 인젝터는 단순히 값을 있는 그대로 반환합니다.하지만 가치를 계산하려면 어떻게 해야 할까요?그럼 공장을 사용하세요.
provide.factory('b', function(a) {
return a*2;
});
function Controller(b) {
expect(b).toEqual(246);
}
★★★★★★★★★★★★★★★★★.factory값 생성을 담당하는 함수입니다.공장 함수는 다른 종속성을 요구할 수 있습니다.
하지만 당신이 좀 더 OO가 되어 그리터라는 수업을 듣고 싶다면요?
function Greeter(a) {
this.greet = function() {
return 'Hello ' + a;
}
}
그런 다음 인스턴스화하려면
provide.factory('greeter', function(a) {
return new Greeter(a);
});
그러면 이렇게 컨트롤러에 '그리터'를 요청할 수 있습니다.
function Controller(greeter) {
expect(greeter instanceof Greeter).toBe(true);
expect(greeter.greet()).toEqual('Hello 123');
}
하지만 그것은 너무 말이 많다.을 좀 더 은 '이렇게 쓰세요' 입니다.provider.service('greeter', Greeter);
, ""를 Greeter사사맞 기기? ???? 되겠네요.
provide.provider('greeter2', function() {
var salutation = 'Hello';
this.setSalutation = function(s) {
salutation = s;
}
function Greeter(a) {
this.greet = function() {
return salutation + ' ' + a;
}
}
this.$get = function(a) {
return new Greeter(a);
};
});
그러면 이렇게 할 수 있습니다.
angular.module('abc', []).config(function(greeter2Provider) {
greeter2Provider.setSalutation('Halo');
});
function Controller(greeter2) {
expect(greeter2.greet()).toEqual('Halo 123');
}
로 ★★★★★★★★★★★★★★★★★★★★.service,factory , , , , 입니다.value는 모두 프로바이더에서 파생됩니다.
provider.service = function(name, Class) {
provider.provide(name, function() {
this.$get = function($injector) {
return $injector.instantiate(Class);
};
});
}
provider.factory = function(name, factory) {
provider.provide(name, function() {
this.$get = function($injector) {
return $injector.invoke(factory);
};
});
}
provider.value = function(name, value) {
provider.factory(name, function() {
return value;
});
};
JS 바이올린 데모
world의 예와 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() {
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 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
{{hellos}}
</div>
</body>TL;DR
1) Factory를 사용하는 경우 오브젝트를 만들고 오브젝트에 속성을 추가한 후 동일한 오브젝트를 반환합니다.이 팩토리를 컨트롤러로 전달하면 오브젝트상의 이러한 속성은 공장에서 해당 컨트롤러에서 사용할 수 있게 됩니다.
app.controller(‘myFactoryCtrl’, function($scope, myFactory){
$scope.artist = myFactory.getArtist();
});
app.factory(‘myFactory’, function(){
var _artist = ‘Shakira’;
var service = {};
service.getArtist = function(){
return _artist;
}
return service;
});
2) 서비스를 이용할 때, AngularJS는 'new' 키워드를 사용하여 백그라운드에서 이를 인스턴스화합니다.그 때문에, 「이것」에 속성을 추가하고, 서비스에서는 「이것」을 반환합니다.서비스를 컨트롤러에 전달하면 'this'의 속성이 서비스를 통해 해당 컨트롤러에서 사용할 수 있게 됩니다.
app.controller(‘myServiceCtrl’, function($scope, myService){
$scope.artist = myService.getArtist();
});
app.service(‘myService’, function(){
var _artist = ‘Nelly’;
this.getArtist = function(){
return _artist;
}
});
3) 프로바이더는 .config() 함수에 전달할 수 있는 유일한 서비스입니다.서비스 개체를 사용할 수 있도록 하기 전에 모듈 전체 구성을 제공하는 경우 공급자를 사용하십시오.
app.controller(‘myProvider’, function($scope, myProvider){
$scope.artist = myProvider.getArtist();
$scope.data.thingFromConfig = myProvider.thingOnConfig;
});
app.provider(‘myProvider’, function(){
//Only the next two lines are available in the app.config()
this._artist = ‘’;
this.thingFromConfig = ‘’;
this.$get = function(){
var that = this;
return {
getArtist: function(){
return that._artist;
},
thingOnConfig: that.thingFromConfig
}
}
});
app.config(function(myProviderProvider){
myProviderProvider.thingFromConfig = ‘This was set in config’;
});
비 TL;DR
1) ★★
서비스를 만들고 구성하는 가장 일반적인 방법은 공장입니다.TL;DR에 관한 것입니다.개체를 만들고 여기에 속성을 추가한 다음 동일한 개체를 반환하기만 하면 됩니다.그런 다음 공장을 컨트롤러로 넘기면 오브젝트 상의 이러한 속성은 공장에서 해당 컨트롤러로 사용할 수 있게 됩니다.하다
app.factory(‘myFactory’, function(){
var service = {};
return service;
});
이제 'myFactory'를 컨트롤러에 전달하면 '서비스'에 첨부하는 모든 속성을 사용할 수 있습니다.
이제 콜백 함수에 몇 가지 '개인' 변수를 추가해 보겠습니다.컨트롤러에서 직접 액세스할 수는 없지만, 필요에 따라 이러한 '개인' 변수를 변경할 수 있도록 '서비스'에 몇 가지 getter/setter 메서드를 설정할 것입니다.
app.factory(‘myFactory’, function($http, $q){
var service = {};
var baseUrl = ‘https://itunes.apple.com/search?term=’;
var _artist = ‘’;
var _finalUrl = ‘’;
var makeUrl = function(){
_artist = _artist.split(‘ ‘).join(‘+’);
_finalUrl = baseUrl + _artist + ‘&callback=JSON_CALLBACK’;
return _finalUrl
}
return service;
});
이러한 변수/함수는 '서비스'에 부가되지 않습니다.나중에 사용하거나 수정하기 위해 작성했을 뿐입니다.
- baseUrl은 iTunes API에 필요한 기본 URL입니다.
- _marker는 우리가 조회하고자 하는 아티스트입니다.
- _finalUrl은 iTunes에 콜을 발신하는 최종적이고 완전한 URL입니다.
- makeUrl은 iTunes 친화적인 URL을 생성하여 반환하는 함수입니다.
이제 도우미/개인 변수와 함수가 배치되었으므로 'service' 개체에 몇 가지 속성을 추가해 보겠습니다.'myFactory'를 통과시키는 컨트롤러 내에서 '서비스'를 사용하는 것은 무엇이든 직접 사용할 수 있습니다.
아티스트를 되돌리거나 설정하기만 하면 되는 set Artist 메서드와 get Artist 메서드를 만듭니다.또, 작성한 URL로 iTunes API를 호출하는 메서드를 작성합니다.이 메서드는 iTunes API에서 데이터가 돌아오면 이행할 약속을 반환합니다.AngularJS에서 약속을 사용한 경험이 많지 않다면 자세히 살펴보는 것을 강력히 추천합니다.
아래 setArtist는 아티스트를 받아들이고 아티스트를 설정할 수 있습니다.getArtist는 아티스트를 반환합니다.callItunes는 먼저 makeUrl()을 호출하여 $http 요청과 함께 사용할 URL을 만듭니다.그런 다음 약속 개체를 설정하고 최종 URL을 사용하여 $http 요청을 작성합니다.그러면 $http는 약속을 반환하므로 요청 후에 .success 또는 .error를 호출할 수 있습니다.그런 다음 iTunes 데이터와의 약속을 해결하거나 '오류가 발생했습니다'라는 메시지로 약속을 거부합니다.
app.factory('myFactory', function($http, $q){
var service = {};
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
service.setArtist = function(artist){
_artist = artist;
}
service.getArtist = function(){
return _artist;
}
service.callItunes = function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
}
return service;
});
이제 우리 공장은 완성되었다.이제 모든 컨트롤러에 'myFactory'를 삽입할 수 있게 되었습니다. 그러면 서비스 개체에 연결된 메서드(setArtist, getArtist 및 callItunes)를 호출할 수 있습니다.
app.controller('myFactoryCtrl', function($scope, myFactory){
$scope.data = {};
$scope.updateArtist = function(){
myFactory.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myFactory.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
});
'myFactory'를 선택합니다.myFactory' $scope 。위의 유일한 까다로운 코드는 당신이 전에 약속을 다뤄본 적이 없다는 것이다.하기 때문에 .할 수 데이터로 에만 $설정할 수 .callItunes는 .then을 사용합니다.컨트롤러가 매우 얇다는 것을 알 수 있습니다(이것은 좋은 코딩 방법입니다).델의 모든 논리와 영속적인 데이터는 컨트롤러가 아닌 델의 서비스에 있습니다.
2) 2) 비 2
서비스를 만들 때 가장 중요한 점은 'new' 키워드를 사용하여 서비스가 인스턴스화된다는 것입니다.JavaScript의 전문가에게는 이것이 코드의 성질에 대한 큰 힌트를 줄 것입니다.JavaScript에 대한 지식이 한정되어 있는 분이나 'new' 키워드의 실제 기능에 대해 잘 모르는 분들을 위해 최종적으로 서비스의 성격을 이해하는 데 도움이 되는 몇 가지 JavaScript의 기초에 대해 알아보겠습니다.
'new' 키워드를 사용하여 함수를 호출했을 때 발생하는 변경을 실제로 확인하려면 함수를 만들고 'new' 키워드를 사용하여 호출한 후 인터프리터가 'new' 키워드를 보았을 때 수행하는 작업을 보여 줍니다.최종 결과는 둘 다 동일합니다.
먼저 컨스트럭터를 만듭니다.
var Person = function(name, age){
this.name = name;
this.age = age;
}
이것은 일반적인 JavaScript 컨스트럭터 함수입니다.이제 "new" 키워드를 사용하여 Person 함수를 호출할 때마다 "this"가 새로 생성된 개체에 바인딩됩니다.
이제 개인 '클래스'의 모든 인스턴스에서 사용할 수 있도록 개인 프로토타입에 메서드를 추가해 보겠습니다.
Person.prototype.sayName = function(){
alert(‘My name is ‘ + this.name);
}
이제 sayName 함수를 프로토타입에 넣기 때문에 Person의 모든 인스턴스가 sayName 함수를 호출하여 해당 인스턴스의 이름을 알릴 수 있습니다.
이제 개인 컨스트럭터 함수와 sayName 함수가 프로토타입에 포함되었으므로 실제로 개인 인스턴스를 만들고 sayName 함수를 호출합니다.
var tyler = new Person(‘Tyler’, 23);
tyler.sayName(); //alerts ‘My name is Tyler’
따라서 모두 합쳐서 인물 생성자를 만들고, 함수를 프로토타입에 추가하고, 인물 인스턴스를 만들고, 프로토타입에서 함수를 호출하는 코드는 다음과 같습니다.
var Person = function(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
alert(‘My name is ‘ + this.name);
}
var tyler = new Person(‘Tyler’, 23);
tyler.sayName(); //alerts ‘My name is Tyler’
이제 JavaScript에서 'new' 키워드를 사용하면 실제로 어떤 일이 일어나는지 살펴보겠습니다.이 예에서 'new'를 사용한 후 메서드(sayName)를 객체처럼 'tyler'에서 호출할 수 있습니다.그것은 객체이기 때문입니다.먼저, 코드 내에서 볼 수 있는지 여부에 관계없이 개인 생성자가 개체를 반환하고 있음을 알 수 있습니다.둘째, sayName 함수는 사용자 인스턴스가 아닌 프로토타입에 위치하기 때문에 사용자 함수가 반환하는 객체는 룩업이 실패했을 때 해당 프로토타입에 위임되어야 합니다.간단히 말하면, tyler.sayName()을 호출하면 인터프리터가 "OK, 방금 만든 'tyler' 객체를 보고 sayName 함수를 찾은 후 호출합니다.잠깐만요, 여기 안 보이는데요. 이름과 나이만 보여요. 시제품을 확인해 볼게요.네, 시제품에 있는 것 같아요. 그렇게 부르죠."
아래는 'new' 키워드가 JavaScript에서 실제로 무엇을 하고 있는지에 대한 코드입니다.기본적으로 위 단락의 코드 예시입니다.해석자가 코드를 보는 방식이나 '인터프리터 뷰'를 메모 안에 넣었습니다.
var Person = function(name, age){
//The below line creates an object(obj) that will delegate to the person’s prototype on failed lookups.
//var obj = Object.create(Person.prototype);
//The line directly below this sets ‘this’ to the newly created object
//this = obj;
this.name = name;
this.age = age;
//return this;
}
이제 'new' 키워드가 JavaScript에서 실제로 어떤 역할을 하는지 알고 Angular로 서비스를 만듭니다.JS는 이해하기 쉬울 것입니다.
서비스를 작성할 때 가장 이해해야 할 것은 'new' 키워드를 사용하여 서비스가 인스턴스화된다는 것입니다.이러한 지식을 상기 예와 조합하여 '이것'에 직접 속성 및 방법을 첨부하고, 서비스 자체에서 반환해야 합니다.이 동작에 대해 살펴보겠습니다.
공장 출하 시의 예시와 달리 오브젝트를 작성한 후 반환할 필요가 없습니다.이전에도 여러 번 언급했듯이 'new' 키워드를 사용했기 때문에 인터프리터가 오브젝트를 생성하여 프로토타입에 위임한 후 반환할 필요가 없습니다.
먼저, 우리의 '프라이빗'과 도우미 기능을 만들어 봅시다.저희 공장에서도 똑같은 작업을 했기 때문에 매우 친숙해 보일 것입니다.여기서는 각 라인의 기능에 대해서는 설명하지 않습니다.공장 예에서는 설명했으므로 혼란스럽다면 공장 예제를 다시 읽어보십시오.
app.service('myService', function($http, $q){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
});
이제 컨트롤러에서 사용할 수 있는 모든 메서드를 'this'에 첨부합니다.
app.service('myService', function($http, $q){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
this.setArtist = function(artist){
_artist = artist;
}
this.getArtist = function(){
return _artist;
}
this.callItunes = function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
}
});
공장에서와 마찬가지로 setArtist, getArtist 및 callItunes는 myService를 제공하는 컨트롤러에서 사용할 수 있습니다.이것은 myService 컨트롤러(공장 컨트롤러와 거의 동일)입니다.
app.controller('myServiceCtrl', function($scope, myService){
$scope.data = {};
$scope.updateArtist = function(){
myService.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myService.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
});
앞에서 것처럼, '이 무엇을 하는지 제대로 , 는 Angular에 , 즉 '새로운''는 Angular의 공장입니다.JS.
3) 프로바이더
프로바이더에 대해 기억해야 할 가장 큰 점은 프로바이더가 어플리케이션의 app.config 부분에 전달할 수 있는 유일한 서비스라는 것입니다.애플리케이션 내 다른 모든 곳에서 서비스 개체를 사용할 수 있도록 하기 전에 서비스 개체의 일부를 변경해야 하는 경우 이 기능은 매우 중요합니다.서비스/팩토리와 매우 유사하지만 몇 가지 차이점이 있습니다.
우선, 서비스 및 공장에서의 경우와 같은 방법으로 프로바이더를 설정했습니다.아래 변수는 우리의 '프라이빗' 기능과 도우미 기능입니다.
app.provider('myProvider', function(){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
//Going to set this property on the config function below.
this.thingFromConfig = ‘’;
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
}
*상기 코드의 일부라도 혼란스러운 부분이 있는 경우는, 「공장」섹션을 참조해 주세요.여기서 자세한 내용을 설명하겠습니다.
프로바이더에는 3개의 섹션이 있다고 생각할 수 있습니다.첫 번째 섹션은 나중에 수정/설정되는 '개인' 변수/함수입니다(위 그림 참조).두 번째 섹션은 app.config 함수에서 사용할 수 있는 변수/함수입니다. 따라서 변수/함수는 다른 곳에서 사용할 수 있기 전에 변경할 수 있습니다(위 그림도 참조).이러한 변수는 'this' 키워드에 부가해야 합니다.이 예에서는 app.config에서 변경할 수 있는 것은 'thing From Config'뿐입니다.세 번째 섹션(아래 그림)은 특정 컨트롤러에 'myProvider' 서비스를 전달할 때 컨트롤러에서 사용할 수 있는 모든 변수/함수입니다.
Provider를 사용하여 서비스를 작성할 때 컨트롤러에서 사용할 수 있는 속성/메서드는 $get() 함수에서 반환되는 속성/메서드뿐입니다.아래 코드는 $get을 'this'에 붙입니다(이 함수는 최종적으로 반환됩니다).이 $get 함수는 컨트롤러에서 사용할 수 있는 모든 메서드/속성을 반환합니다.여기 암호 예가 있습니다.
this.$get = function($http, $q){
return {
callItunes: function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
},
setArtist: function(artist){
_artist = artist;
},
getArtist: function(){
return _artist;
},
thingOnConfig: this.thingFromConfig
}
}
전체 공급자 코드는 다음과 같습니다.
app.provider('myProvider', function(){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
//Going to set this property on the config function below
this.thingFromConfig = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
this.$get = function($http, $q){
return {
callItunes: function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
},
setArtist: function(artist){
_artist = artist;
},
getArtist: function(){
return _artist;
},
thingOnConfig: this.thingFromConfig
}
}
});
공장 및 서비스와 마찬가지로 setArtist, getArtist 및 callItunes도 myProvider를 건네주는 컨트롤러에서 사용할 수 있습니다.이것은 myProvider 컨트롤러(공장/서비스 컨트롤러와 거의 동일)입니다.
app.controller('myProviderCtrl', function($scope, myProvider){
$scope.data = {};
$scope.updateArtist = function(){
myProvider.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myProvider.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
$scope.data.thingFromConfig = myProvider.thingOnConfig;
});
앞에서 설명한 바와 같이 Provider를 사용하여 서비스를 작성하는 목적은 최종 오브젝트가 어플리케이션의 나머지 부분에 전달되기 전에 app.config 함수를 통해 일부 변수를 변경할 수 있도록 하는 것입니다.예를 들어 보겠습니다.
app.config(function(myProviderProvider){
//Providers are the only service you can pass into app.config
myProviderProvider.thingFromConfig = 'This sentence was set in app.config. Providers are the only service that can be passed into config. Check out the code to see how it works';
});
이것으로, 프로바이더내의 「thing From Config」가 빈 문자열과 같은 것을 알 수 있습니다만, 그것이 DOM 에 표시되었을 경우는 「This sent was set...」가 됩니다.
모든 서비스는 싱글톤이며 앱당 한 번씩 인스턴스화됩니다.원시, 오브젝트 리터럴, 함수, 커스텀유형의 인스턴스 등 모든 타입이 가능합니다.
value,factory,service,constant , , , , 입니다.provider이치노인젝터에 서비스를 인스턴스화하는 방법을 설명합니다.
가장 상세하지만 가장 포괄적인 것은 프로바이더 레시피입니다.나머지 네 가지 레시피 유형(Value, Factory, Service 및 Constant)은 프로바이더의 레시피 위에 있는 통사설탕일 뿐입니다.
- Value Recipe는 사용자가 직접 서비스를 인스턴스화하고 인스턴스화된 값을 인젝터에 제공하는 가장 단순한 경우입니다.
- 출고 시 레시피는 인젝터가 서비스를 인스턴스화해야 할 때 호출하는 공장 기능을 제공합니다.호출 시 공장 함수는 서비스 인스턴스를 생성하여 반환합니다.본 서비스의 종속성은 함수의 인수로 삽입됩니다.따라서 이 레시피를 사용하면 다음과 같은 기능이 추가됩니다.
- 다른 서비스를 사용할 수 있는 기능(의존관계가 있음)
- 서비스 초기화
- 초기화 지연/지연
- Service Recipe는 Factory Recipe와 거의 동일하지만, 여기서는 Injector가 공장 기능이 아닌 새 연산자를 사용하여 생성자를 호출합니다.
- 프로바이더의 레시피는 보통 과잉 살상입니다.팩토리 작성을 구성할 수 있도록 함으로써 간접 레이어를 하나 더 추가합니다.
Provider recipe는 어플리케이션이 시작되기 전에 작성되어야 하는 어플리케이션 전체의 설정을 위해 API를 공개하는 경우에만 사용해야 합니다.이는 일반적으로 애플리케이션마다 동작이 약간 달라야 하는 재사용 가능한 서비스에만 적용됩니다.
- Constant 레시피는 설정 단계에서 사용 가능한 서비스를 정의할 수 있다는 점을 제외하고는 Value 레시피와 동일합니다.Value Recipe를 사용하여 작성된 서비스보다 빠릅니다.값과는 달리 다음을 사용하여 장식할 수 없습니다.
decorator.
각도 이해JS 공장, 서비스 및 공급자
이 모든 것은 재사용 가능한 싱글톤 객체를 공유하기 위해 사용됩니다.응용 프로그램/다양한 구성 요소/모듈 간에 재사용 가능한 코드를 공유할 수 있습니다.
- 느릿느릿 인스턴스화 – Angular는 애플리케이션 컴포넌트가 서비스/팩토리에 의존하는 경우에만 인스턴스화됩니다.
- 싱글톤 – 서비스에 의존하는 각 컴포넌트는 서비스 팩토리에서 생성된 단일 인스턴스에 대한 참조를 받습니다.
공장
팩토리는 오브젝트를 작성하기 전에 로직을 조작/추가할 수 있는 함수입니다.그러면 새로 생성된 오브젝트가 반환됩니다.
app.factory('MyFactory', function() {
var serviceObj = {};
//creating an object with methods/functions or variables
serviceObj.myFunction = function() {
//TO DO:
};
//return that object
return serviceObj;
});
사용.
클래스처럼 함수의 집합일 수도 있습니다.따라서 컨트롤러/공장/지향 기능 내에 삽입할 때 다른 컨트롤러로 인스턴스화할 수 있습니다.앱당 한 번만 인스턴스화 됩니다.
서비스
단순히 서비스를 살펴보면서 어레이 프로토타입을 생각해 보십시오.서비스는 'new' 키워드를 사용하여 새로운 오브젝트를 인스턴스화하는 기능입니다. 및 할 수 .this키워드를 지정합니다.팩토리와 달리 아무것도 반환하지 않습니다(메서드/속성을 포함하는 개체를 반환).
app.service('MyService', function() {
//directly binding events to this context
this.myServiceFunction = function() {
//TO DO:
};
});
사용.
응용 프로그램 전체에서 단일 개체를 공유해야 할 때 사용합니다.예를 들어 인증된 사용자 상세, 공유 가능한 방법/데이터, 유틸리티 기능 등입니다.
프로바이더
프로바이더는 설정 가능한 서비스 오브젝트를 작성하기 위해 사용됩니다.설정하다하려면 을 합니다.$get()★★★★★★$get기능은 실행 단계에서 각도 단위로 실행됩니다.
app.provider('configurableService', function() {
var name = '';
//this method can be be available at configuration time inside app.config.
this.setName = function(newName) {
name = newName;
};
this.$get = function() {
var getName = function() {
return name;
};
return {
getName: getName //exposed object to where it gets injected.
};
};
});
사용.
수 있도록 하기 : API URL)와 같이 을 설정한다고 합니다.dev,stage ★★★★★★★★★★★★★★★★★」prod
메모
angular 설정 단계에서는 프로바이더만 사용할 수 있지만 서비스 및 공장에서는 사용할 수 없습니다.
이것으로 공장, 서비스, 프로바이더에 대한 이해가 명확해졌기를 바랍니다.
저에게 있어서, 이 모든 것이 같은 방식으로 작동한다는 것을 깨달았을 때 깨달았습니다. 즉, 무언가를 한 번 실행하고, 얻은 가치를 저장하며, 의존성 주입을 통해 참조할 때 동일한 저장된 가치를 토해내는 것입니다.
예를 들어 다음과 같습니다.
app.factory('a', fn);
app.service('b', fn);
app.provider('c', fn);
이 세 가지 차이는 다음과 같습니다.
a는, 으로부터 취득됩니다.fn.b은 " " 에서newfn.c은 처음에 를 들어서 '예'를 으로써 얻을 수newfn를 실행하고 나서, 「」를 합니다.$get의 .
즉, AngularJS 내부에는 캐시 오브젝트 같은 것이 존재하며, 각 인젝션의 값은 처음 주입되었을 때 한 번만 할당됩니다.또한 다음과 같습니다.
cache.a = fn()
cache.b = new fn()
cache.c = (new fn()).$get()
는 이 말을 사용합니다.this 중, ★★★★★★★★★★★★★★★★★★★★★★★★★★★★」this.$get프로바이더에 있습니다.
서비스 vs 프로바이더 vs 공장:
나는 그것을 단순하게 유지하려고 노력하고 있다.기본적인 JavaScript 개념에 관한 것입니다.
우선 Angular의 서비스에 대해 설명하겠습니다.JS!
서비스란?AngularJS에서 Service는 유용한 메서드 또는 속성을 저장할 수 있는 싱글톤 JavaScript 객체에 불과합니다.이 싱글톤 객체는 ngApp(Angular app) 기준으로 생성되며 현재 앱 내의 모든 컨트롤러에서 공유됩니다.Angularjs는 서비스 개체를 인스턴스화할 때 이 서비스 개체를 고유한 서비스 이름으로 등록합니다.따라서 서비스 인스턴스가 필요할 때마다 Angular는 레지스트리에서 이 서비스 이름을 검색하여 서비스 개체에 대한 참조를 반환합니다.서비스 오브젝트에서 메서드, 속성 접근 등을 호출할 수 있습니다.컨트롤러의 스코프 오브젝트에 속성이나 메서드도 추가할 수 있는지 의문이 생길 수 있습니다.서비스 오브젝트가 필요한 이유는 무엇입니까?답변: 서비스는 여러 컨트롤러 범위에서 공유됩니다.컨트롤러의 스코프 오브젝트에 몇 가지 속성/메서드를 넣으면 현재 스코프에서만 사용할 수 있습니다.그러나 서비스 객체에 메서드, 속성을 정의하면 해당 서비스를 주입하여 컨트롤러 범위 내에서 액세스 할 수 있습니다.
따라서 컨트롤러 범위가 3개일 경우 컨트롤러 A, 컨트롤러 B 및 컨트롤러 C로 설정하면 모든 컨트롤러가 동일한 서비스 인스턴스를 공유합니다.
<div ng-controller='controllerA'>
<!-- controllerA scope -->
</div>
<div ng-controller='controllerB'>
<!-- controllerB scope -->
</div>
<div ng-controller='controllerC'>
<!-- controllerC scope -->
</div>
서비스 작성 방법
AngularJ는 서비스를 등록하기 위한 다양한 방법을 제공합니다.여기서는 공장(..), 서비스(..), 공급자(..)의 3가지 방법을 중점적으로 다루겠습니다.;
공장 출하 시 기능:
공장 기능은 다음과 같이 정의할 수 있습니다.
factory('serviceName',function fnFactory(){ return serviceInstance;})
AngularJS는 serviceName과 JavaScript 함수의 두 가지 파라미터를 사용하는 'factory('serviceName', fnFactory)' 메서드를 제공합니다.Angular는 다음과 같은 함수 fnFactory()를 호출하여 서비스 인스턴스를 만듭니다.
var serviceInstace = fnFactory();
전달된 함수는 개체를 정의하고 해당 개체를 반환할 수 있습니다.각진JS는 첫 번째 인수로 전달되는 변수에 대한 이 개체 참조를 저장합니다.fnFactory에서 반환되는 모든 것은 serviceInstance에 바인드됩니다.오브젝트를 반환하는 대신 함수, 값 등을 반환할 수 있습니다.What will we returning 은 서비스인스턴스에서 사용할 수 있습니다.
예:
var app= angular.module('myApp', []);
//creating service using factory method
app.factory('factoryPattern',function(){
var data={
'firstName':'Tom',
'lastName':' Cruise',
greet: function(){
console.log('hello!' + this.firstName + this.lastName);
}
};
//Now all the properties and methods of data object will be available in our service object
return data;
});
서비스 기능:
service('serviceName',function fnServiceConstructor(){})
다른 방법으로는 서비스를 등록할 수 있습니다.유일한 차이점은 앵귤러(Angular)가JS는 서비스 오브젝트를 인스턴스화하려고 합니다.이 time angular는 'new' 키워드를 사용하며 생성자 함수를 다음과 같이 호출합니다.
var serviceInstance = new fnServiceConstructor();
컨스트럭터 함수에서는 서비스 오브젝트에 속성/메서드를 추가하기 위해 'this' 키워드를 사용할 수 있습니다.예:
//Creating a service using the service method
var app= angular.module('myApp', []);
app.service('servicePattern',function(){
this.firstName ='James';
this.lastName =' Bond';
this.greet = function(){
console.log('My Name is '+ this.firstName + this.lastName);
};
});
공급자 기능:
Provider() 함수는 서비스를 작성하는 다른 방법입니다.사용자에게 그리팅 메시지만 표시하는 서비스를 만들 수 있습니다.다만, 유저가 독자적인 그리팅 메시지를 설정할 수 있는 기능도 제공하고 싶다고 생각하고 있습니다.기술적인 용어로 구성 가능한 서비스를 만들고 싶습니다.어떻게 하면 좋을까요?앱이 커스텀 그리팅 메시지를 전달하고 Angularjs가 서비스 인스턴스를 만드는 공장/컨스트럭터 함수에서 사용할 수 있도록 하는 방법이 있을 것입니다.이 경우 provider() 함수는 작업을 수행합니다.provider() 함수를 사용하여 설정 가능한 서비스를 만들 수 있습니다.
아래와 같이 프로바이더 구문을 사용하여 구성 가능한 서비스를 생성할 수 있습니다.
/*step1:define a service */
app.provider('service',function serviceProviderConstructor(){});
/*step2:configure the service */
app.config(function configureService(serviceProvider){});
공급자 구문은 내부적으로 어떻게 작동합니까?
1. 프로바이더 오브젝트는 프로바이더 함수에서 정의한 컨스트럭터 함수를 사용하여 작성됩니다.
var serviceProvider = new serviceProviderConstructor();
2. app.config()에서 전달한 함수를 실행합니다.이것을 설정 단계라고 부릅니다.이 단계에서는 서비스를 커스터마이즈할 수 있습니다.
configureService(serviceProvider);
3. 마지막으로 서비스 인스턴스는 service Provider의 $get 메서드를 호출하여 생성됩니다.
serviceInstance = serviceProvider.$get()
다음 구문을 사용하여 서비스를 작성하기 위한 샘플코드:
var app= angular.module('myApp', []);
app.provider('providerPattern',function providerConstructor(){
//this function works as constructor function for provider
this.firstName = 'Arnold ';
this.lastName = ' Schwarzenegger' ;
this.greetMessage = ' Welcome, This is default Greeting Message' ;
//adding some method which we can call in app.config() function
this.setGreetMsg = function(msg){
if(msg){
this.greetMessage = msg ;
}
};
//We can also add a method which can change firstName and lastName
this.$get = function(){
var firstName = this.firstName;
var lastName = this.lastName ;
var greetMessage = this.greetMessage;
var data={
greet: function(){
console.log('hello, ' + firstName + lastName+'! '+ greetMessage);
}
};
return data ;
};
});
app.config(
function(providerPatternProvider){
providerPatternProvider.setGreetMsg(' How do you do ?');
}
);
요약:.
공장에서는 서비스 인스턴스를 반환하는 공장 함수를 사용합니다.serviceInstance = fnFactory();
서비스는 생성자 함수를 사용하고 Angular는 서비스 인스턴스를 생성하기 위해 'new' 키워드를 사용하여 이 생성자 함수를 호출합니다.serviceInstance = new fnServiceConstructor();
프로바이더는 providerConstructor 함수를 정의합니다.이 providerConstructor 함수는 공장 함수 $get을 정의합니다.서비스 오브젝트를 작성하기 위해 $get()을 호출하는 각도.공급자 구문은 서비스 오브젝트가 인스턴스화되기 전에 설정할 수 있는 추가 장점이 있습니다.serviceInstance = $get();
여기 있는 몇몇 사람들이 지적한 바와 같이 공장, 프로바이더, 서비스, 심지어 가치와 상수까지 동일한 버전입니다. 더 인 것을 할 수 있습니다.provider다음과 같이 합니다.
다음은 이 이미지의 기사입니다.
공장
Angular를 주세요.JS a 함수, 각도JS는 팩토리 요청 시 반환값을 캐시하고 주입합니다.
예:
app.factory('factory', function() {
var name = '';
// Return value **is** the object that will be injected
return {
name: name;
}
})
사용방법:
app.controller('ctrl', function($scope, factory) {
$scope.name = factory.name;
});
서비스
Angular를 주세요.JS a 함수, 각도JS가 새로 호출하여 인스턴스화합니다.그것은 Angular의 경우이다.서비스가 요청될 때 캐시되고 주입되는 JS 생성.서비스를 인스턴스화하기 위해 new가 사용되었기 때문에 키워드 this는 유효하며 인스턴스를 나타냅니다.
예:
app.service('service', function() {
var name = '';
this.setName = function(newName) {
name = newName;
}
this.getName = function() {
return name;
}
});
사용방법:
app.controller('ctrl', function($scope, service) {
$scope.name = service.getName();
});
프로바이더
Angular를 .JS a는 JS를 합니다.$get반환값 반환값입니다.$get서비스 요청 시 캐시 및 주입되는 함수입니다.
프로바이더를 사용하면 Angular 전에 프로바이더를 구성할 수 있습니다.JS가 호출하다$get츠요시
예:
app.provider('provider', function() {
var name = '';
this.setName = function(newName) {
name = newName;
}
this.$get = function() {
return {
name: name
}
}
})
사용방법(컨트롤러 내 주입식)
app.controller('ctrl', function($scope, provider) {
$scope.name = provider.name;
});
보다 )$get 가능을 .
app.config(function(providerProvider) {
providerProvider.setName('John');
});
프로바이더와 놀다 보면 재미있는 점이 눈에 띄었다.
주입 가능성의 가시성은 서비스 및 공장 공급자와는 다릅니다.AngularJS를 로 예: Angular)JS의 "이러한"은 다음과 같습니다(「Manager:myApp.constant('a', 'Robert');서비스, 공장 및 공급자에 주입할 수 있습니다.
, AngularJS 값을 경우: JS의 "값"을 선언하는 경우(예:myApp.value('b', {name: 'Jones'});서비스나 공장에는 주입할 수 있지만 공급자 생성 기능에는 주입할 수 없습니다. ,, 할 수 있습니다.$get사용자가 프로바이더용으로 정의한 함수.이는 Angular에 설명되어 있습니다.JS에 관한 것입니다.값 및 상수 메서드에 대한 섹션의 %provid 페이지에서 찾을 수 있습니다.
<div ng-app="MyAppName">
<div ng-controller="MyCtrl">
<p>from Service: {{servGreet}}</p>
<p>from Provider: {{provGreet}}</p>
</div>
</div>
<script>
var myApp = angular.module('MyAppName', []);
myApp.constant('a', 'Robert');
myApp.value('b', {name: 'Jones'});
myApp.service('greetService', function(a,b) {
this.greeter = 'Hi there, ' + a + ' ' + b.name;
});
myApp.provider('greetProvider', function(a) {
this.firstName = a;
this.$get = function(b) {
this.lastName = b.name;
this.fullName = this.firstName + ' ' + this.lastName;
return this;
};
});
function MyCtrl($scope, greetService, greetProvider) {
$scope.servGreet = greetService.greeter;
$scope.provGreet = greetProvider.fullName;
}
</script>
이것은 초보자에게 매우 혼란스러운 부분이며 나는 쉬운 말로 그것을 명확히 하려고 노력했다.
AngularJS Service: 유틸리티 기능을 컨트롤러의 서비스 참조와 공유하는 데 사용됩니다.서비스는 본질적으로 싱글톤이기 때문에 브라우저에 생성되는 인스턴스는 1개뿐이며 페이지 전체에서 동일한 참조가 사용됩니다.
서비스에서는 이 오브젝트를 사용하여 속성으로 함수 이름을 만듭니다.
AngularJS Factory: Factory의 목적도 Service와 동일하지만, 이 경우 새로운 개체를 만들고 이 개체의 속성으로 기능을 추가한 후 마지막에 이 개체를 반환합니다.
AngularJS Provider: 목적은 동일하지만 Provider는 $get 함수의 출력을 제공합니다.
서비스, 공장 및 프로바이더의 정의 및 사용에 대해서는 http://www.dotnetfunda.com/articles/show/3156/difference-between-angularjs-service-factory-and-provider에서 설명합니다.
이 차이를 이해하기 위한 최선의 가장 간단한 방법은 다음과 같습니다.
var service, factory;
service = factory = function(injection) {}
각도JS는 특정 컴포넌트를 인스턴스화합니다(간소화).
// service
var angularService = new service(injection);
// factory
var angularFactory = factory(injection);
이 서비스를 위해 Angular는JS 컴포넌트는 서비스 선언 함수로 표현되는 클래스의 객체인스턴스입니다공장의 경우 공장 신고 기능에서 반환된 결과입니다.공장에서는 서비스와 동일하게 동작할 수 있습니다.
var factoryAsService = function(injection) {
return new function(injection) {
// Service content
}
}
가장 간단한 사고방식은 다음과 같습니다.
- 서비스는 싱글톤 오브젝트 인스턴스입니다.코드에 싱글톤 개체를 제공하려면 서비스를 사용하십시오.
- 공장은 클래스입니다.코드에 커스텀클래스를 제공하려면 팩토리를 사용합니다(서비스는 이미 인스턴스화되어 있기 때문에 서비스를 사용할 수 없습니다).
공장에서의 「클래스」의 예는, 프로바이더의 차이에 가세해 코멘트에 기재되어 있습니다.
이 문제에 대한 나의 해명:
기본적으로 위의 모든 유형(서비스, 공장, 공급자 등)은 구식의 글로벌 변수와 마찬가지로 글로벌 변수(물론 애플리케이션 전체에 대해 글로벌)를 생성하고 구성할 뿐입니다.
글로벌 변수는 권장되지 않지만 이러한 글로벌 변수의 실제 사용법은 변수를 관련 컨트롤러에 전달함으로써 의존관계 주입을 제공하는 것입니다.
"글로벌 변수"에 대한 값을 만드는 데는 여러 가지 수준의 복잡성이 있습니다.
이는 다른 언어의 상수(JavaScript에 없는 상수)와 마찬가지로 전체 애플리케이션 중에 수정해서는 안 되는 실제 상수를 정의합니다.- ★★★
이는 변경 가능한 값 또는 개체로, 다른 서비스 또는 공장을 작성할 때 삽입할 수 있는 글로벌 변수로 기능합니다(자세한 내용은 참조).다만, 「리터럴치」여야 합니다.즉, 실제의 값을 기입할 필요가 있어, 계산이나 프로그래밍 로직을 사용할 수 없습니다(즉, 39, myText, {prop: "value"}는 OK, 2+2는 OK). - 출하시★★★
보다 일반적인 값은 즉시 계산할 수 있습니다.Angular Angular에합니다.값을 와 Angular는 JSJS를합니다.JS는 이 명령을 실행하여 지정된 변수에 반환값을 저장합니다.
오브젝트(이 경우 서비스와 유사하게 기능함) 또는 함수(콜백함수로 변수에 저장됨)를 반환할 수 있습니다.
서비스는 값이 오브젝트일 경우에만 유효한 공장 출하시의 보다 제거된 버전으로, 이 키워드를 사용하여 오브젝트 속성을 선언 및 액세스 할 수 있을 뿐만 아니라 (컨스트럭터인 것처럼) 함수에 직접 로직을 쓸 수 있습니다.
공장 출하 시 단순화된 서비스와는 달리 프로바이더는 보다 복잡하고 유연한 방법으로 "글로벌" 변수를 초기화할 수 있습니다.가장 유연한 방법은 app.config에서 값을 설정하는 옵션입니다.
이 키워드를 사용하여 선언된 속성을 가진 함수를 프로바이더에 전달함으로써 서비스와 프로바이더의 조합을 사용하는 것과 같이 동작합니다.이 함수는 에서 사용할 수 있습니다.app.config
그런 다음 Angular에 의해 실행되는 별도의 $.get 함수를 가져야 합니다.위의 속성을 설정한 후 JS는app.config이 $.get 함수는 위의 공장 출하 시처럼 동작하며 반환값은 "글로벌" 변수를 초기화하기 위해 사용됩니다.
제 이해는 아래와 같습니다.
공장 출하 시:공장 내부에 객체를 생성하여 반환하기만 하면 됩니다.
서비스:
이 키워드를 사용하여 함수를 정의하는 표준 함수만 있습니다.
프로바이더:
게 요.$get데이터를 반환하는 개체를 가져오는 데 사용할 수 있습니다.
- 오브젝트 작성 방법에는 Value, Factory, Service, Provider 및 Constant의 5가지 레시피 유형이 있습니다.
- 가장 일반적으로 사용되는 레시피는 팩토리와 서비스입니다.이 둘의 유일한 차이점은 서비스 레시피가 커스텀타입의 오브젝트에 대해 더 잘 동작하는 반면 팩토리는 JavaScript의 프리미티브와 함수를 생성할 수 있다는 것입니다.
- 프로바이더 레시피가 핵심 레시피 유형이고 다른 레시피는 모두 통사설탕입니다.
- 프로바이더는 가장 복잡한 레시피 유형입니다.글로벌 구성이 필요한 재사용 가능한 코드를 빌드하지 않는 한 필요하지 않습니다.
SO의 최선의 답변:
https://stackoverflow.com/a/26924234/165673 (<--GOOD) https://stackoverflow.com/a/27263882/165673
https://stackoverflow.com/a/16566144/165673https.com/a/16566144/165673
이미 다 좋은 답이야.Service와 Factory에서 몇 가지 포인트를 추가하고 싶습니다.서비스/공장 간의 차이와 함께.또, 다음과 같은 질문도 할 수 있습니다.
- 서비스를 이용할까요, 아니면 공장을 이용할까요?뭐가 다른데?
- 그들은 같은 행동을 하나요 아니면 같은 행동을 하나요?
먼저 서비스와 공장 간의 차이점부터 살펴보겠습니다.
둘 다 싱글톤입니다.Angular는 이러한 항목을 처음 종속성으로 발견할 때마다 단일 서비스/공장 인스턴스를 생성합니다.인스턴스가 생성되면 동일한 인스턴스가 영원히 사용됩니다.
동작을 가진 개체를 모델링하는 데 사용할 수 있습니다.둘 다 메서드, 내부 상태 변수 등을 가질 수 있습니다.그 코드를 쓰는 방법은 다르겠지만요.
서비스:
Angular를 합니다.yourServiceName()몇 가지 의미가 있습니다.
- 함수 및 인스턴스 변수는 다음 속성입니다.
this. - 이치노가 Angular를 호출하는
new yourServiceName(을.this모든 속성을 가진 오브젝트입니다.
예:
angular.service('MyService', function() {
this.aServiceVariable = "Ved Prakash"
this.aServiceMethod = function() {
return //code
};
});
가 이 Angular를 할 때
MyService""를 .MyService마이 서비스aServiceMethod().
다음 사항에 주의하십시오.
생성된 서비스는 객체이기 때문에 그 안에 있는 메서드가 호출될 때 이를 참조할 수 있습니다.
angular.service('ScoreKeeper', function($http) {
this.score = 0;
this.getScore = function() {
return this.score;
};
this.setScore = function(newScore) {
this.score = newScore;
};
this.addOne = function() {
this.score++;
};
});
하고 .ScoreKeeper.setScore는, 다음과 같습니다.$http.get('/score').then(ScoreKeeper.setScore).이 있다면, 그것은 '불필요하다'는이다.ScoreKeeper.setScore.this 묶이다null그러면 오류가 발생합니다. 은 ★★★★★★★★★★★★★★★★★★★★★★★★★.$http.get('/score').then(ScoreKeeper.setScore.bind(ScoreKeeper))서비스 방법으로 이 기능을 사용하는지 여부에 관계없이, 그 기능을 사용할 때는 주의해 주세요.
에서의 값 반환:
JavaScript 의 JavaScript가 (i.e., an Object) constructor발신자가 이 인스턴스 대신 해당 오브젝트를 가져옵니다.
수 .「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」factoryservice작합니니다다
angular.service('MyService', function($http) {
var api = {};
api.aServiceMethod= function() {
return $http.get('/users');
};
return api;
});
따라서 Angular가 새로운 MyService()를 사용하여 서비스를 구축하면 MyService 인스턴스 대신 api 객체를 가져옵니다.
이는 모든 복잡한 값(개체, 함수)에 대한 동작이지만 원시 유형에 대한 동작은 아닙니다.
공장:
팩토리는 값을 반환하는 일반적인 오래된 함수입니다.리턴 값은 공장에 따라 달라지는 물건에 주입되는 값입니다.Angular의 일반적인 공장 패턴은 다음과 같이 함수가 있는 개체를 속성으로 반환하는 것입니다.
angular.factory('MyFactory', function($http) {
var api = {};
api.aFactoryMethod= function() {
return $http.get('/users');
};
return api;
});
공장 종속성에 대해 주입된 값은 공장 반환 값이며 개체일 필요는 없습니다.함수일 수 있습니다.
위의 1개 및 2개 질문에 대한 답변:
대부분의 경우, 모든 일에 공장을 이용하는 것을 고수하세요.그들의 행동은 이해하기 쉽다.값을 반환할지 말지는 선택의 여지가 없으며, 잘못해도 버그가 발생하지 않습니다.
다만, 그것들을 주입하는 것에 대해서는, 「서비스」라고 부르고 있습니다.
서비스/공장에서의 동작은 매우 비슷하며, 어느 쪽이라도 좋다고 하는 사람도 있습니다.어느 정도 그렇긴 한데, 존 파파 스타일 가이드의 조언을 따라 공장에 계속 다니는 게 더 쉬울 것 같아요.**
또, 공장에서는 기능/원본을 작성할 수 있습니다만, 서비스에서는 작성할 수 없습니다.Epokk에 기반한 jsFiddle을 확인하십시오.http://jsfiddle.net/skeller88/PxdSP/1351/
공장에서는 호출할 수 있는 함수를 반환합니다.
myApp.factory('helloWorldFromFactory', function() {
return function() {
return "Hello, World!";
};
});
공장에서는 호출 가능한 메서드를 사용하여 개체를 반환할 수도 있습니다.
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!";
}
};
});
서비스는 호출 가능한 메서드를 가진 개체를 반환합니다.
myApp.service('helloWorldFromService', function() {
this.sayHello = function() {
return "Hello, World!";
};
});
상세한 것에 대하여는, 차이에 관한 투고를 참조해 주세요.http://www.shanemkeller.com/tldr-services-vs-factories-in-angular/
이미 좋은 답변들이 있지만, 저는 이것만 공유하고 싶습니다.
우선: 프로바이더는 델의 IT부문을 작성하기 위한 방법/레시피입니다.service 객체) $(Angula) $injector(Angula)에 의해 JS(IoC)의 IoC입니다.
그리고 값, 공장, 서비스 및 상수(4가지 방법) - 공급자 방식/수신보다 구문 설탕.
Service vs Factory부품에 대해서는, https://www.youtube.com/watch?v=BLzNCkPn3ao 를 참조해 주세요.
서비스란new 일을입니다.
- 완전히 새로운 오브젝트 생성
- 링크에 접속하다.
prototype표시 context로로 합니다.this- 를 반환한다.
this
팩토리에는 팩토리 패턴의 모든 것이 포함됩니다.이 서비스에서는 오브젝트를 반환하는 기능이 포함되어 있습니다.
- 다른 서비스를 사용할 수 있는 능력(의존관계가 있음)
- 서비스 초기화
- 초기화 지연/초기화
이 심플하고 짧은 비디오:프로바이더에 대해서도 설명합니다.https://www.youtube.com/watch?v=HvTZbQ_hUZY (여기서 공장에서의 프로바이더로의 이행 방법을 확인할 수 있습니다)
공급자 레시피는 앱이 완전히 시작/초기화되기 전에 앱 구성에서 주로 사용됩니다.
이 게시물들을 다 읽고 난 후, 그것은 나를 더 혼란스럽게 만들었다.하지만 여전히 모든 것이 가치 있는 정보입니다.마침내 나는 간단한 비교와 함께 정보를 줄 다음 표를 찾았다.
- 인젝터는 레시피를 사용하여 두 가지 유형의 개체, 즉 서비스와 특수 목적 개체를 만듭니다.
- 오브젝트 작성 방법에는 Value, Factory, Service, Provider 및 Constant의 5가지 레시피 유형이 있습니다.
- 가장 일반적으로 사용되는 레시피는 팩토리와 서비스입니다.이 둘의 유일한 차이점은 서비스 레시피가 커스텀타입의 오브젝트에 대해 더 잘 동작하는 반면 팩토리는 JavaScript의 프리미티브와 함수를 생성할 수 있다는 것입니다.
- 프로바이더 레시피가 핵심 레시피 유형이고 다른 레시피는 모두 통사설탕입니다.
- 프로바이더는 가장 복잡한 레시피 유형입니다.글로벌 구성이 필요한 재사용 가능한 코드를 빌드하지 않는 한 필요하지 않습니다.
- 컨트롤러를 제외한 모든 특수 목적 오브젝트는 공장 출하 시 레시피를 통해 정의됩니다.
초보자용으로는 다음과 같습니다.- 이것은 올바른 사용 사례는 아니지만, 대략적으로 이 세 가지에 대한 사용 사례는 다음과 같습니다.
- angular module config 함수를 provider로 작성해야 합니다.
angular.module('myApp').config(function($testProvider){
$testProvider.someFunction();
})- Ajax 콜 또는 서드파티 연동이 서비스여야 합니다.
- 데이터 조작의 경우 팩토리로 작성
기본적인 시나리오에서는 공장 및 서비스도 동일하게 동작합니다.
여기 AngularjS의 객체 팩토리용 코드 템플릿으로 제가 생각해낸 브로일러 플레이트 코드가 있습니다.예를 들어 Car/Car Factory를 예로 들어 설명했습니다.컨트롤러에서 간단한 구현 코드를 만듭니다.
<script>
angular.module('app', [])
.factory('CarFactory', function() {
/**
* BroilerPlate Object Instance Factory Definition / Example
*/
this.Car = function() {
// initialize instance properties
angular.extend(this, {
color : null,
numberOfDoors : null,
hasFancyRadio : null,
hasLeatherSeats : null
});
// generic setter (with optional default value)
this.set = function(key, value, defaultValue, allowUndefined) {
// by default,
if (typeof allowUndefined === 'undefined') {
// we don't allow setter to accept "undefined" as a value
allowUndefined = false;
}
// if we do not allow undefined values, and..
if (!allowUndefined) {
// if an undefined value was passed in
if (value === undefined) {
// and a default value was specified
if (defaultValue !== undefined) {
// use the specified default value
value = defaultValue;
} else {
// otherwise use the class.prototype.defaults value
value = this.defaults[key];
} // end if/else
} // end if
} // end if
// update
this[key] = value;
// return reference to this object (fluent)
return this;
}; // end this.set()
}; // end this.Car class definition
// instance properties default values
this.Car.prototype.defaults = {
color: 'yellow',
numberOfDoors: 2,
hasLeatherSeats: null,
hasFancyRadio: false
};
// instance factory method / constructor
this.Car.prototype.instance = function(params) {
return new
this.constructor()
.set('color', params.color)
.set('numberOfDoors', params.numberOfDoors)
.set('hasFancyRadio', params.hasFancyRadio)
.set('hasLeatherSeats', params.hasLeatherSeats)
;
};
return new this.Car();
}) // end Factory Definition
.controller('testCtrl', function($scope, CarFactory) {
window.testCtrl = $scope;
// first car, is red, uses class default for:
// numberOfDoors, and hasLeatherSeats
$scope.car1 = CarFactory
.instance({
color: 'red'
})
;
// second car, is blue, has 3 doors,
// uses class default for hasLeatherSeats
$scope.car2 = CarFactory
.instance({
color: 'blue',
numberOfDoors: 3
})
;
// third car, has 4 doors, uses class default for
// color and hasLeatherSeats
$scope.car3 = CarFactory
.instance({
numberOfDoors: 4
})
;
// sets an undefined variable for 'hasFancyRadio',
// explicitly defines "true" as default when value is undefined
$scope.hasFancyRadio = undefined;
$scope.car3.set('hasFancyRadio', $scope.hasFancyRadio, true);
// fourth car, purple, 4 doors,
// uses class default for hasLeatherSeats
$scope.car4 = CarFactory
.instance({
color: 'purple',
numberOfDoors: 4
});
// and then explicitly sets hasLeatherSeats to undefined
$scope.hasLeatherSeats = undefined;
$scope.car4.set('hasLeatherSeats', $scope.hasLeatherSeats, undefined, true);
// in console, type window.testCtrl to see the resulting objects
});
</script>
여기 더 간단한 예가 있습니다.위도와 경도를 나타내는 "위치" 객체를 기대하는 서드파티 라이브러리를 사용하지만 객체 속성은 다릅니다.벤더 코드를 해킹하고 싶지 않았기 때문에, 전달하고 있던 「위치」 오브젝트를 조정했습니다.
angular.module('app')
.factory('PositionFactory', function() {
/**
* BroilerPlate Object Instance Factory Definition / Example
*/
this.Position = function() {
// initialize instance properties
// (multiple properties to satisfy multiple external interface contracts)
angular.extend(this, {
lat : null,
lon : null,
latitude : null,
longitude : null,
coords: {
latitude: null,
longitude: null
}
});
this.setLatitude = function(latitude) {
this.latitude = latitude;
this.lat = latitude;
this.coords.latitude = latitude;
return this;
};
this.setLongitude = function(longitude) {
this.longitude = longitude;
this.lon = longitude;
this.coords.longitude = longitude;
return this;
};
}; // end class definition
// instance factory method / constructor
this.Position.prototype.instance = function(params) {
return new
this.constructor()
.setLatitude(params.latitude)
.setLongitude(params.longitude)
;
};
return new this.Position();
}) // end Factory Definition
.controller('testCtrl', function($scope, PositionFactory) {
$scope.position1 = PositionFactory.instance({latitude: 39, longitude: 42.3123});
$scope.position2 = PositionFactory.instance({latitude: 39, longitude: 42.3333});
}) // end controller
;
이 페이지와 매뉴얼(마지막으로 봤을 때보다 크게 개선된 것 같음)을 참고하여 가치, 상수, 공장 및 풀 블로우 프로바이더의 5가지 맛 중 4가지를 사용한 다음과 같은 실제(-ish) 세계 데모를 작성했습니다.
HTML:
<div ng-controller="mainCtrl as main">
<h1>{{main.title}}*</h1>
<h2>{{main.strapline}}</h2>
<p>Earn {{main.earn}} per click</p>
<p>You've earned {{main.earned}} by clicking!</p>
<button ng-click="main.handleClick()">Click me to earn</button>
<small>* Not actual money</small>
</div>
앱.
var app = angular.module('angularProviders', []);
// A CONSTANT is not going to change
app.constant('range', 100);
// A VALUE could change, but probably / typically doesn't
app.value('title', 'Earn money by clicking');
app.value('strapline', 'Adventures in ng Providers');
// A simple FACTORY allows us to compute a value @ runtime.
// Furthermore, it can have other dependencies injected into it such
// as our range constant.
app.factory('random', function randomFactory(range) {
// Get a random number within the range defined in our CONSTANT
return Math.random() * range;
});
// A PROVIDER, must return a custom type which implements the functionality
// provided by our service (see what I did there?).
// Here we define the constructor for the custom type the PROVIDER below will
// instantiate and return.
var Money = function(locale) {
// Depending on locale string set during config phase, we'll
// use different symbols and positioning for any values we
// need to display as currency
this.settings = {
uk: {
front: true,
currency: '£',
thousand: ',',
decimal: '.'
},
eu: {
front: false,
currency: '€',
thousand: '.',
decimal: ','
}
};
this.locale = locale;
};
// Return a monetary value with currency symbol and placement, and decimal
// and thousand delimiters according to the locale set in the config phase.
Money.prototype.convertValue = function(value) {
var settings = this.settings[this.locale],
decimalIndex, converted;
converted = this.addThousandSeparator(value.toFixed(2), settings.thousand);
decimalIndex = converted.length - 3;
converted = converted.substr(0, decimalIndex) +
settings.decimal +
converted.substr(decimalIndex + 1);
converted = settings.front ?
settings.currency + converted :
converted + settings.currency;
return converted;
};
// Add supplied thousand separator to supplied value
Money.prototype.addThousandSeparator = function(value, symbol) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, symbol);
};
// PROVIDER is the core recipe type - VALUE, CONSTANT, SERVICE & FACTORY
// are all effectively syntactic sugar built on top of the PROVIDER construct
// One of the advantages of the PROVIDER is that we can configure it before the
// application starts (see config below).
app.provider('money', function MoneyProvider() {
var locale;
// Function called by the config to set up the provider
this.setLocale = function(value) {
locale = value;
};
// All providers need to implement a $get method which returns
// an instance of the custom class which constitutes the service
this.$get = function moneyFactory() {
return new Money(locale);
};
});
// We can configure a PROVIDER on application initialisation.
app.config(['moneyProvider', function(moneyProvider) {
moneyProvider.setLocale('uk');
//moneyProvider.setLocale('eu');
}]);
// The ubiquitous controller
app.controller('mainCtrl', function($scope, title, strapline, random, money) {
// Plain old VALUE(s)
this.title = title;
this.strapline = strapline;
this.count = 0;
// Compute values using our money provider
this.earn = money.convertValue(random); // random is computed @ runtime
this.earned = money.convertValue(0);
this.handleClick = function() {
this.count ++;
this.earned = money.convertValue(random * this.count);
};
});
작업 데모
이 답변은 주제/질문에 대한 것입니다.
공장, 서비스 및 상수 - 구문설탕을 프로바이더의 레시피 위에 올려놓았을 뿐입니까?
또는
공장, 공장 및 공급자가 내부적으로 어떻게 동일한지
기본적으로 일어나는 일은
a를 때factory()은 당신을 흥분시킨다.function 번째 $get반품)provider(name, {$get:factoryFn })취득하는 것은 이것뿐이지만, 그 이외의 재산이나 자산은 없습니다.provider수 (설정할 수 없습니다.)
공장 소스코드
function factory(name, factoryFn, enforce) {
return provider(name, {
$get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
});
};
할 때service()를 factory()와 합니다.function 삽입을 .constructor한다).
소스 서비스 코드
function service(name, constructor) {
return factory(name, ['$injector', function($injector) {
return $injector.instantiate(constructor);
}]);
};
따라서 기본적으로 두 경우 모두 최종적으로 제공자 $get을 제공받은 함수로 설정할 수 있습니다.단, 원래 config block에 대해 provider()에서 제공할 수 있는 $get 이상의 추가 정보를 제공할 수 있습니다.
, 사용 해야 합니다.
1. service인 경우
2. factory "Discription" 서비스 됩니다.
// factory.js ////////////////////////////
(function() {
'use strict';
angular
.module('myApp.services')
.factory('xFactory', xFactoryImp);
xFactoryImp.$inject = ['$http'];
function xFactoryImp($http) {
var fac = function (params) {
this._params = params; // used for query params
};
fac.prototype.nextPage = function () {
var url = "/_prc";
$http.get(url, {params: this._params}).success(function(data){ ...
}
return fac;
}
})();
// service.js //////////////////////////
(function() {
'use strict';
angular
.module('myApp.services')
.service('xService', xServiceImp);
xServiceImp.$inject = ['$http'];
function xServiceImp($http) {
this._params = {'model': 'account','mode': 'list'};
this.nextPage = function () {
var url = "/_prc";
$http.get(url, {params: this._params}).success(function(data){ ...
}
}
})();
및 사용방법:
controller: ['xFactory', 'xService', function(xFactory, xService){
// books = new instance of xFactory for query 'book' model
var books = new xFactory({'model': 'book', 'mode': 'list'});
// accounts = new instance of xFactory for query 'accounts' model
var accounts = new xFactory({'model': 'account', 'mode': 'list'});
// accounts2 = accounts variable
var accounts2 = xService;
...
파티에 조금 늦었다.그러나 공장, 서비스 및 프로바이더의 방법론을 사용하여 Angular JS Custom Services를 개발하는 방법을 배우고 싶은(또는 명확성을 갖춘) 사람에게는 이 방법이 더 도움이 된다고 생각했습니다.
나는 Angular를 개발하기 위한 공장, 서비스, 프로바이더 방법론에 대해 명확하게 설명하는 이 비디오를 발견했다.JS 커스텀 서비스:
https://www.youtube.com/watch?v=oUXku28ex-M
소스 코드: http://www.techcbt.com/Post/353/Angular-JS-basics/how-to-develop-angularjs-custom-service
여기에 게시된 코드는 위 소스에서 바로 복사하여 독자들에게 도움이 됩니다.
「팩토리」베이스의 커스텀서비스의 코드는 다음과 같습니다(콜링 http 서비스와 함께 동기 버전과 비동기 버전 모두에 대응합니다).
var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcFactory',
function($scope, calcFactory) {
$scope.a = 10;
$scope.b = 20;
$scope.doSum = function() {
//$scope.sum = calcFactory.getSum($scope.a, $scope.b); //synchronous
calcFactory.getSum($scope.a, $scope.b, function(r) { //aynchronous
$scope.sum = r;
});
};
}
]);
app.factory('calcFactory', ['$http', '$log',
function($http, $log) {
$log.log("instantiating calcFactory..");
var oCalcService = {};
//oCalcService.getSum = function(a,b){
// return parseInt(a) + parseInt(b);
//};
//oCalcService.getSum = function(a, b, cb){
// var s = parseInt(a) + parseInt(b);
// cb(s);
//};
oCalcService.getSum = function(a, b, cb) { //using http service
$http({
url: 'http://localhost:4467/Sum?a=' + a + '&b=' + b,
method: 'GET'
}).then(function(resp) {
$log.log(resp.data);
cb(resp.data);
}, function(resp) {
$log.error("ERROR occurred");
});
};
return oCalcService;
}
]);커스텀 서비스의 "서비스" 방법론의 코드(이것은 '공장 출하시'와 매우 유사하지만 구문 관점과는 다릅니다):
var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcService', function($scope, calcService){
$scope.a = 10;
$scope.b = 20;
$scope.doSum = function(){
//$scope.sum = calcService.getSum($scope.a, $scope.b);
calcService.getSum($scope.a, $scope.b, function(r){
$scope.sum = r;
});
};
}]);
app.service('calcService', ['$http', '$log', function($http, $log){
$log.log("instantiating calcService..");
//this.getSum = function(a,b){
// return parseInt(a) + parseInt(b);
//};
//this.getSum = function(a, b, cb){
// var s = parseInt(a) + parseInt(b);
// cb(s);
//};
this.getSum = function(a, b, cb){
$http({
url: 'http://localhost:4467/Sum?a=' + a + '&b=' + b,
method: 'GET'
}).then(function(resp){
$log.log(resp.data);
cb(resp.data);
},function(resp){
$log.error("ERROR occurred");
});
};
}]);커스텀 서비스의 「프로바이더」방식 코드(설정 가능한 서비스를 개발하는 경우에 필요):
var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcService', function($scope, calcService){
$scope.a = 10;
$scope.b = 20;
$scope.doSum = function(){
//$scope.sum = calcService.getSum($scope.a, $scope.b);
calcService.getSum($scope.a, $scope.b, function(r){
$scope.sum = r;
});
};
}]);
app.provider('calcService', function(){
var baseUrl = '';
this.config = function(url){
baseUrl = url;
};
this.$get = ['$log', '$http', function($log, $http){
$log.log("instantiating calcService...")
var oCalcService = {};
//oCalcService.getSum = function(a,b){
// return parseInt(a) + parseInt(b);
//};
//oCalcService.getSum = function(a, b, cb){
// var s = parseInt(a) + parseInt(b);
// cb(s);
//};
oCalcService.getSum = function(a, b, cb){
$http({
url: baseUrl + '/Sum?a=' + a + '&b=' + b,
method: 'GET'
}).then(function(resp){
$log.log(resp.data);
cb(resp.data);
},function(resp){
$log.error("ERROR occurred");
});
};
return oCalcService;
}];
});
app.config(['calcServiceProvider', function(calcServiceProvider){
calcServiceProvider.config("http://localhost:4467");
}]);마지막으로 위의 서비스 중 하나와 함께 작동하는 UI입니다.
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" ></script>
<script type="text/javascript" src="t03.js"></script>
</head>
<body ng-app="app">
<div ng-controller="emp">
<div>
Value of a is {{a}},
but you can change
<input type=text ng-model="a" /> <br>
Value of b is {{b}},
but you can change
<input type=text ng-model="b" /> <br>
</div>
Sum = {{sum}}<br>
<button ng-click="doSum()">Calculate</button>
</div>
</body>
</html>확실히 하기 위해서, 앵글에서JS 소스에서는 서비스가 공장 함수를 호출하고 다음으로 공급자 함수를 호출하는 것을 볼 수 있습니다.
function factory(name, factoryFn) {
return provider(name, { $get: factoryFn });
}
function service(name, constructor) {
return factory(name, ['$injector', function($injector) {
return $injector.instantiate(constructor);
}]);
}
Angular에서 비즈니스 로직을 처리하는 세 가지 방법에 대해 설명하겠습니다.간단한 JS: (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'] //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>
서비스 특징:
- 게으른 인스턴스화:만약 그것이 주입되지 않는다면 그것은 결코 인스턴스화되지 않습니다.따라서 사용하려면 모듈에 주입해야 합니다.
- 싱글톤:여러 모듈에 삽입된 경우 모두 특정 인스턴스에 액세스할 수 있습니다.따라서 서로 다른 컨트롤러 간에 데이터를 공유하는 것이 매우 편리합니다.
공장
먼저 다음 구문을 살펴보겠습니다.
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는 설정이 전혀 필요 없는 바로가기용으로 사용됩니다.
프로바이더
먼저 구문을 다시 한 번 살펴보겠습니다.
angular.module('ProviderModule', [])
.controller('ProviderModuleController', ProviderModuleController)
.provider('ServiceProvider', ServiceProvider)
.config(Config); //optional
Config.$inject = ['ServiceProvider'];
function Config(ServiceProvider) {
ServiceProvider.defaults.maxItems = 10; //some default value
}
ProviderModuleController.$inject = ['ServiceProvider'];
function ProviderModuleController(ServiceProvider) {
//some methods
}
function ServiceProvider() {
var provider = this;
provider.defaults = {
maxItems: 10
};
provider.$get = function () {
var someList = new someListService(provider.defaults.maxItems);
return someList;
};
}
}
프로바이더의 특징:
- 공급자는 Angular에서 가장 유연한 서비스 생성 방법입니다.
- 동적인 설정이 가능한 팩토리를 작성할 수 있을 뿐만 아니라 팩토리를 사용할 때 프로바이더 방식을 사용하여 어플리케이션 전체의 부트스트래핑으로 팩토리를 커스터마이즈할 수 있었습니다.
- 그 후, 커스텀 설정으로 애플리케이션 전체에서 팩토리를 사용할 수 있습니다.기동하기 이할 수 .를 설정했을 때 .
.service★★★★★★★★★★★★★★★★★」.factory★★★★★★★★★★★★★★★★★★. $get는 공급자인스턴스에 직접 연결된 함수입니다.그 기능은 공장에서의 기능입니다.다시 말해, 우리가 사용하는 것과 같은 것입니다..factory방법.그 기능에서는, 독자적인 서비스를 작성합니다.이 속성, 즉 기능이 제공자를 제공자로 만드는 것입니다.각진JS는 공급자가 Angular가 공장 함수로 취급하는 함수인 $get 속성을 가질 것으로 예상합니다.그러나 이 프로바이더 셋업 전체가 매우 특별한 이유는 델이 제공하는 몇 가지 기능이 포함되어 있기 때문입니다.config서비스 프로바이더 내의 오브젝트에는 보통 나중에 이 단계에서 덮어쓸 수 있는 기본값이 포함되어 있습니다.여기서 어플리케이션 전체를 설정할 수 있습니다.
기본적으로 공급자, 공장 및 서비스는 모두 서비스입니다.팩토리는 $get() 함수만 있으면 더 적은 코드로 쓸 수 있는 특별한 서비스입니다.
서비스, 공장 및 프로바이더의 주요 차이점은 복잡성입니다.서비스는 가장 단순한 형태이며, 공장은 조금 더 견고하며, 프로바이더는 런타임에 구성할 수 있습니다.
다음은 각 사용 시점의 요약입니다.
공장 출하 시:제공하는 값은 다른 데이터를 기반으로 계산해야 합니다.
서비스:메서드와 함께 개체를 반환하는 중입니다.
프로바이더:구성 단계에서 생성되기 전에 생성되는 개체를 구성할 수 있어야 합니다.앱이 완전히 초기화되기 전에 대부분 앱 구성에서 제공자를 사용하십시오.
공장 출하 시:공장 내부에서 실제로 객체를 생성하여 반환하는 공장입니다.
서비스:이 키워드를 사용하여 함수를 정의하는 표준 함수를 가진 서비스입니다.
프로바이더:사용자가 정의한 $get 공급자는 데이터를 반환하는 개체를 가져오는 데 사용할 수 있습니다.
1. 서비스는 필요할 때 작성되는 싱글톤 객체이며 애플리케이션 라이프 사이클이 끝날 때까지(브라우저가 닫힐 때) 정리되지 않습니다.컨트롤러는 불필요해지면 폐기되고 청소됩니다.
2. 서비스를 만드는 가장 쉬운 방법은 factory() 메서드를 사용하는 것입니다.factory() 메서드에서는 서비스 함수와 서비스 데이터를 포함하는 개체를 반환함으로써 서비스를 정의할 수 있습니다.서비스 정의 함수는 $http 및 $q와 같은 주입 가능한 서비스를 배치합니다. 예:
angular.module('myApp.services')
.factory('User', function($http) { // injectables go here
var backendUrl = "http://localhost:3000"; var service = {
// our factory definition
user: {},
setName: function(newName) {
service.user['name'] = newName;
},
setEmail: function(newEmail) { service.user['email'] = newEmail;
},
save: function() {
return $http.post(backendUrl + '/users', { user: service.user
}); }
};
return service; });
저희 앱에서 factory()를 사용하고 있습니다.
런타임에 필요한 곳에 간단히 주입할 수 있기 때문에 응용 프로그램에서 공장 사용을 쉽게 할 수 있습니다.
angular.module('myApp')
.controller('MainController', function($scope, User) {
$scope.saveUser = User.save;
});
- 반면 service() 메서드에서는 컨스트럭터 함수를 정의함으로써 서비스를 생성할 수 있습니다.원시 Javascript 객체 대신 프로토타입 객체를 사용하여 서비스를 정의할 수 있습니다.factory() 메서드와 마찬가지로 함수 정의에서도 주입 가능 여부를 설정합니다.
- 서비스를 만드는 가장 낮은 수준의 방법은 provid() 메서드를 사용하는 것입니다.이것이 .config() 함수를 사용하여 설정할 수 있는 서비스를 만드는 유일한 방법입니다.지금까지의 방법과는 달리, 주입 가능한 것을 정의된 방법으로 설정합니다.$get() 함수의 정의.
통사설탕이 차이점입니다.프로바이더만 필요합니다.즉, 프로바이더만이 실제 각도이며, 다른 것은 모두 (코드를 줄이기 위해) 도출됩니다.Value()라는 간단한 버전도 있습니다.이 버전에서는 계산이나 함수는 반환되지 않고 값만 반환됩니다.짝수 값은 프로바이더로부터 얻을 수 있습니다.
그렇다면 왜 이러한 복잡함, 프로바이더를 이용하고 다른 모든 것을 잊어버릴 수 없는 것일까요?그것은 우리가 코드를 쉽게 쓰고 의사소통을 더 잘 할 수 있도록 도와준다.그리고 tungue-in-cheek의 답변은 복잡할수록 더 잘 팔리는 프레임워크가 될 것이다.
- 값 = 값을 반환할 수 있는 공급자
- = Factory(+ Value)를 인스턴스화하고 반환할 수 있는 공급자
- 인스턴스화 + 무엇인가를 수행할 수 있는 공급자 = 서비스(+ 공장, + 가치)
- = $get ( + Factory , + Service , + Value ) 。
각도 주입은 우리에게 이 결론에 도달하는 첫 번째 힌트를 준다.
"$displays used to retrieve by provider" 서비스가 아니라 팩토리가 아닌 프로바이더가 정의한 오브젝트인스턴스를 취득합니다.
더 나은 답은 다음과 같습니다. "Angular 서비스는 서비스 팩토리에 의해 생성됩니다.이러한 서비스 팩토리는 서비스 프로바이더에 의해 만들어지는 기능입니다.서비스 공급자는 컨스트럭터 함수입니다.인스턴스화되면 서비스 팩토리 기능을 유지하는 $get이라는 속성을 포함해야 합니다."
따라서 마스터 프로바이더와 인젝터 및 모든 것이 제자리에 배치됩니다.또한 IServiceProvider에서 상속받아 프로바이더에 $get을 구현할 수 있는 경우에는 Typescript에 관심이 있습니다.
언급URL : https://stackoverflow.com/questions/15666048/angularjs-service-vs-provider-vs-factory
'source' 카테고리의 다른 글
| AJAX 요청으로 쿠키 값을 설정하려면 어떻게 해야 합니까? (0) | 2023.03.13 |
|---|---|
| WordPress API 오류: "죄송합니다. 새 게시물을 만들 수 없습니다." (0) | 2023.03.13 |
| angular js: outside를 클릭하거나 excape를 누를 때 부트스트랩 모달의 소실을 방지하시겠습니까? (0) | 2023.03.13 |
| 배열의 첫 번째 값이 아닌 .data() 함수가 []를 반환하는 이유는 무엇입니까? (0) | 2023.03.13 |
| useEffect의 예상 수익은 무엇에 사용됩니까? (0) | 2023.03.13 |