Share
Im ersten Teil des Anfängerleitfadens zur Angular-Lernreihe haben Sie gelernt, welche Komponenten in Angular 4 enthalten sind und wie Angular-Komponenten geschrieben werden.
In diesem Teil der Lernprogrammreihe erfahren Sie, welche Dienste in Angular enthalten sind und wie Sie sie verwenden können.
Sie beginnen mit dem Klonen des Quellcodes aus dem ersten Teil der Übungsreihe.
Git Klon https://github.com/royagasthyan/AngularComponent.git
Wenn Sie über den Quellcode verfügen, navigieren Sie zum Projektverzeichnis und installieren Sie die erforderlichen Abhängigkeiten.
cd AngularComponent npm installieren
Starten Sie nach der Installation der Abhängigkeiten die Anwendung, indem Sie den folgenden Befehl eingeben:
ng dienen
Sie sollten die Anwendung auf http: // localhost: 4200 / ausführen..
In einer Angular-Anwendung behandeln Komponenten die Darstellung der Daten für die Ansicht. Das Abrufen von Daten für die anzuzeigenden Komponenten wird von Angular-Services ausgeführt.
Da der Datenabrufbereich in Angular-Diensten separat gehandhabt wird, ist es einfacher, Testdienste zu simulieren.
Aus der offiziellen Dokumentation:
Komponenten sollten Daten nicht direkt abrufen oder speichern und sie sollten auf keinen Fall gefälschte Daten darstellen. Sie sollten sich auf die Präsentation von Daten konzentrieren und den Datenzugriff an einen Dienst delegieren.
In diesem Lernprogramm erfahren Sie, wie Sie einen Angular-Dienst zum Abrufen von Daten für eine Angular-Komponente erstellen.
Ein weiterer Vorteil der Verwendung von Angular-Diensten ist, dass es einfacher ist, Daten zwischen zwei separaten Komponenten zu teilen.
In diesem Lernprogramm erstellen Sie eine Wortkomponente, die das vom Endbenutzer eingegebene Abfragewort anhand einer API durchsucht und das Suchergebnis zurückgibt.
Sie rufen den API-Aufruf mit einem Angular-Dienst auf. Beginnen wir also mit dem Erstellen einer Winkelkomponente.
Navigieren Sie zum Projektverzeichnis und erstellen Sie einen Ordner mit dem Namen Wort.
In der Wort Projektverzeichnis erstellen Sie eine Datei namens word.component.html. Fügen Sie den folgenden HTML-Code hinzu:
Wortkomponente
Erstellen Sie eine Datei mit dem Namen word.component.ts was würde die kontrollieren word.component.html Vorlage. So sieht es aus:
Component aus '@ angle / core' importieren; @Component (Selector: 'word', templateUrl: 'word.component.html', styleUrls: ['word.component.css']) Exportklasse WordComponent constructor ()
Wie im obigen Code zu sehen, haben Sie gerade das erstellt WordComponent Klasse, die das kontrollieren würde word.component.html Vorlagendatei.
Es hat ein @Komponente Dekorateur, wo Sie das definiert haben Wähler mit welcher es zugänglich wäre, die templateUrl, und die Komponente styleUrls.
Nachdem Sie die Komponente erstellt haben, müssen Sie die Komponentenklasse zum hinzufügen NgModule.
Öffne das app.module.ts Datei in der src / app Verzeichnis und importieren Sie das neue WordComponent.
WordComponent aus './word/word.component' importieren
Umfassen die WordComponent in der NgModule Erklärungen. Hier ist wie das app.module.ts Datei sieht:
BrowserModule aus '@ angle / platform-browser' importieren; NgModule aus '@ angle / core' importieren; import AppComponent aus './app.component'; import CalcComponent aus './calc/calc.component' import WordComponent aus './word/word.component' import FormsModule aus '@ angle / forms'; @NgModule (Deklarationen: [AppComponent, CalcComponent, WordComponent]) importiert: [BrowserModule], FormsModule], Provider: [], Bootstrap: [AppComponent]) Exportklasse AppModule
Öffne das app.component.html Datei in der src / app Ordner und fügen Sie den neuen hinzu WordComponent mit dem definierten Selektor. So sieht es aus:
Speichern Sie die obigen Änderungen und starten Sie den Server erneut. Die Wortkomponente sollte beim Laden der Anwendung angezeigt werden.
Erstellen Sie einen Angular-Dienst, um das Wort mit einer Dienst-URL abzufragen, die Synonyme des Wortes zurückgeben würde.
Sie verwenden die Datamuse-API zum Abfragen eines Schlüsselworts.
Erstellen Sie eine Datei mit dem Namen word.service.ts in der src / app / word Mappe. Sie werden das verwenden @Injectable () Dekorateur, um die Serviceklasse für die Injektion verfügbar zu machen.
Hier ist wie das word.service.ts Datei würde aussehen:
import Injectable aus '@ angle / core'; @Injectable () Exportklasse WordService Konstruktor ()
Um einen API-Aufruf durchzuführen, verwenden Sie die HTTP Modul. Importieren Sie die HttpModule in dem src / app / app.module.ts Datei. So sieht die Datei aus:
BrowserModule aus '@ angle / platform-browser' importieren; NgModule aus '@ angle / core' importieren; import AppComponent aus './app.component'; import CalcComponent aus './calc/calc.component' import WordComponent aus './word/word.component' import FormsModule aus '@ angle / forms'; importiere HttpModule von '@ angle / http'; @NgModule (Deklarationen: [AppComponent, CalcComponent, WordComponent]) importiert: [BrowserModule, FormsModule, HttpModule], Anbieter: [], Bootstrap: [AppComponent]) Exportklasse AppModule
Importieren Sie die Http Modul in der word.service.ts Datei, um API-Aufrufe durchzuführen.
Http von '@ angle / http' importieren;
Sie machen API-Aufrufe an die folgende URL.
https://api.datamuse.com/words?max=10&ml=
Sie müssen das Abfrageschlüsselwort zusammen mit der obigen URL anfügen, um maximal 10 Synonyme des Abfragebegriffs zu erhalten.
Definieren Sie die Variable url in der WordService klassifizieren und innerhalb der Konstruktormethode initialisieren.
Exportklasse WordService url: Zeichenfolgekonstruktor (privat http: Http) this.url = 'https://api.datamuse.com/words?max=10&ml='
Sie haben das deklariert und initialisiert http Variable, die Sie bei API-Aufrufen verwenden.
Definieren Sie eine aufgerufene Methode Suchbegriff das würde das Ergebnis des API-Aufrufs als zurückgeben JSON. So sieht es aus:
search_word (term) return this.http.get (this.url + term) .map (res => return res.json ())
Wie im obigen Code zu sehen ist, haben Sie eine ERHALTEN Anfrage an die API-URL mit dem Angular Http Modul und gab die Antwort als zurück JSON. Hier ist wie das word.service.ts Datei sieht:
import Injectable aus '@ angle / core'; Http von '@ angle / http' importieren; import 'rxjs / add / operator / map' @Injectable () export class WordService url: Zeichenfolgekonstruktor (privat http: Http) this.url = 'https://api.datamuse.com/words?max=10&ml= ' search_word (term) return this.http.get (this.url + term) .map (res => return res.json ())
Nun, da Sie den Word-Dienst für die API-Aufrufe bereit haben, müssen Sie den Dienst definieren WordService als Anbieter in der WordComponent.
Importieren Sie die WordService in dem word.component.ts Datei.
importiere WordService von './word.service';
Definiere das Anbieter im Winkel WordComponent.
@Component (Selector: 'word', templateUrl: 'word.component.html', styleUrls: ['word.component.css'], Provider: [WordService])
Initialisieren Sie die WordService in der Konstrukteur Methode.
Konstruktor (privater Dienst: WordService)
Definieren Sie eine aufgerufene Methode Suche in der word.component.ts Datei, die die Servicemethode aufrufen würde. In der Suche Methode, abonnieren Sie die Suchbegriff Methode aus der WordService.
Suche (Begriff) this.service.search_word (Begriff) .subscribe (res => this.words = res;)
So wird das modifiziert word.component.ts Datei sieht:
Component aus '@ angle / core' importieren; importiere WordService von './word.service'; @Component (Selector: 'word', templateUrl: 'word.component.html', styleUrls: ['word.component.css'], Provider: [WordService]) Exportklasse WordComponent words: any; Konstruktor (privater Dienst: WordService) search (Begriff) this.service.search_word (Begriff) .subscribe (res => this.words = res;)
Fügen Sie das Eingabe-Tastendruckereignis dem Eingabeelement in der hinzu word.component.html Datei.
Nach der Eingabe eines Abfragebegriffs, wenn der Benutzer die Eingabetaste drückt, wird die Suchmethode in aufgerufen word.component.ts Datei.
Wie im gesehen Suche Methode innerhalb der word.component.ts Datei, sammeln Sie die Antwort in der Wörter Variable als Liste. Also lass uns das wiederholen Wörter Liste und Anzeige in der word.component.html Datei.
Modifiziere den word.component.html Datei wie gezeigt:
- item.word
Speichern Sie die obigen Änderungen und starten Sie den Server erneut. Geben Sie ein Schlüsselwort ein und drücken Sie die Eingabetaste. Das Ergebnis sollte als Liste angezeigt werden.
In diesem Lernprogramm haben Sie erfahren, was Angular-Dienste sind. Sie haben gelernt, wie Sie Angular-Services erstellen und von einer Angular-Komponente verwenden. Sie haben eine Word-Komponente erstellt, die das eingegebene Schlüsselwort bei einem Angular-Dienst abfragt und die zurückgegebenen Daten in der Komponentenvorlagendatei anzeigt.
Wie waren Ihre Erfahrungen mit dem Lernen von Angular-Diensten? Teilen Sie uns Ihre Kommentare und Vorschläge im Kommentarbereich mit.
Der Quellcode aus diesem Tutorial ist auf GitHub verfügbar.
Accentsconagua