TL; DR
1) 당신이 사용하고있는 공장을 객체를 만든 다음 같은 개체를 반환, 그것에 속성을 추가 할 수 있습니다. 이 팩토리를 컨트롤러에 전달하면 이제 해당 컨트롤러에서 팩토리를 통해 객체의 해당 속성을 사용할 수 있습니다.
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) Service를 사용할 때 AngularJS는 'new'키워드를 사용하여 장면 뒤에서 인스턴스화합니다. 이 때문에 'this'에 속성을 추가하면 서비스는 'this'를 반환합니다. 서비스를 컨트롤러로 전달하면 이제 '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'를 컨트롤러에 전달하면 'service'에 첨부 한 모든 속성을 사용할 수 있습니다.
이제 콜백 함수에 '비공개'변수를 추가하겠습니다. 이것들은 컨트롤러에서 직접 액세스 할 수는 없지만 결국 'service'에서 getter / setter 메소드를 설정하여 필요할 때 이러한 'private'변수를 변경할 수 있습니다.
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;
});
여기서는 변수 / 함수를 'service'에 첨부하지 않습니다. 나중에 사용하거나 수정하기 위해 단순히 만들었습니다.
- baseUrl은 iTunes API에 필요한 기본 URL입니다
- _artist는 조회하고자하는 아티스트입니다.
- _finalUrl은 iTunes를 호출 할 최종 완성 된 URL입니다.
- makeUrl은 iTunes 친화적 인 URL을 생성하고 반환하는 기능입니다.
헬퍼 / 프라이빗 변수와 함수가 준비되었으므로 'service'객체에 속성을 추가해 봅시다. 우리가 '서비스'에 넣은 것은 'myFactory'를 전달하는 컨트롤러 내에서 직접 사용할 수 있습니다.
아티스트를 반환하거나 설정하는 setArtist 및 getArtist 메소드를 작성하려고합니다. 또한 생성 된 URL을 사용하여 iTunes API를 호출하는 메소드를 작성하려고합니다. 이 방법은 일단 데이터가 iTunes API에서 돌아 오면 이행 할 것을 약속합니다. AngularJS에서 약속을 사용한 경험이 많지 않은 경우 약속을 자세히 살펴 보는 것이 좋습니다.
아래 setArtist 는 아티스트를 허용하며 아티스트를 설정할 수 있습니다. getArtist 는 아티스트를 반환합니다. callItunes 는 $ http 요청에 사용할 URL을 만들기 위해 makeUrl ()을 먼저 호출합니다. 그런 다음 promise 객체를 설정하고 최종 URL로 $ http 요청을 한 다음 $ http는 promise를 반환하므로 요청 후 .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 () 메서드를 사용하고 iTunes 데이터로 약속이 이행 된 후에 만 $ scope.data.artistData를 설정할 수 있습니다. 컨트롤러가 매우 얇다는 것을 알 수 있습니다 (이것은 좋은 코딩 연습입니다). 모든 논리 및 영구 데이터는 컨트롤러가 아닌 서비스에 있습니다.
2) 서비스
아마도 서비스 생성을 처리 할 때 알아야 할 가장 큰 것은 '새로운'키워드로 인스턴스화된다는 것입니다. JavaScript 전문가에게는 이것이 코드의 특성에 대한 큰 힌트를 제공해야합니다. JavaScript에 대한 배경 지식이 제한적인 사용자 또는 'new'키워드의 실제 기능에 익숙하지 않은 사용자를 위해 서비스의 본질을 이해하는 데 도움이되는 JavaScript 기본 사항을 검토하겠습니다.
'new'키워드로 함수를 호출 할 때 발생하는 변경 사항을 실제로 보려면 함수를 작성하고 'new'키워드로 호출 한 다음 'new'키워드를 볼 때 인터프리터가 수행하는 작업을 보여 드리겠습니다. 최종 결과는 동일합니다.
먼저 생성자를 만들어 봅시다.
var Person = function(name, age){
this.name = name;
this.age = age;
}
일반적인 JavaScript 생성자 함수입니다. 이제 'new'키워드를 사용하여 Person 함수를 호출 할 때마다 'this'는 새로 작성된 오브젝트에 바인드됩니다.
이제 Person의 프로토 타입에 메소드를 추가하여 Person '클래스'의 모든 인스턴스에서 사용할 수 있습니다.
Person.prototype.sayName = function(){
alert(‘My name is ‘ + this.name);
}
이제 프로토 타입에 sayName 함수를 추가 했으므로 Person의 모든 인스턴스는 해당 인스턴스 이름을 알리기 위해 sayName 함수를 호출 할 수 있습니다.
이제 Person 생성자 함수와 프로토 타입에 sayName 함수가 있으므로 Person 인스턴스를 만든 다음 sayName 함수를 호출 해 보겠습니다.
var tyler = new Person(‘Tyler’, 23);
tyler.sayName(); //alerts ‘My name is Tyler’
따라서 Person 생성자를 생성하고 프로토 타입에 함수를 추가하고 Person 인스턴스를 생성 한 다음 프로토 타입에서 함수를 호출하는 코드는 다음과 같습니다.
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'를 사용한 후에는 마치 'tyler'에서 객체 인 것처럼 메소드 (sayName)를 호출 할 수 있다는 것입니다. 그 이유 때문입니다. 먼저, Person 생성자가 코드에서 볼 수 있는지 여부에 관계없이 Person 생성자가 객체를 반환한다는 것을 알고 있습니다. 둘째, sayName 함수는 Person 인스턴스가 아닌 프로토 타입에 있으므로 Person 함수가 반환하는 객체는 실패한 조회에서 프로토 타입에 위임되어야합니다. 더 간단한 용어로, tyler.sayName ()을 호출하면 인터프리터는“OK, 방금 만든 'tyler'객체를보고 sayName 함수를 찾은 다음 호출합니다. 잠깐만 요, 여기 보이지 않습니다-내가 볼 수있는 것은 이름과 나이, 프로토 타입을 확인하겠습니다. 예, 프로토 타입에있는 것 같습니다.”라고 말합니다.
아래는 JavaScript에서 'new'키워드가 실제로하는 일에 대해 어떻게 생각할 수 있는지에 대한 코드입니다. 기본적으로 위 단락의 코드 예입니다. 나는 '인터프리터 뷰'또는 인터프리터가 코드 내부의 코드를 보는 방식을 넣었습니다.
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에서 실제로 수행하는 작업에 대한 지식이 있으면 AngularJS에서 서비스를 작성하는 것이 이해하기 쉬워야합니다.
서비스를 만들 때 이해해야 할 가장 큰 것은 서비스가 'new'키워드로 인스턴스화된다는 것입니다. 위의 예제와 그 지식을 결합하여 이제 속성과 메소드를 'this'에 직접 첨부하여 서비스 자체에서 반환한다는 것을 인식해야합니다. 이것을 실제로 살펴 봅시다.
우리가 팩토리 예제로 원래했던 것과는 달리, 우리는 객체를 생성 할 필요가 없습니다. 이전에 여러 번 언급했듯이 인터프리터가 해당 객체를 생성하고 위임 할 수 있도록 '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);
})
}
});
앞에서 언급했듯이 '새로운'기능을 실제로 이해하면 서비스는 AngularJS의 공장과 거의 동일합니다.
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에서 'thingFromConfig'만 변경할 수 있습니다. 세 번째 섹션 (아래 참조)은 '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';
});
이제 제공자에서 'thingFromConfig'가 빈 문자열로 어떻게 표시되는지 확인할 수 있지만 DOM에 표시되면 '이 문장이 설정되었습니다…'가됩니다.
