angularjs は、server_AngularJS との対話型共有を実装します。-jsチュートリアル-php.cn

angularjs は、server_AngularJS との対話型共有を実装します。

WBOY

リリース： 2016-05-16 16:43:14

オリジナル

1448 人が閲覧しました

実際のアプリケーションは実際のサーバーと対話する必要があります。モバイルアプリケーションと新しい 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>

ログイン後にコピー

前に述べたように、長期的には、サーバーとの対話作業をサービスプロキシで行うことが、複数のコントローラーで共有できるため有益です。