Share
Im ersten Tutorial der Serie haben wir gelernt, wie Sie eine Angular-App erstellen können. Nach erfolgreichem Abschluss dieses Lernprogramms sollten Sie jetzt Ihre erste funktionsfähige Angular-App mit der Überschrift "Wissenswertes über Länder" haben. Bevor Sie Komponenten erstellen, die auf dem Bildschirm dargestellt werden können, erstellen wir einige Klassen und definieren einige Funktionen, die diese Komponenten nützlich machen.
In diesem Tutorial konzentrieren wir uns auf die Erstellung einer Land Klasse, die verschiedene Eigenschaften enthält, deren Wert wir dem Benutzer anzeigen möchten. Wir erstellen dann eine weitere Datei mit dem Namen länderdaten.ts. Diese Datei enthält Informationen zu allen Ländern in unserer App. Unsere dritte Datei wird benannt country.service.ts. Der Name klingt vielleicht ausgefallen, aber die Datei enthält nur ein CountryService Klasse mit allen erforderlichen Funktionen zum Abrufen und Sortieren der von der Datei bereitgestellten Informationen länderdaten.ts.
In der src / app Ordner Ihrer Angular-App erstellen Sie eine Datei mit dem Namen country.ts. Fügen Sie den folgenden Code hinzu.
Exportklasse Land Name: Zeichenfolge; Hauptstadt: String; Bereich: Nummer; Bevölkerung: Anzahl; währung: string; BIP: Anzahl;
Der obige TypeScript-Code definiert die Land Klasse mit sechs verschiedenen Eigenschaften zum Speichern von Informationen über verschiedene Länder. Der Name des Landes, seine Hauptstadt und seine Währung werden als Zeichenfolge gespeichert. Sein Gebiet, seine Bevölkerung und sein BIP werden jedoch als Zahl gespeichert. Wir importieren die Land Klasse an vielen Orten, also habe ich die hinzugefügt Export Schlüsselwort vor der Klassendefinition.
Im nächsten Schritt erstellen Sie eine länderdaten.ts Datei, um die Informationen über alle Länder als Array von zu speichern Land Objekte. Wir importieren die Land Klasse in dieser Datei und dann Exportieren eines const genannt LÄNDER die speichert eine Reihe von Länderobjekten.
Hier ist der Code für länderdaten.ts. So wie country.ts, Sie müssen diese Datei im erstellen src / app Mappe.
import Country von './country'; export const LÄNDER: Land [] = [Name: 'Russland', Hauptstadt: 'Moskau', Fläche: 17098246, Bevölkerung: 144463451, Währung: 'Russischer Rubel', BIP: 1283162, Name: 'Kanada', Hauptstadt : 'Ottawa', Fläche: 9984670, Bevölkerung: 35151728, Währung: 'Kanadischer Dollar', BIP: 159760, Name: 'China', Hauptstadt: 'Peking', Fläche: 9596961, Bevölkerung: 1403500365, Währung: 'Renminbi (Yuan) ', BIP: 11199145, Name:' Vereinigte Staaten ', Hauptstadt:' Washington, DC ', Fläche: 9525067, Einwohnerzahl: 325365189, Währung:' US-Dollar ', BIP: 18569100, Name: 'Japan', Hauptstadt: 'Tokyo', Fläche: 377972, Bevölkerung: 12676200, Währung: 'Yen', BIP: 4939384];
Die erste Zeile in dieser Datei importiert die Land Klasse aus der country.ts Datei im selben Verzeichnis. Wenn Sie diese Zeile aus der Datei entfernen, gibt TypeScript den folgenden Fehler aus:
Name 'Land' kann nicht gefunden werden.
Ohne die import-Anweisung hat TypeScript keine Ahnung, was für ein Array vom Typ ist Land meint. Stellen Sie also sicher, dass Sie die richtige Klasse importiert und den Speicherort von angegeben haben country.ts korrekt.
Nach dem Importieren der Land Klasse, gehen wir voran und erstellen ein Array von Land Objekte. Wir werden dieses Array von Ländern für die Verwendung in anderen Dateien importieren Export Stichwort auch zu diesem Array. Derzeit gibt es fünf verschiedene Land Objekte im Array. Jedes dieser fünf Objekte enthält Schlüsselwertpaare, in denen der Name einer Eigenschaft und deren Wert für ein bestimmtes Objekt oder Land aufgeführt werden.
Wenn Sie versuchen, dem Array eine zusätzliche Eigenschaft hinzuzufügen, die nicht im deklariert wurde Land Klassendefinition erhalten Sie den folgenden Fehler:
Objektliteral kann nur bekannte Eigenschaften angeben, und "Präsident" ist nicht im Typ "Land" vorhanden.
In diesem Fall habe ich versucht, den Namen des Präsidenten als zu speichern Schnur in einer Eigenschaft namens Präsident. Da keine solche Eigenschaft deklariert wurde, haben wir einen Fehler erhalten. In manchen Fällen möchten Sie möglicherweise eine Eigenschaft nur für bestimmte Objekte und nicht für andere Objekte angeben. In solchen Fällen können Sie die Eigenschaft optional in der Klassendefinition markieren. Ich habe es in einem Tutorial ausführlicher besprochen, das TypeScript-Schnittstellen behandelt.
Stellen Sie zunächst sicher, dass die Namen aller Eigenschaften mit den Namen in der Klassendefinition übereinstimmen. Stellen Sie außerdem sicher, dass der Wert jeder Eigenschaft denselben Typ hat wie in der Klassendefinition deklariert.
Nach dem Erstellen unserer Land Klasse und LÄNDER Array können wir nun endlich einige Funktionen schreiben, um die Länderdaten zu verarbeiten. Wir müssen beide importieren Land Klasse und die LÄNDER Array in unserer Servicedatei. Die Datei muss das importieren LÄNDER Array, um auf die Daten zugreifen zu können. Ebenso muss die Datei das importieren Land Klasse, um die Daten innerhalb der LÄNDER Array.
Wir werden auch andere Abhängigkeiten wie importieren Injizierbar von Angular Core, um unser zu machen CountryService Klasse für den Injektor verfügbar, um andere Komponenten zu injizieren.
Sobald Ihre App größer wird, müssen verschiedene Module miteinander kommunizieren. Sagen wir das mal Modul A erfordert ModuleB um richtig zu arbeiten. In solchen Fällen würden wir anrufen ModuleB eine Abhängigkeit von Modul A.
Das Importieren des von uns benötigten Moduls in eine andere Datei funktioniert meistens. Manchmal müssen wir jedoch entscheiden, ob wir eine einzelne Instanz von Klassen erstellen sollen ModuleB Dies wird von der gesamten App verwendet, oder wenn jedes Mal, wenn das Modul verwendet wird, eine neue Instanz erstellt werden soll. In unserem Fall werden wir eine einzige Instanz unserer Instanz einfügen CountryService Klasse in der App.
Hier ist der Code für country.service.ts:
import Injectable aus '@ angle / core'; import Country von './country'; importiere LÄNDER von './country-data'; @Injectable () Exportklasse CountryService Konstruktor () getCountries (): Land [] Rückkehr LÄNDER; getPopulatedCountries (): Country [] return COUNTRIES.sort ((a, b) => b.population - a.population) .slice (0, 3); getLargestCountries (): Country [] return COUNTRIES.sort ((a, b) => b.area - a.area) .slice (0, 3); getGDPCountries (): Country [] return COUNTRIES.sort ((a, b) => b.gdp - a.gdp) .slice (0, 3); getCountry (name: string): Country return COUNTRIES.find (country => country.name === name);
Ein @ injizierbar decorator wird verwendet, um eine Serviceklasse zu identifizieren, für die möglicherweise Abhängigkeiten erforderlich sind. Das Hinzufügen von @ injizierbar Klassen zu bedienen ist ein notwendiger Codierstil, also machen wir es trotzdem.
Danach schreiben wir verschiedene Methoden für die Klasse, die die LÄNDER array und geben Sie es entweder direkt zurück oder sortieren Sie es nach bestimmten Kriterien und geben Sie dann einen Teil des Arrays zurück.
Das getCountries () Es wird erwartet, dass die Methode alle zurückgibt Land Objekte, und so gibt es das Ganze zurück LÄNDER Array, ohne Änderungen daran vorzunehmen.
Das getPopulatedCountries () nimmt die LÄNDER Array und sortiert sie in absteigender Reihenfolge, basierend auf der Bevölkerung der verschiedenen Länder. Wir verwenden dann die Array.slice () -Methode, um die ersten drei Länder (mit den Indizes 0, 1 und 2) aus dem Array zurückzugeben. Das getLargestCountries () und getGDPCountries () Methoden arbeiten auf ähnliche Weise.
Das getCountry () Die Methode verwendet einen Namen als Argument und gibt das Länderobjekt zurück, dessen Name-Eigenschaft den gleichen Wert wie das angegebene Namensargument hat.
Ein von Ihnen erstellter Dienst ist nur eine Klasse in Angular, bis Sie ihn bei einem Angular-Abhängigkeitsinjektor registriert haben. Ein Angular-Injektor ist derjenige, der für die Erstellung von Serviceinstanzen verantwortlich ist und diese in verschiedene Klassen injiziert, die diesen Service benötigen. Wir müssen einen Dienst bei einem Anbieter registrieren, bevor der Injektor diesen Dienst erstellen kann.
Es gibt zwei Möglichkeiten, einen Dienst zu registrieren: a @Komponente Anbieter oder mit der @NgModule Anbieter. Verwendung der @Komponente Provider ist sinnvoll, wenn Sie den Zugriff eines Dienstes auf eine bestimmte Komponente und alle ihre verschachtelten Komponenten beschränken möchten. Verwendung der @NgModule Provider ist sinnvoll, wenn mehrere Komponenten Zugriff auf den Dienst haben sollen.
In unserem Fall werden wir verwenden CountryService mit mehreren Komponenten unserer App. Das heißt, wir sollten es bei der registrieren @NgModule Provider statt der separaten Registrierung bei @Komponente Anbieter jeder Komponente.
Derzeit ist Ihr app.module.ts Datei sollte so aussehen:
BrowserModule aus '@ angle / platform-browser' importieren; NgModule aus '@ angle / core' importieren; import AppComponent aus './app.component'; @NgModule (Deklarationen: [AppComponent], importiert: [BrowserModule], Anbieter: [], Bootstrap: [AppComponent]) Exportklasse AppModule
Fügen Sie eine Importanweisung zum hinzu app.module.ts Datei und fügen Sie den Dienst dem hinzu @NgModule Anbieter-Array. Nachdem Sie diese Änderungen vorgenommen haben, wird Ihre app.module.ts Datei sollte so aussehen:
BrowserModule aus '@ angle / platform-browser' importieren; NgModule aus '@ angle / core' importieren; import AppComponent aus './app.component'; importiere CountryService von './country.service'; @NgModule (Deklarationen: [AppComponent], importiert: [BrowserModule], Anbieter: [CountryService], Bootstrap: [AppComponent]) Exportklasse AppModule
Das CountryService Die Klasse steht nun allen Komponenten zur Verfügung, die wir für unsere App erstellen.
Drei Dateien mit dem Namen erfolgreich erstellt country.ts, länderdaten.ts, und country.service.ts schließt das zweite Tutorial dieser Serie ab.
Das country.ts Datei wird verwendet, um eine Land Klasse mit unterschiedlichen Eigenschaften wie Name, Währung, Einwohnerzahl, Fläche usw. länderdaten.ts Datei wird zum Speichern eines Arrays von Länderobjekten verwendet, die Informationen zu verschiedenen Ländern enthalten. Das country.service.ts Die Datei enthält eine Serviceklasse mit verschiedenen Methoden, um auf die Länderdaten von zuzugreifen LÄNDER Array. Wenn Sie alle diese Methoden separat in einer Serviceklasse schreiben, können Sie auf sie in verschiedenen App-Komponenten von einem zentralen Ort aus zugreifen.
Im letzten Abschnitt haben wir unseren Service bei registriert @NgModule bereitstellen, um es für die Verwendung in verschiedenen Komponenten verfügbar zu machen.
Im nächsten Lernprogramm erfahren Sie, wie Sie drei verschiedene Komponenten in Ihrer App erstellen, um Länderdetails und eine Liste von Ländern anzuzeigen.
Accentsconagua