Erstellen einer CRUD -App in Minuten mit Angular ' s $ Resource

Dieser Artikel zeigt, wie CRUD -Operationen in AngularJS -Anwendungen mit dem $resource -Dienst effizient (erstellen, lesen, aktualisieren, löschen) ausgeführt werden. Es vereinfacht die Interaktion mit erholsamen Backends.

Schlüsselkonzepte:

• Nutzung $resource: $resource Stromlinien -CRUD -Operationen durch Bereitstellung einer bequemen Schnittstelle zum Interagieren mit erholsamen APIs.
• Setup und Konfiguration: erfordert einbeziehen angular-resource.js und eine Abhängigkeit vom ngResource -Modul.
• $resource Methoden: verwendet fünf Standardmethoden (get(), query(), save(), remove(), delete()), um mit erholsamen Endpunkten zu interagieren.
• Erweiterung $resource: Ermöglicht die Anpassung durch Hinzufügen benutzerdefinierter Methoden oder Änderung von Konfigurationen wie URL -Parametern und Datentransformationen.
• Praktisches Beispiel: Eine Schritt-für-Schritt-Anleitung erstellt eine Filmanwendung, die CRUD-Funktionalität in einem realen Szenario zeigt.

Voraussetzungen:

Die angular-resource.js -Datei (verfügbar bei CDNs wie CDNJs) muss in Ihr HTML enthalten sein, und Ihr AngularJS -Modul muss eine Abhängigkeit von ngResource:

deklarieren

angular.module('myApp', ['ngResource']);

Erste Schritte:

$resource erwartet ein erholsames Backend mit so strukturierten Endpunkten:

Das Beispiel verwendet Node.js, Express und MongoDB für das Backend, aber jede erholsame API funktioniert.

Wie $resource funktioniert:

1. Deponcy Deponcy: Inject $resource in Ihren Controller oder Dienst injizieren.
2. Ressource erstellen: rufen Sie $resource() mit der REST -Endpunkt -URL auf. Dies gibt eine Ressourcenklasse zurück.

angular.module('myApp.services').factory('Entry', function($resource) {
  return $resource('/api/entries/:id');
});

3. Verwenden Sie Standardmethoden: Die Ressourcenklasse bietet:

   • get(): Ruft eine einzelne Ressource ab.
   • query(): Ruft eine Sammlung von Ressourcen ab.
   • save(): Erstellt eine neue Ressource (Beitrag).
   • remove()/delete(): löscht eine Ressource.

4. Beispiel Verwendung:

angular.module('myApp.controllers').controller('ResourceController', function($scope, Entry) {
  Entry.get({id: $scope.id}, function(entry) { console.log(entry); });
  Entry.query(function(entries) { console.log(entries); });
  $scope.entry = new Entry();
  $scope.entry.data = 'some data';
  $scope.entry.$save(function() { /* data saved */ });
});

5. Instanzmethoden: Nicht-Gett-Methoden ($save(), $delete(), $remove()) sind in Instanzen mit new Entry().

   verfügbar

6. Aktualisieren Sie den Vorgang: Um Updates (Put) durchzuführen, fügen Sie eine benutzerdefinierte update -Methode hinzu:

angular.module('myApp', ['ngResource']);

7. benutzerdefinierte Konfiguration: Der vierte Parameter zu $resource() ermöglicht eine weitere Anpassung, wie z. B. stripTrailingSlashes.

Erstellen einer Film -App (Beispiel):

Der Artikel beschreibt eine vollständige Filmanwendung mit $resource, einschließlich Controllern, Ansichten und Routing (mit ui-router). Die Backend-API ist CORS-fähig und unter http://movieapp-sitepointdemos.rhcloud.com/api/movies zugänglich. Das Beispiel deckt Filmeinträge zu erstellen, zu lesen, zu aktualisieren und zu löschen.

häufig gestellte Fragen (FAQs):

Der Artikel schließt mit einem umfassenden FAQ -Abschnitt, der sich mit häufigen Fragen zur Verwendung von $resource für CRUD -Operationen befasst, einschließlich Fehlerbehebung, Anpassung, Test und Kompatibilität mit anderen Winkelmodulen. Es verdeutlicht auch seine Verwendung mit nicht restlichen APIs und verschiedenen Versionen von AngularJs.

Das obige ist der detaillierte Inhalt vonErstellen einer CRUD -App in Minuten mit Angular ' s $ Resource. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!