ホームページ > 記事 > ウェブフロントエンド > angularjs は、server_AngularJS との対話型共有を実装します。
angularjs は、server_AngularJS との対話型共有を実装します。
- WBOYオリジナル
- 2016-05-16 16:43:141446ブラウズ
実際のアプリケーションは実際のサーバーと対話する必要があります。モバイル アプリケーションと新しい 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>
前に述べたように、長期的には、サーバーとの対話作業をサービス プロキシで行うことが、複数のコントローラーで共有できるため有益です。