[angularjs] Angular.js에서 AJAX 호출을 수행하는 가장 좋은 방법은 무엇입니까?
나는이 기사를 읽고 있었다 : http://eviltrout.com/2013/06/15/ember-vs-angular.html
그리고 그것은 말했다
컨벤션이 부족하기 때문에 컨트롤러 내에서 AJAX 호출과 같은 나쁜 관행에 얼마나 많은 Angular 프로젝트가 의존하는지 궁금합니다. 의존성 주입으로 인해 개발자가 라우터 매개 변수를 지시문에 주입합니까? 초보자 AngularJS 개발자는 숙련 된 AngularJS 개발자가 관용적이라고 생각하는 방식으로 코드를 구성하려고합니까?
실제로 $http
Angular.js 컨트롤러에서 전화를 겁니다. 왜 나쁜 습관입니까? 그러면 $http
전화를 거는 가장 좋은 방법은 무엇입니까 ? 그리고 왜?
답변
편집 :이 답변은 주로 버전 1.0.X에 중점을 두었습니다. 혼란을 피하기 위해 오늘 2013-12-05 현재 모든 Angular 버전에 대한 최상의 답변을 반영하도록 변경되었습니다.
아이디어는 리턴 된 데이터에 대한 약속을 리턴하는 서비스를 작성한 후 컨트롤러에서이를 호출하여 $ scope 특성을 채우기위한 약속을 처리하는 것입니다.
서비스
module.factory('myService', function($http) {
return {
getFoos: function() {
//return the promise directly.
return $http.get('/foos')
.then(function(result) {
//resolve the promise as the data
return result.data;
});
}
}
});
컨트롤러 :
약속의 then()
방법을 처리하고 데이터를 가져옵니다. $ scope 속성을 설정하고 필요한 다른 작업을 수행하십시오.
module.controller('MyCtrl', function($scope, myService) {
myService.getFoos().then(function(foos) {
$scope.foos = foos;
});
});
인뷰 약속 해상도 (1.0.X 만 해당) :
여기에 원래 답변의 대상 인 Angular 1.0.X에서 약속은보기에 의해 특별한 대우를받습니다. 이들이 해결되면 해결 된 값이보기에 바인딩됩니다. 이것은 1.2.X에서 더 이상 사용되지 않습니다
module.controller('MyCtrl', function($scope, myService) {
// now you can just call it and stick it in a $scope property.
// it will update the view when it resolves.
$scope.foos = myService.getFoos();
});
답변
가장 좋은 방법은 $http
콜 아웃을 컨트롤러에 데이터를 제공하는 ‘서비스’로 추상화하는 것입니다 .
module.factory('WidgetData', function($http){
return {
get : function(params){
return $http.get('url/to/widget/data', {
params : params
});
}
}
});
module.controller('WidgetController', function(WidgetData){
WidgetData.get({
id : '0'
}).then(function(response){
//Do what you will with the data.
})
});
$http
이와 같이 호출을 추상화하면 여러 컨트롤러에서이 코드를 재사용 할 수 있습니다. 이 데이터와 상호 작용하는 코드가 더욱 복잡해지면 컨트롤러에서 데이터를 사용하기 전에 데이터를 처리하고 해당 프로세스의 결과를 캐시하여 다시 처리하는 데 시간을 소비하지 않아도 될 때 필요합니다.
‘서비스’는 애플리케이션이 사용할 수있는 데이터의 표현 (또는 모델)로 생각해야합니다.
답변
수락 된 대답은 $http is not defined
오류 를 줘서 이렇게해야했습니다.
var policyService = angular.module("PolicyService", []);
policyService.service('PolicyService', ['$http', function ($http) {
return {
foo: "bar",
bar: function (params) {
return $http.get('../Home/Policy_Read', {
params: params
});
}
};
}]);
주요 차이점은이 줄입니다.
policyService.service('PolicyService', ['$http', function ($http) {
답변
Angular에서 완전히 일반적인 웹 서비스를 원하는 사람에게 답했습니다. 플러그를 꽂는 것이 좋으며 직접 코딩하지 않아도 모든 웹 서비스 호출을 처리합니다. 대답은 다음과 같습니다.