Maison > Article > interface Web > angulairejs implémente le partage interactif avec le serveur_AngularJS

angulairejs implémente le partage interactif avec le serveur_AngularJS

WBOYoriginal: 2016-05-16 16:43:141414parcourir

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

]

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;

 });

}

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>

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：exemple de code d'événement de clic de liaison jquery pour un tag_jqueryArticle suivant：exemple de code d'événement de clic de liaison jquery pour un tag_jquery

Articles Liés

Voir plus