[rest] 내 angularjs 페이지에서 RESTful API의 서비스에 액세스하는 방법은 무엇입니까?
저는 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 !
//
});
}
이 웹 페이지에서 다음 단계에 대한 명확한 설명을 찾을 수 있습니다.
행운을 빕니다 !
마이크
답변
$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>
도움이 되었기를 바랍니다.
답변
