source

Angular.js에서 AJAX 콜을 발신하기 위한 베스트 프랙티스는 무엇입니까?

nicesource 2023. 3. 15. 19:44
반응형

Angular.js에서 AJAX 콜을 발신하기 위한 베스트 프랙티스는 무엇입니까?

저는 http://eviltrout.com/2013/06/15/ember-vs-angular.html이라는 기사를 읽고 있었습니다.

그리고 이렇게 써있었어요

규약이 없기 때문에 컨트롤러 내에서 직접 AJAX 콜과 같은 불량 프랙티스에 의존하는 Angular 프로젝트는 몇 개나 됩니까?의존관계 주입에 의해 개발자는 라우터 파라미터를 디렉티브에 주입하고 있습니까?초보자 각도JS 개발자들은 경험이 많은 Angular와 같은 방식으로 코드를 구성할 것입니다.JS 개발자는 관용적이라고 생각하십니까?

는 사실 ★★★★★★★을 만들고 있습니다.$httpAngular.js angular angular angular 。왜쁜쁜 행행? 하면 으로 만들 수 있는 베스트 는?$http럼전 전? ??

편집: 이 답변은 주로 버전 1.0.X에 초점을 맞췄습니다.혼란을 방지하기 위해 현재 Angular의 모든 최신 버전에 대한 최상의 답변을 반영하도록 변경되었습니다. 2013-12-05.

반환된 데이터에 대한 약속을 반환하는 서비스를 만들고 컨트롤러에서 약속을 호출하여 $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()방법 및 방법에서 데이터를 꺼냅니다.$1200원

module.controller('MyCtrl', function($scope, myService) {
    myService.getFoos().then(function(foos) {
        $scope.foos = foos;
    });
});

인뷰 약속 해결(1.0.X 한정):

여기에서 원래 답변의 대상인 Angular 1.0.X에서 약속은 View에 의해 특별 취급됩니다.해결되면 해결된 값이 보기에 바인딩됩니다.이것은 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에서 완전히 일반적인 웹 서비스를 원하는 사람을 위해 답변을 넣었습니다.콘센트에 접속하는 것만으로, 모든 Web 서비스 콜을 처리할 수 있기 때문에, 직접 코드를 붙일 필요는 없습니다.답은 다음과 같습니다.

https://stackoverflow.com/a/38958644/5349719

언급URL : https://stackoverflow.com/questions/17646034/what-is-the-best-practice-for-making-an-ajax-call-in-angular-js

반응형