[rest] 내 angularjs 페이지에서 RESTful API의 서비스에 액세스하는 방법은 무엇입니까?

Program / 글쓴이

저는 angularJS를 처음 접했습니다. RESTful API에서 서비스에 액세스하는 것을 찾고 있지만 전혀 생각하지 못했습니다. 어떻게 할 수 있습니까?

답변

옵션 1 : $ http 서비스

AngularJS는 사용자가 원하는 것을 정확히 수행 하는 $http서비스 를 제공합니다 . AJAX 요청을 웹 서비스에 보내고 JSON을 사용하여 데이터를 수신합니다 (REST 서비스와 통신하기에 완벽 함).

예제를 제공하려면 (AngularJS 문서에서 가져와 약간 조정 됨) :

$http({ method: 'GET', url: '/foo' }).
  success(function (data, status, headers, config) {
    // ...
  }).
  error(function (data, status, headers, config) {
    // ...
  });

옵션 2 : $ resource 서비스

AngularJS 에는보다 높은 수준의 방식으로 REST 서비스에 대한 액세스를 제공 하는 $resource서비스 인 또 다른 서비스가 있습니다 (AngularJS 문서에서 다시 가져온 예).

var Users = $resource('/user/:userId', { userId: '@id' });
var user = Users.get({ userId: 123 }, function () {
  user.abc = true;
  user.$save();
});

옵션 3 : Restangular

또한 Restangular 와 같은 타사 솔루션도 있습니다 . 사용 방법에 대한 설명서 를 참조하십시오 . 기본적으로 더 선언적이며 세부 사항을 더 추상화합니다.

답변

$ HTTP 서비스는 범용 AJAX 사용할 수 있습니다. 적절한 RESTful API가있는 경우 ngResource를 살펴 봐야 합니다.

REST API를 쉽게 처리 할 수있는 타사 라이브러리 인 Restangular를 살펴볼 수도 있습니다 .

답변

Angular의 멋진 세계에 오신 것을 환영합니다 !!

저는 angularJS를 처음 접했습니다. RESTful API에서 서비스에 액세스하는 것을 찾고 있지만 전혀 생각하지 못했습니다. 그렇게하도록 도와주세요. 감사합니다

현재 ‘GET’서비스를 사용하고 있다면 첫 번째 Angular 스크립트를 작성하는 데 두 가지 (매우 큰) 장애물이 있습니다.

첫째, 서비스는 “Access-Control-Allow-Origin”속성을 구현해야합니다. 그렇지 않으면 서비스가 웹 브라우저에서 호출 될 때 처리되지만 Angular에서 호출 될 때 비참하게 실패합니다.

따라서 web.config 파일에 몇 줄을 추가해야 합니다.

<configuration>
  ...
  <system.webServer>
    <httpErrors errorMode="Detailed"/>
    <validation validateIntegratedModeConfiguration="false"/>
    <!-- We need the following 6 lines, to let AngularJS call our REST web services -->
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*"/>
            <add name="Access-Control-Allow-Headers" value="Content-Type"/>
        </customHeaders>
    </httpProtocol>
  </system.webServer>
  ...
</configuration>

다음으로 Angular가 ‘GET’웹 서비스를 호출하도록하기 위해 HTML 파일에 약간의 코드를 추가해야합니다.

// Make sure AngularJS calls our WCF Service as a "GET", rather than as an "OPTION"
var myApp = angular.module('myApp', []);
myApp.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

이러한 수정 사항이 적용되면 실제로 RESTful API를 호출하는 것은 매우 간단합니다.

function YourAngularController($scope, $http)
{
    $http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers')
        .success(function (data) {
        //  
        //  Do something with the data !
        //  
    });
}

이 웹 페이지에서 다음 단계에 대한 명확한 설명을 찾을 수 있습니다.

JSON 데이터와 함께 Angular 사용

행운을 빕니다 !

마이크

답변

$http여기 에서 (바로 가기 방법) 확장 하십시오 : http://docs.angularjs.org/api/ng.$http

// 페이지의 스 니펫

$http.get('/someUrl').success(successCallback);
$http.post('/someUrl', data).success(successCallback);

// 사용 가능한 바로 가기 방법

$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp

답변

예를 들어 json은 다음과 같습니다. { “id”: 1, “content”: “Hello, World!”}

다음과 같이 angularjs를 통해 액세스 할 수 있습니다.

angular.module('app', [])
    .controller('myApp', function($scope, $http) {
        $http.get('http://yourapp/api').
            then(function(response) {
                $scope.datafromapi = response.data;
            });
    });

그런 다음 HTML에서 다음과 같이 할 수 있습니다.

<!doctype html>
<html ng-app="myApp">
    <head>
        <title>Hello AngularJS</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
        <script src="hello.js"></script>
    </head>

    <body>
        <div ng-controller="myApp">
            <p>The ID is {{datafromapi.id}}</p>
            <p>The content is {{datafromapi.content}}</p>
        </div>
    </body>
</html>

다운로드하지 않으려는 경우 angularjs에 대한 CDN을 호출합니다.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="hello.js"></script>

도움이 되었기를 바랍니다.

답변