AngularJS implementiert interaktives Teilen mit dem Server

AngularJS implementiert interaktives Teilen mit dem Server_AngularJS

WBOY

Freigeben： 2016-05-16 16:43:14

Original

1453 Leute haben es durchsucht

Echte Anwendungen müssen mit echten Servern interagieren. Mobile Anwendungen und die aufkommenden Chrome-Desktopanwendungen können Ausnahmen sein, aber für alle anderen Anwendungen gilt, ob Sie Daten in der Cloud speichern möchten oder mit anderen kommunizieren müssen, um in Echtzeit zu interagieren , müssen Benutzer die Anwendung mit dem Server interagieren lassen.

Um dies zu erreichen, stellt Angular einen Dienst namens $http bereit. Es bietet eine erweiterbare Liste abstrakter Methoden, um die Interaktion mit dem Server zu erleichtern. Es unterstützt HTTP-, JSONP- und CORS-Methoden. Es umfasst auch Sicherheitsunterstützung, um Schwachstellen im JSON-Format und XSRF zu vermeiden. Es ermöglicht Ihnen die einfache Transformation von Anforderungs- und Antwortdaten und implementiert sogar einfaches Caching.

Zum Beispiel beabsichtigen wir, dass die Einkaufsseite Produktinformationen vom Server erhält, anstatt gefälschte Daten aus dem Speicher abzurufen. Wie man serverseitigen Code schreibt, geht über den Rahmen dieses Buches hinaus. Stellen wir uns also vor, wir hätten einen Server erstellt, der bei Abfrage des /products-Pfads eine Liste von Produkten im JSON-Format zurückgibt.

Ein Beispiel für die zurückgegebene Antwort lautet wie folgt:

[

 {

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

]

Nach dem Login kopieren

Wir können Abfragecode wie folgt schreiben:

function ShoppingController($scope, $http) {

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

  $scope.items = data;

 });

}

Nach dem Login kopieren

Dann verwenden Sie es in Ihrer Vorlage wie folgt:

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

Nach dem Login kopieren

Wie wir bereits sagten, wird es auf lange Sicht für uns von Vorteil sein, über einen Dienst-Proxy zu verfügen, der die Arbeit der Interaktion mit dem Server übernimmt. Dieser Dienst kann von mehreren Controllern gemeinsam genutzt werden.