angularjs는 server_AngularJS와의 대화형 공유를 구현합니다.
- WBOY원래의
- 2016-05-16 16:43:141456검색
실제 애플리케이션은 실제 서버와 상호 작용해야 합니다. 모바일 애플리케이션과 새로 등장하는 Chrome 데스크톱 애플리케이션은 예외일 수 있지만, 다른 모든 애플리케이션의 경우 데이터를 클라우드에 유지하려는지 또는 다른 애플리케이션과 실시간 상호 작용을 해야 하는지에 관계없이 가능합니다. , 사용자는 애플리케이션이 서버와 상호 작용할 수 있도록 해야 합니다.
이를 위해 Angular는 $http라는 서비스를 제공합니다. 서버와 더 쉽게 상호 작용할 수 있도록 확장 가능한 추상 메서드 목록을 제공합니다. HTTP, JSONP 및 CORS 방법을 지원합니다. 또한 JSON 형식 취약점 및 XSRF를 방지하기 위한 보안 지원도 포함되어 있습니다. 이를 통해 요청 및 응답 데이터를 쉽게 변환할 수 있으며 간단한 캐싱도 구현할 수 있습니다.
예를 들어 쇼핑 사이트가 메모리에서 가짜 데이터를 얻는 대신 서버에서 제품 정보를 얻도록 하려고 합니다. 서버 측 코드를 작성하는 방법은 이 책의 범위를 벗어납니다. 따라서 /products 경로를 쿼리할 때 JSON 형식으로 제품 목록을 반환하는 서버를 만들었다고 가정해 보겠습니다.
반환된 응답의 예는 다음과 같습니다.
[
{
"id": 0,
"title": "Paint pots",
"description": "Pots full of paint",
"price": 3.95
},
{
"id": 1,
"title": "Polka dots",
"description": "Dots with that polka groove",
"price": 12.95
},
{
"id": 2,
"title": "Pebbles",
"description": "Just little rocks, really",
"price": 6.95
}
...etc...
]
다음과 같은 쿼리 코드를 작성할 수 있습니다.
function ShoppingController($scope, $http) {
$http.get('/products').success(function(data, status, headers, config) {
$scope.items = data;
});
}
그런 다음 템플릿에서 다음과 같이 사용하세요.
<body ng-controller="ShoppingController">
<h1>Shop!</h1>
<table>
<tr ng-repeat="item in items">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
<td>{{item.price | currency}}</td>
</tr>
</table>
</div>
</body>
앞서 말했듯이 장기적으로 보면 서버와 상호 작용하는 작업을 서비스 프록시로 처리하는 것이 유리할 것입니다. 이 서비스는 여러 컨트롤러에서 공유될 수 있습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.