Trackingkosten mit CouchDB und Angular

Dieses Tutorial zeigt, dass eine Aufwands-Tracking-Anwendung mit CouchDB (eine NoSQL-Datenbank) und Angular (ein JavaScript-Framework) erstellt wird. Der einzigartige Aspekt ist die HTTP -API von CouchDB, die eine direkte Kommunikation zwischen dem Angular Frontend und der Datenbank ermöglicht und die Notwendigkeit eines separaten Backend -Servers beseitigt.

Wir werden Schritt für Schritt eine kleine App erstellen, wobei jeder Schritt durch ein Komitee dargestellt wird (einschließlich Tests, obwohl hier nicht detailliert). Der vollständige Code ist auf GitHub verfügbar (Link, das nicht im Original angegeben ist, muss hinzugefügt werden, falls verfügbar).

Schlüsselkonzepte:

• CouchDBs HTTP-API: Direkter clientseitiger Interaktion über HTTP-Anforderungen vereinfacht die Entwicklung.
• Angulars Abhängigkeitsinjektion (DI): verwaltet Anwendungsabhängigkeiten, Verbesserung der Modularität und Testbarkeit.
• Zwei-Wege-Datenbindung: Synchronisiert effizient das Winkelmodell und die Ansicht, um die UI-Konsistenz mit CouchDB-Daten zu gewährleisten.
• clientseitig und serverseitig Validierung: Angular Griffe Frontend-Validierung, während CouchDB die Dokumentvalidierung für die Datenintegrität erzwingt.
• Skalierbarkeit: Die Tutorial präsentiert Techniken wie Direktiven und Datenbindung, um eine skalierbare Lösung zu erstellen.

Warum CouchDB?

wählen

Während clientseitige Optionen wie IndexedDB und lokaler Speicher vorhanden sind, bietet ein Datenbankserver Vorteile, insbesondere für kollaborative Anwendungen. Mehrere Benutzer können gleichzeitig auf die Ausgabenliste zugreifen und aktualisieren. Die native HTTP -Unterstützung von CouchDB beseitigt Vermittlungsschichten und vereinfacht die Kommunikation zwischen der Anwendung und der Datenbank. Die inhärente Unterstützung für die Replikation macht verteilte Datenbanksysteme einfach zu implementieren.

Voraussetzungen:

Installieren Sie die neueste CouchDB (Version 1.6 oder später) und eine aktuelle stabile Node.js -Version (Version 0.10.x oder höher).

Einrichten der Entwicklungsumgebung:

1. Installieren Sie Node.js und Tools: Verwenden Sie einen Installateur (verfügbar auf der Website node.js) oder einem Paketmanager wie NVM. Installieren yo generator-angular grunt-cli couchapp Erstellen und Gerüst die Winkelanwendung: npm install -g yo generator-angular grunt-cli couchapp Erstellen Sie ein Projektverzeichnis, navigieren Sie dazu und verwenden Sie den Winkelgenerator:

2. Führen Sie den Entwicklungsserver aus: mkdir expenses && cd expenses && yo angular expenses Grunzen verwenden, um einen Entwicklungsserver zu starten:

   . Dies sollte
in Ihrem Browser öffnen.

3. grunt serve http://127.0.0.1:9000

   4. CouchDB installieren: Befolgen Sie die Anweisungen zur CouchDB -Installation für Ihr Betriebssystem. (z. B. mit brew auf macos).

   Initiale CouchDB -Setup:

   1. starten Sie CouchDB: couchdb &

   2. Erstellen Sie die Datenbank: curl -X PUT http://127.0.0.1:5984/expenses

   3. Einlegen Sie die ersten Dokumente ein: Verwenden Sie curl, um Beispielkosteneinträge hinzuzufügen (Beispielbefehle sind im ursprünglichen Tutorial bereitgestellt).

   Aktivieren von CORs:

   Um Cross-Origin-Anforderungen der Angular-Anwendung auf CouchDB zu ermöglichen, aktivieren Sie CORs in der Konfiguration von CouchDB (normalerweise local.ini). Das Tutorial enthält curl Befehle, um CORs zu aktivieren und die Ursprünge auf * zu setzen (nur für die Entwicklung; diese für die Produktion ändern).

   Winkel- und Abhängigkeitsinjektion:

   Das Tutorial zeigt die Abhängigkeitsinjektion von Angular, um die Datenbankverbindungseinstellungen zu verwalten. Eine konstante appSettings wird erstellt, um die Datenbank -URL zu halten.

   Daten mit dem $http Service von Angular abrufen:

   Eine CouchDB -Ansicht (_design/expenses/_view/byName) wird erstellt, um die Kostendaten abzurufen. Der Angular Controller verwendet den $http -Dienst, um Anforderungen an diese Ansicht zu stellen und die $scope mit den abgerufenen Daten zu aktualisieren. Das Tutorial zeigt die Verwendung von ng-repeat, um die Daten in der Ansicht anzuzeigen.

   

   Erstellen und Umgang mit dem Formular für die Ausgaben:

   Ein HTML -Formular wird hinzugefügt, damit Benutzer neue Ausgaben eingeben können. ng-model Richtlinien binden die Formeingänge an das Winkelbereich. Die ng-submit -Richtlinie ruft eine Controller -Funktion auf, um die Daten mit $http.post an CouchDB zu senden. Optimistische Updates werden verwendet, um dem Benutzer ein sofortiges Feedback zu geben.

   Hinzufügen von Validierung:

   serverseitige Validierung wird im CouchDB-Designdokument mit validate_doc_update implementiert. Die clientseitige Validierung wird mit Angulars required und ng-pattern -Richtlinien hinzugefügt. Die Gültigkeit des Formulars wird mit form.$invalid überprüft, um die Schaltfläche Senden zu deaktivieren, wenn das Formular ungültig ist.

   

   Schlussfolgerung:

   Das Tutorial schließt ab, indem die wichtigsten Konzepte zusammengefasst und weitere Explorationsthemen vorgeschlagen werden, z. Ein FAQ -Abschnitt ist auch enthalten, um gemeinsame Fragen zum Hosting, mit javaScript/node.js/couchdb zusammen zu beantworten, sowie Installations-/Hosting -Empfehlungen.

Das obige ist der detaillierte Inhalt vonTrackingkosten mit CouchDB und Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!