Dieser Artikel ist Teil 3 des SitePoint Angular 2 -Tutorials zum Erstellen einer CRUD -App mit der Angular -CLI. In diesem Artikel werden wir unsere Anwendung aktualisieren, um mit einer REST -API -Back -End zu kommunizieren.
lieber mit einem Schritt-für-Schritt-Videokurs Angular zu lernen? Schauen Sie sich an Angular 5 auf SitePoint Premium.In Teil 1 haben wir gelernt, wie wir unsere Todo -Anwendung zum Ausführen bringen und auf Github -Seiten bereitstellen können. Dies funktionierte gut, aber leider wurde die gesamte App in eine einzige Komponente zusammengefasst.
In Teil zwei untersuchten wir eine modularere Komponentenarchitektur und lernten, wie man diese einzelne Komponente in einen strukturierten Baum kleinerer Komponenten unterteilt, die leichter zu verstehen, wieder zu verwenden und zu warten.
Sie müssen die Teile eins und zwei dieses Tutorials für drei nicht befolgt haben, um Sinn zu machen. Sie können einfach eine Kopie unseres Repo schnappen, den Code von Teil zwei auschecken und diesen als Ausgangspunkt verwenden. Dies wird unten ausführlicher erklärt.
So sah unsere Anwendungsarchitektur am Ende von Teil 2 aus:
Derzeit speichert der TododataService alle Daten im Speicher. In diesem dritten Artikel werden wir unsere Anwendung aktualisieren, um stattdessen mit einer REST -API -Back -End zu kommunizieren.
wir werden:
Am Ende dieses Artikels werden Sie verstehen:
Also fangen wir an!
Stellen Sie sicher, dass Sie die neueste Version der Angular CLI installiert haben. Wenn Sie dies nicht tun, können Sie dies mit dem folgenden Befehl installieren:
<span>npm install -g @angular/cli@latest </span>
Wenn Sie eine frühere Version der Winkel -CLI entfernen müssen, können Sie:
npm uninstall -g @angular/cli angular-cli npm cache clean <span>npm install -g @angular/cli@latest </span>
Danach benötigen Sie eine Kopie des Code aus Teil zwei. Dies ist auf GitHub erhältlich. Jeder Artikel in dieser Serie hat ein entsprechendes Tag im Repository, damit Sie zwischen den verschiedenen Zuständen der Anwendung hin und her wechseln können.
Der Code, mit dem wir in Teil zwei beendet sind und mit dem wir in diesem Artikel beginnen, ist als Teil-2 markiert. Der Code, mit dem wir diesen Artikel beenden, wird als Teil 3 markiert.
Sie können sich Tags wie einen Alias einer bestimmten Commit -ID vorstellen. Sie können mit Git Checkout zwischen ihnen wechseln. Hier können Sie mehr darüber lesen.
Um zum Laufen zu gehen (die neueste Version der angularen CLI installierten) würden wir dies tun:
<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git </span><span>cd angular-todo-app </span><span>git checkout part-2 </span><span>npm install </span>ng serve
Besuchen Sie dann http: // localhost: 4200/. Wenn alles gut ist, sollten Sie die funktionierende Todo -App sehen.
Verwenden wir JSON-Server, um schnell ein Mock-Back-End einzurichten.
Aus dem Wurzel der Anwendung:
<span>npm install json-server --save </span>
Erstellen Sie im Root -Verzeichnis unserer Anwendung eine Datei namens DB.json mit folgenden Inhalten:
<span>{
</span> <span>"todos": [
</span> <span>{
</span> <span>"id": 1,
</span> <span>"title": "Read SitePoint article",
</span> <span>"complete": false
</span> <span>},
</span> <span>{
</span> <span>"id": 2,
</span> <span>"title": "Clean inbox",
</span> <span>"complete": false
</span> <span>},
</span> <span>{
</span> <span>"id": 3,
</span> <span>"title": "Make restaurant reservation",
</span> <span>"complete": false
</span> <span>}
</span> <span>]
</span><span>}
</span>Fügen Sie schließlich ein Skript zu package.json hinzu, um unser Back -End zu starten:
<span>"scripts": {
</span> <span>...
</span> <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>Wir können jetzt unser Rest -API -Ende mit:
<span>npm run json-server </span>
Dies sollte Folgendes anzeigen:
<span>\{^_^}/ hi!
</span>
Loading db.json
Done
Resources
http://localhost:3000/todos
Home
http://localhost:3000
Das ist es! Wir haben jetzt eine REST -API -Back -End auf Port 3000.
Um zu überprüfen
Die folgenden Endpunkte werden unterstützt:
Wenn Sie also in Ihrem Browser zu http: // localhost: 3000/todos navigieren, sollten Sie eine JSON -Antwort mit allen Todos von db.json sehen.
Um mehr über JSON-Server zu erfahren, schauen Sie sich die Mock Rest-APIs mit JSON-Server an.
Jetzt, da wir unser Back -End an Ort und Stelle haben, müssen wir ihre URL in unserer Winkelanwendung aufbewahren.
Idealerweise sollten wir dazu in der Lage sein:
Zum Glück unterstützt Angular CLI Umgebungen. Standardmäßig gibt es zwei Umgebungen: Entwicklung und Produktion, beide mit einer entsprechenden Umgebungsdatei: SRC/Umgebungen/Umgebungen.
Fügen wir unsere API -URL zu beiden Dateien hinzu:
<span>npm install -g @angular/cli@latest </span>
npm uninstall -g @angular/cli angular-cli npm cache clean <span>npm install -g @angular/cli@latest </span>
tun
<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git </span><span>cd angular-todo-app </span><span>git checkout part-2 </span><span>npm install </span>ng serve
Aber wenn wir ng dienen -Umweltprodukt oder NG -Build -Umweltprodukt verwendet, verwendet Angular CLI den in SRC/Environments/Umgebung angegebenen Wert.Prod.TS.
genau das brauchen wir, um eine andere API -URL für Entwicklung und Produktion zu verwenden, ohne unseren Code ändern zu müssen.
Die Anwendung in dieser Artikelserie wird nicht in der Produktion gehostet. Daher geben wir dieselbe API -URL in unserer Entwicklungs- und Produktionsumgebung an. Dies ermöglicht es uns, NG Serve -Umweltprodukt oder NG -Build -zu vermitteln, um zu sehen, ob alles wie erwartet funktioniert.
Sie können die Zuordnung zwischen Dev und Prod und ihren entsprechenden Umgebungsdateien in .angular-cli.json:finden
<span>npm install json-server --save </span>
<span>{
</span> <span>"todos": [
</span> <span>{
</span> <span>"id": 1,
</span> <span>"title": "Read SitePoint article",
</span> <span>"complete": false
</span> <span>},
</span> <span>{
</span> <span>"id": 2,
</span> <span>"title": "Clean inbox",
</span> <span>"complete": false
</span> <span>},
</span> <span>{
</span> <span>"id": 3,
</span> <span>"title": "Make restaurant reservation",
</span> <span>"complete": false
</span> <span>}
</span> <span>]
</span><span>}
</span>Um mehr über Winkel -CLI -Umgebungen zu erfahren, überprüfen Sie die ultimative Angular -CLI -Referenzhandbuch.
Jetzt, da wir unsere API -URL in unserer Umgebung gespeichert haben, können wir einen Winkeldienst schaffen, um mit dem Rest -API -Ende zu kommunizieren.
Erstellen Sie den Dienst, um mit der Rest -API zurück zu kommunizieren
Verwenden wir Angular CLI, um einen Apiservice zu erstellen, um mit unserem REST -API zurück zu kommunizieren:
<span>"scripts": {
</span> <span>...
</span> <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>Dies gibt die folgende Ausgabe:
<span>npm install -g @angular/cli@latest </span>
Die Option -Module App.Module.TS fordert Angular CLI an, den Dienst nicht nur zu erstellen, sondern ihn auch als Anbieter im in App.module definierten Winkelmodul zu registrieren.
Öffnen wir src/app/api.service.ts:
npm uninstall -g @angular/cli angular-cli npm cache clean <span>npm install -g @angular/cli@latest </span>
Als nächstes injizieren wir unsere Umgebung und den integrierten HTTP-Service von Angular:
<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git </span><span>cd angular-todo-app </span><span>git checkout part-2 </span><span>npm install </span>ng serve
Bevor wir die von uns benötigten Methoden implementieren, schauen wir uns den HTTP -Service von Angular an.
Wenn Sie mit der Syntax nicht vertraut sind, kaufen Sie unseren Premium -Kurs und stellen Sie Typenkript ein.
Der Winkel -HTTP -Dienst ist als injizierbare Klasse von @angular/http erhältlich.
Es ist auf XHR/JSONP basiert und bietet uns einen HTTP -Client, mit dem wir HTTP -Anforderungen in unserer Winkelanwendung stellen können.
Die folgenden Methoden stehen zur Durchführung von HTTP -Anforderungen zur Verfügung:
Jede dieser Methoden gibt ein RXJS beobachtbar zurück.
Im Gegensatz zu den AngularJs 1.x HTTP -Service -Methoden, die Versprechen zurückgegeben haben, geben die Angular HTTP -Dienstmethoden Observable zurück.
Mach dir keine Sorgen, wenn du mit RxJS Observable noch nicht vertraut bist. Wir brauchen nur die Grundlagen, um unsere Bewerbung zum Laufen zu bringen. Sie können nach und nach mehr über die verfügbaren Betreiber erfahren, wenn Ihre Bewerbung sie benötigt, und die Reactivex -Website bietet fantastische Dokumentation.
Wenn Sie mehr über Observablen erfahren möchten, kann es sich auch lohnt, die Einführung von SitePoint in die funktionale reaktive Programmierung mit RXJS zu überprüfen.
Wenn wir an die Endpunkte zurückdenken, zeigt unsere REST -API -Back -End:
get /todos: Holen Sie sich alle vorhandenen Todos
get /todos /: id: Holen Sie sich ein vorhandenes Todo
post /todos: Erstellen Sie ein neues Todo
put /todos /: id: aktualisiert ein vorhandenes Todo
delete /todos /: id: Löschen eines vorhandenen Todo
Wir können bereits eine grobe Übersicht über Methoden erstellen, die wir benötigen, und deren entsprechende Winkel -HTTP -Methoden:
<span>npm install json-server --save </span>
Schauen wir uns jede der Methoden genauer an.
Die Methode getAlltodos () ermöglicht es uns, alle Todos aus der API zu holen:
<span>{
</span> <span>"todos": [
</span> <span>{
</span> <span>"id": 1,
</span> <span>"title": "Read SitePoint article",
</span> <span>"complete": false
</span> <span>},
</span> <span>{
</span> <span>"id": 2,
</span> <span>"title": "Clean inbox",
</span> <span>"complete": false
</span> <span>},
</span> <span>{
</span> <span>"id": 3,
</span> <span>"title": "Make restaurant reservation",
</span> <span>"complete": false
</span> <span>}
</span> <span>]
</span><span>}
</span>Erstens stellen wir eine Anfrage, um alle Todos von unserer API zu holen:
<span>"scripts": {
</span> <span>...
</span> <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>Dies gibt ein beobachtbares.
zurückwir nennen dann die MAP () -Methode auf der Beobachtbaren, um die Antwort von der API in ein Array von Todo -Objekten umzuwandeln:
<span>npm install -g @angular/cli@latest </span>
Die eingehende HTTP -Antwort ist eine Zeichenfolge, daher rufen wir zuerst Antwort auf.
wir schauen uns dann über die Todos der API -Antwort und geben ein Array von Todo -Instanzen zurück. Beachten Sie, dass diese zweite Verwendung von map () Array.Prototype.map () verwendet, nicht den RXJS -Operator.
Schließlich fügen wir einen Fehlerhandler an, um potenzielle Fehler an der Konsole zu protokollieren:
npm uninstall -g @angular/cli angular-cli npm cache clean <span>npm install -g @angular/cli@latest </span>
Wir definieren den Fehlerhandler in einer separaten Methode, damit wir ihn in anderen Methoden wiederverwenden können:
<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git </span><span>cd angular-todo-app </span><span>git checkout part-2 </span><span>npm install </span>ng serve
Bevor wir diesen Code ausführen können, müssen wir die erforderlichen Abhängigkeiten aus der RXJS -Bibliothek importieren:
<span>npm install json-server --save </span>
Beachten Sie, dass die RXJS -Bibliothek riesig ist. Anstatt die gesamte RXJS -Bibliothek mithilfe von Import * als RX aus 'RXJS/RX' zu importieren, wird empfohlen, nur die von Ihnen benötigten Teile zu importieren. Dies wird die Größe Ihres resultierenden Codebündels erheblich auf ein Minimum reduzieren.
In unserer Anwendung importieren wir die beobachtbare Klasse:
<span>{
</span> <span>"todos": [
</span> <span>{
</span> <span>"id": 1,
</span> <span>"title": "Read SitePoint article",
</span> <span>"complete": false
</span> <span>},
</span> <span>{
</span> <span>"id": 2,
</span> <span>"title": "Clean inbox",
</span> <span>"complete": false
</span> <span>},
</span> <span>{
</span> <span>"id": 3,
</span> <span>"title": "Make restaurant reservation",
</span> <span>"complete": false
</span> <span>}
</span> <span>]
</span><span>}
</span>Wir importieren die drei Operatoren, die unser Code benötigt:
<span>"scripts": {
</span> <span>...
</span> <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>importierende Operatoren stellt sicher, dass unsere beobachtbaren Instanzen die entsprechenden Methoden mit ihnen angehängt haben.
Wenn wir in unserem Code nicht importieren "rxjs/add/operator/map" haben, würde Folgendes nicht funktionieren:
<span>npm run json-server </span>
Dies liegt daran
Wir müssen die Operatoren nur einmal importieren, um die entsprechenden beobachtbaren Methoden in Ihrer Anwendung weltweit zu ermöglichen. Es ist jedoch kein Problem, sie mehr als einmal zu importieren und die resultierende Bündelgröße nicht zu erhöhen.GetTodobyid ()
<span>\{^_^}/ hi!
</span>
Loading db.json
Done
Resources
http://localhost:3000/todos
Home
http://localhost:3000
createTodo ()
<span>// src/environments/environment.ts
</span><span>// used when we run `ng serve` or `ng build`
</span><span>export const environment = {
</span> production<span>: false,
</span>
<span>// URL of development API
</span> apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>
<span>// src/environments/environment.prod.ts
</span><span>// used when we run `ng serve --environment prod` or `ng build --environment prod`
</span><span>export const environment = {
</span> production<span>: true,
</span>
<span>// URL of production API
</span> apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>
<span>import { environment } from 'environments/environment';
</span>
<span>// we can now access environment.apiUrl
</span><span>const API_URL = environment.apiUrl;
</span>
<span>"environments": {
</span> <span>"dev": "environments/environment.ts",
</span> <span>"prod": "environments/environment.prod.ts"
</span><span>}
</span>
<span>"environments": {
</span> <span>"dev": "environments/environment.ts",
</span> <span>"staging": "environments/environment.staging.ts",
</span> <span>"prod": "environments/environment.prod.ts"
</span><span>}
</span>
ng generate <span>service Api --module app.module.ts </span>
installing <span>service </span> create src/app/api.service.spec.ts create src/app/api.service.ts update src/app/app.module.ts
<span>import { Injectable } from '@angular/core';
</span>
<span><span>@Injectable</span>()
</span><span>export class ApiService {
</span>
<span>constructor() { }
</span>
<span>}
</span>
<span>import { Injectable } from '@angular/core';
</span><span>import { environment } from 'environments/environment';
</span><span>import { Http } from '@angular/http';
</span>
<span>const API_URL = environment.apiUrl;
</span>
<span><span>@Injectable</span>()
</span><span>export class ApiService {
</span>
<span>constructor(
</span> <span>private http: Http
</span> <span>) {
</span> <span>}
</span>
<span>}
</span>Hier ist der vollständige Code für unseren Apiservice:
<span>npm install -g @angular/cli@latest </span>
Jetzt, da wir unseren Apiservice haben, können wir ihn verwenden, um unser TododataService mit unserem REST -API -Ende kommunizieren zu lassen.
Derzeit speichert unser TododataService alle Daten in Speicher:
npm uninstall -g @angular/cli angular-cli npm cache clean <span>npm install -g @angular/cli@latest </span>
Um unser TododataService mit unserem REST -API -Ende kommunizieren zu lassen, müssen wir unseren neuen Apiservice injizieren:
<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git </span><span>cd angular-todo-app </span><span>git checkout part-2 </span><span>npm install </span>ng serve
Wir aktualisieren auch seine Methoden, um alle Arbeiten an die entsprechenden Methoden im Apiservice zu delegieren:
<span>npm install json-server --save </span>
Unsere neuen Methodenimplementierungen sehen viel einfacher aus, da die Datenlogik nun vom Rest -API -Ende bearbeitet wird.
Es gibt jedoch einen wichtigen Unterschied. Die alten Methoden enthielten Synchroncode und kehrten sofort einen Wert zurück. Die aktualisierten Methoden enthalten asynchroner Code und geben ein beobachtbares zurück.
Dies bedeutet auch
appComponent
<span>{
</span> <span>"todos": [
</span> <span>{
</span> <span>"id": 1,
</span> <span>"title": "Read SitePoint article",
</span> <span>"complete": false
</span> <span>},
</span> <span>{
</span> <span>"id": 2,
</span> <span>"title": "Clean inbox",
</span> <span>"complete": false
</span> <span>},
</span> <span>{
</span> <span>"id": 3,
</span> <span>"title": "Make restaurant reservation",
</span> <span>"complete": false
</span> <span>}
</span> <span>]
</span><span>}
</span>Ähnlich wie bei Versprechungen sind Observablen von Natur aus asynchron. Daher müssen wir den Code aktualisieren, um die beobachtbaren Antworten entsprechend zu verarbeiten:
Wenn wir derzeit die Methode toDodataService.getAlltodos () in Get Todos () nennen:
<span>"scripts": {
</span> <span>...
</span> <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>
<span>npm run json-server </span>
<span>\{^_^}/ hi!
</span>
Loading db.json
Done
Resources
http://localhost:3000/todos
Home
http://localhost:3000
solange wir uns nicht an die beobachtbare abonnieren, die von:
zurückgegeben wurde
<span>// src/environments/environment.ts
</span><span>// used when we run `ng serve` or `ng build`
</span><span>export const environment = {
</span> production<span>: false,
</span>
<span>// URL of development API
</span> apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>Um ein beobachtbares Abonnement zu abonnieren, können wir die Methode subscribe () verwenden, die drei Argumente annimmt:
Schreiben wir unseren aktuellen Code um:
<span>// src/environments/environment.prod.ts
</span><span>// used when we run `ng serve --environment prod` or `ng build --environment prod`
</span><span>export const environment = {
</span> production<span>: true,
</span>
<span>// URL of production API
</span> apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>lädt das Todos asynchron, wenn die AppComponent initialisiert wird:
<span>import { environment } from 'environments/environment';
</span>
<span>// we can now access environment.apiUrl
</span><span>const API_URL = environment.apiUrl;
</span>Erstens definieren wir ein öffentliches Eigentum, Todos und setzen ihren Anfangswert auf ein leeres Array.
Wir verwenden dann die ngoninit () -Methode, um dies zu abonnieren.
Lassen Sie uns nun die Methode Onaddtodo (TODO) aktualisieren, um auch eine beobachtbare Antwort zu verarbeiten:
<span>"environments": {
</span> <span>"dev": "environments/environment.ts",
</span> <span>"prod": "environments/environment.prod.ts"
</span><span>}
</span>Wir wiederholen die gleiche Übung für die anderen Methoden, bis unsere AppComponent so aussieht:
<span>npm install -g @angular/cli@latest </span>
Das ist es; Alle Methoden können nun von den TododataService -Methoden zurückgegeben werden.
Beachten Sie, dass sich nicht manuell abmelden muss, wenn Sie ein Beobachtbar abonnieren, das durch den angularen HTTP -Service zurückgegeben wird. Angular wird alles für Sie aufräumen, um Speicherlecks zu verhindern.
Mal sehen, ob alles wie erwartet funktioniert.
Öffnen Sie ein Terminalfenster.
Starten Sie aus der Stammin unseres Anwendungsverzeichnisses das REST -API zurück:
npm uninstall -g @angular/cli angular-cli npm cache clean <span>npm install -g @angular/cli@latest </span>
Öffnen Sie ein zweites Terminalfenster.
Diene erneut aus der Wurzel unseres Anwendungsverzeichnisses der Winkelanwendung:
<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git </span><span>cd angular-todo-app </span><span>git checkout part-2 </span><span>npm install </span>ng serve
Navigieren Sie jetzt in Ihrem Browser zu http: // localhost: 4200.
Wenn alles gut geht, sollten Sie Folgendes sehen:
Wenn Sie einen Fehler sehen, können Sie Ihren Code mit der Arbeitsversion auf GitHub vergleichen.
Super! Unsere Bewerbung kommuniziert jetzt mit dem Rest -API -Ende!
Seitenspitze: Wenn Sie NPM ausführen möchten, können Sie JSON-Server und NG im selben Terminal ausführen, können Sie gleichzeitig verwenden, um beide Befehle gleichzeitig auszuführen, ohne mehrere Terminalfenster oder Registerkarten zu öffnen.
Führen Sie unsere Unit -Tests durch, um zu überprüfen, ob alles wie erwartet funktioniert.
Öffnen Sie ein drittes Terminalfenster.
Führen Sie erneut aus der Stammin Ihres Anwendungsverzeichnisses die Unit -Tests aus:
<span>npm install json-server --save </span>
Es scheint, dass 11 Unit -Tests ausfallen:
Lassen Sie uns sehen, warum unsere Tests fehlschlagen und wie wir sie beheben können.
Erstens öffnen wir src/todo-data.service.spec.ts:
<span>{
</span> <span>"todos": [
</span> <span>{
</span> <span>"id": 1,
</span> <span>"title": "Read SitePoint article",
</span> <span>"complete": false
</span> <span>},
</span> <span>{
</span> <span>"id": 2,
</span> <span>"title": "Clean inbox",
</span> <span>"complete": false
</span> <span>},
</span> <span>{
</span> <span>"id": 3,
</span> <span>"title": "Make restaurant reservation",
</span> <span>"complete": false
</span> <span>}
</span> <span>]
</span><span>}
</span>Die meisten fehlenden Unit -Tests befassen sich mit der Überprüfung der Datenbehandlung. Diese Tests sind nicht mehr erforderlich, da die Datenbehandlung jetzt von unserem REST -API -Back -End anstelle des TododataService durchgeführt wird. Entfernen wir also die veralteten Tests:
<span>"scripts": {
</span> <span>...
</span> <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>Wenn wir jetzt die Unit -Tests ausführen, erhalten wir einen Fehler:
<span>npm run json-server </span>
Der Fehler wird geworfen
Um den Injektor auf den Apiservice aufmerksam zu machen, müssen wir ihn mit dem temporären Modul registrieren, indem wir den Apiservice als Anbieter im Konfigurationsobjekt auflisten, das an testbed.configurEtestingModule () übergeben wird:
<span>\{^_^}/ hi!
</span>
Loading db.json
Done
Resources
http://localhost:3000/todos
Home
http://localhost:3000
Wir möchten nicht, dass unser Testläufer beim Ausführen unserer Unit -Tests eine Verbindung zu einer echten API herstellt. Erstellen Sie also einen Apimock -Service, um den wirklichen Apiservice in Unit -Tests zu verspotten.
Erstellen eines ApimockService
<span>npm install -g @angular/cli@latest </span>
Dies zeigt Folgendes:
npm uninstall -g @angular/cli angular-cli npm cache clean <span>npm install -g @angular/cli@latest </span>
Als nächstes implementieren wir dieselben Methoden wie Apiservice, aber wir lassen die Methoden Scheindaten zurückgeben, anstatt HTTP -Anforderungen zu erstellen:
<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git </span><span>cd angular-todo-app </span><span>git checkout part-2 </span><span>npm install </span>ng serve
Beachten Sie, wie jede Methode neue neue Scheindaten zurückgibt. Dies mag sich ein bisschen wiederholt, aber es ist eine gute Praxis. Wenn ein Unit -Test die Scheindaten ändern würde, kann die Änderung die Daten in einem anderen Unit -Test niemals beeinflussen.
Jetzt, da wir einen ApimockService -Service haben, können wir in unseren Unit -Tests mit ApimockService Apiservice ersetzen.
Lassen Sie uns Src/Todo-Data.Service.spec.ts erneut öffnen.
Im Anbieter -Array sagen wir dem Injektor, er solle den ApimockService anbieten, wenn der Apiservice angefordert wird:
<span>npm install json-server --save </span>
Wenn wir jetzt die Unit-Tests erneut durchführen, ist der Fehler verschwunden. Toll!
Wir haben jedoch noch zwei fehlgeschlagene Tests:
<span>{
</span> <span>"todos": [
</span> <span>{
</span> <span>"id": 1,
</span> <span>"title": "Read SitePoint article",
</span> <span>"complete": false
</span> <span>},
</span> <span>{
</span> <span>"id": 2,
</span> <span>"title": "Clean inbox",
</span> <span>"complete": false
</span> <span>},
</span> <span>{
</span> <span>"id": 3,
</span> <span>"title": "Make restaurant reservation",
</span> <span>"complete": false
</span> <span>}
</span> <span>]
</span><span>}
</span>Die Fehler sind ähnlich wie die, die wir gerade behoben haben.
Öffnen wir src/api.service.spec.ts:
, um den ersten Fehler zu beheben:<span>"scripts": {
</span> <span>...
</span> <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>Der Test schlägt mit einer Nachricht versagt, kein Anbieter für HTTP!
Auch hier möchten wir nicht, dass der HTTP -Dienst echte HTTP -Anfragen sendet. Daher instanziieren wir einen Mock HTTP -Dienst, der Angulars Mockbackend verwendet:
<span>npm run json-server </span>
Machen Sie sich keine Sorgen, wenn das Konfigurieren des Testmoduls etwas überwältigend aussieht.
Sie können mehr über das Einrichten von Unit -Tests in der offiziellen Dokumentation zum Testen von Winkelanwendungen erfahren.
um den endgültigen Fehler zu beheben:
<span>\{^_^}/ hi!
</span>
Loading db.json
Done
Resources
http://localhost:3000/todos
Home
http://localhost:3000
Öffnen wir src/app.component.spec.ts:
<span>// src/environments/environment.ts
</span><span>// used when we run `ng serve` or `ng build`
</span><span>export const environment = {
</span> production<span>: false,
</span>
<span>// URL of development API
</span> apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>Stellen Sie den Injektor dann unseren Schein -Apiservice an:
<span>// src/environments/environment.prod.ts
</span><span>// used when we run `ng serve --environment prod` or `ng build --environment prod`
</span><span>export const environment = {
</span> production<span>: true,
</span>
<span>// URL of production API
</span> apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>Hurra! Alle unsere Tests bestehen:
Wir haben unsere Winkelanwendung erfolgreich mit unserem REST -API -Back -End verbunden.
Um unsere Anwendung in einer Produktionsumgebung bereitzustellen, können wir jetzt ausführen:
<span>import { environment } from 'environments/environment';
</span>
<span>// we can now access environment.apiUrl
</span><span>const API_URL = environment.apiUrl;
</span>Wir laden das generierte DIST -Verzeichnis auch auf unseren Hosting -Server hoch. Wie süß ist das?
Lassen Sie uns das zusammenschließen, was wir gelernt haben.
Im ersten Artikel haben wir gelernt, wie man:
Im zweiten Artikel haben wir AppComponent überarbeitet, um den größten Teil seiner Arbeit zu delegieren, um:
zu delegieren:In diesem dritten Artikel:
dabei haben wir gelernt:
Alle Code aus diesem Artikel finden Sie in GitHub.
In Teil vier stellen wir den Router und Refactor AppComponent vor, um den Router zu verwenden, um die Todos vom hinteren Ende abzurufen.
In Teil 5 werden wir die Authentifizierung implementieren, um den unbefugten Zugriff auf unsere Anwendung zu verhindern.
Dieser Artikel wurde von Vildan Softic geprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, die SitePoint -Inhalte so gut wie möglich gemacht haben!
Das obige ist der detaillierte Inhalt vonAngular und RXJS: Hinzufügen einer REST -API -Back -End. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Verwendung der ppf-Funktion in Python
Welche virtuellen Währungen könnten im Jahr 2024 stark ansteigen?
Die Rolle der Parseint-Funktion
Was sind Zeichenkonstanten?
So öffnen Sie das TIF-Format in Windows
Die Laufumgebung des Java-Programms
Lösung für ungültige Signatur
Warum öffnet sich die mobile Festplatte so langsam?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
