angulairejs implémente le partage interactif avec le serveur

angulairejs implémente le partage interactif avec le serveur_AngularJS

WBOY

Libérer： 2016-05-16 16:43:14

original

1414 Les gens l'ont consulté

Les applications réelles doivent interagir avec de vrais serveurs. Les applications mobiles et les applications de bureau Chrome émergentes peuvent constituer des exceptions, mais pour toutes les autres applications, que vous souhaitiez conserver les données dans le cloud ou que vous ayez besoin de communiquer avec d'autres pour une interaction en temps réel. , les utilisateurs doivent laisser l'application interagir avec le serveur.

Pour y parvenir, Angular fournit un service appelé $http. Il fournit une liste extensible de méthodes abstraites pour faciliter l'interaction avec le serveur. Il prend en charge les méthodes HTTP, JSONP et CORS. Il inclut également un support de sécurité pour éviter les vulnérabilités au format JSON et XSRF. Il vous permet de transformer facilement les données de requête et de réponse et implémente même une mise en cache simple.

Par exemple, nous avons l'intention de laisser le site commercial obtenir des informations sur les produits du serveur au lieu d'obtenir de fausses données de la mémoire. Comment écrire du code côté serveur dépasse le cadre de ce livre, alors imaginons simplement que nous ayons créé un serveur qui, lors de l'interrogation du chemin /products, renvoie une liste de produits au format JSON.

Un exemple de réponse renvoyée est le suivant :

[

 {

  "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...

]

Copier après la connexion

Nous pouvons écrire du code de requête comme celui-ci :

function ShoppingController($scope, $http) {

 $http.get('/products').success(function(data, status, headers, config) {

  $scope.items = data;

 });

}

Copier après la connexion

Ensuite, utilisez-le dans votre modèle comme ceci :

<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>

Copier après la connexion

Comme nous l'avons dit précédemment, à long terme, il nous sera bénéfique d'avoir un service proxy pour le travail d'interaction avec le serveur. Ce service peut être partagé par plusieurs contrôleurs.