angularjs 페이지의 RESTful API에서 서비스에 액세스하는 방법은 무엇입니까?
저는 angularJs를 잘 몰라요.RESTful API에서 서비스에 접속하기 위해 검색 중이지만, 아무런 생각이 나지 않았습니다.내가 어떻게 그럴 수 있을까?
옵션 1: $http 서비스
AngularJS는 JSON(REST 서비스와의 대화에 최적인)을 사용하여 웹 서비스에 AJAX 요청을 보내고 데이터 수신을 수행하는 서비스를 제공합니다.
예를 들자면(각도에서 인용)JS 매뉴얼 및 약간 수정):
$http({ method: 'GET', url: '/foo' }).
success(function (data, status, headers, config) {
// ...
}).
error(function (data, status, headers, config) {
// ...
});
옵션 2: $resource 서비스
AngularJS에는 REST 서비스에 대한 보다 높은 수준의 액세스를 제공하는 다른 서비스도 있습니다(예: Angular에서 다시 인용).JS 매뉴얼):
var Users = $resource('/user/:userId', { userId: '@id' });
var user = Users.get({ userId: 123 }, function () {
user.abc = true;
user.$save();
});
옵션 3: 각도 변경
또한 Resangular와 같은 서드파티 솔루션도 있습니다.사용 방법에 대해서는, 메뉴얼을 참조해 주세요.기본적으로, 이것은 훨씬 더 선언적이고 더 많은 세부 사항을 추상화합니다.
$http 서비스는 범용 AJAX에 사용할 수 있습니다.적절한 RESTful API가 있는 경우 ngResource를 확인해야 합니다.
REST API를 쉽게 처리할 수 있는 서드파티 라이브러리인 Resangular도 살펴보실 수 있습니다.
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>
다음으로 HTML 파일에 약간의 코드를 추가하여 Angular가 'GET' 웹 서비스를 호출하도록 해야 합니다.
// 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 !
//
});
}
이 Web 페이지에서는, 다음의 순서에 대해 알기 쉬운 설명을 참조할 수 있습니다.
행운을 빕니다.
마이크
$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 " :안녕, 월드!}
다음과 같이 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>
다운로드하지 않을 경우 CDN에서 angularjs를 호출합니다.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="hello.js"></script>
이게 도움이 됐으면 좋겠다.
언급URL : https://stackoverflow.com/questions/16394089/how-to-access-the-services-from-restful-api-in-my-angularjs-page
'programing' 카테고리의 다른 글
| 각도 스코프 기능이 여러 번 실행됨 (0) | 2023.04.05 |
|---|---|
| Oracle 페이징을 위한 LIMIT 및 OFFSET 대체 방법 (0) | 2023.04.05 |
| c#에서 동적으로 Json 생성 (0) | 2023.04.05 |
| Angular에서 특정 템플릿을 재정의할 수 있습니까?UI 부트스트랩? (0) | 2023.04.05 |
| Oracle 데이터베이스를 사용하는 이유는 무엇입니까? (0) | 2023.04.05 |