Share
In de eerste zelfstudie van de serie hebben we geleerd hoe je aan de slag kunt gaan om een Angular-app te maken. Na het voltooien van die tutorial, zou je nu je eerste werkende Angular app moeten hebben met de kop 'Leuke weetjes over landen'. Voordat we componenten maken die op het scherm kunnen worden weergegeven, maken we enkele klassen en definiëren we enkele functies die deze componenten nuttig maken.
In deze zelfstudie concentreren we ons op het maken van een land klasse die verschillende eigenschappen bevat waarvan we de waarde willen weergeven aan de gebruiker. We zullen dan een ander bestand met de naam maken country-data.ts. Dit bestand bevat informatie over alle landen in onze app. Ons derde bestand krijgt de naam country.service.ts. De naam klinkt misschien leuk, maar het bestand bevat alleen een CountryService klasse met alle benodigde functionaliteit om de informatie uit het bestand op te halen en te sorteren country-data.ts.
Binnen in de src / app map van uw Angular-app, maak een bestand met de naam country.ts. Voeg de volgende code erin toe.
exportklasse Land naam: string; kapitaal: string; gebied: nummer; bevolking: aantal; valuta: string; gdp: nummer;
De bovenstaande TypeScript-code definieert de land klas met zes verschillende eigenschappen om informatie over verschillende landen op te slaan. De naam van het land, zijn hoofdstad en zijn valuta worden opgeslagen als een string. Het gebied, de bevolking en het BBP worden echter als een getal opgeslagen. We zullen het importeren land les op veel plaatsen, dus ik heb de exporteren sleutelwoord vóór de klassendefinitie.
De volgende stap omvat het maken van een country-data.ts bestand om de informatie over alle landen op te slaan als een reeks land voorwerpen. We zullen het importeren land klasse in dit bestand en exporteer vervolgens een const genaamd LANDEN waarin een reeks landobjecten wordt opgeslagen.
Hier is de code voor country-data.ts. Net als country.ts, je moet dit bestand aanmaken binnen de src / app map.
importeer Land uit './country'; export const LANDEN: Land [] = [name: 'Rusland', hoofdstad: 'Moskou', oppervlakte: 17098246, bevolking: 144463451, valuta: 'Russian Ruble', gdp: 1283162, name: 'Canada', hoofdletter : 'Ottawa', gebied: 9984670, bevolking: 35151728, munteenheid: 'Canadian Dollar', gdp: 159760, name: 'China', hoofdstad: 'Beijing', oppervlakte: 9596961, bevolking: 1403500365, valuta: 'Renminbi (Yuan) ', gdp: 11199145, name:' United States ', capital:' Washington, DC ', area: 9525067, bevolking: 325365189, munteenheid:' United States Dollar ', gdp: 18569100, name: 'Japan', hoofdstad: 'Tokyo', oppervlakte: 377972, bevolking: 12676200, valuta: 'Yen', bbp: 4939384];
De eerste regel in dit bestand importeert de land klas uit de country.ts bestand in dezelfde map. Als u deze regel uit het bestand verwijdert, geeft TypeScript de volgende foutmelding:
Kan naam 'Land' niet vinden.
Zonder de import-instructie heeft TypeScript geen idee wat een array van type is land middelen. Zorg er dus voor dat je de juiste klasse hebt geïmporteerd en de locatie hebt opgegeven country.ts correct.
Na het importeren van de land klasse, we gaan door en creëren een reeks van land voorwerpen. We importeren deze reeks landen voor gebruik in andere bestanden, dus we voegen er een toe exporteren sleutelwoord ook voor deze array. Momenteel zijn er vijf verschillende land objecten in de array. Elk van deze vijf objecten bevat sleutel / waarde-paren met de naam van een eigenschap en de waarde voor een bepaald object of land.
Als u probeert een extra eigenschap aan de array toe te voegen die niet is gedeclareerd in de land klassendefinitie, krijg je de volgende foutmelding:
Object letterlijk kan alleen bekende eigenschappen specificeren, en 'president' bestaat niet in type 'Land'
In dit geval probeerde ik de naam van de president op te slaan als een draad in een eigenschap met de naam president. Omdat geen van deze eigenschappen werd aangegeven, kregen we een foutmelding. Soms wilt u misschien een eigenschap opgeven voor bepaalde objecten en niet voor anderen. In dergelijke gevallen kunt u de eigenschap optioneel markeren binnen de klassedefinitie. Ik heb het in meer detail besproken in een tutorial over TypeScript-interfaces.
Zorg er nu voor dat de namen van alle eigenschappen overeenkomen met de namen in de klassedefinitie. Zorg er ook voor dat de waarde van elke eigenschap van hetzelfde type is als aangegeven in de klassedefinitie.
Na het maken van onze land klasse en LANDEN array, kunnen we nu eindelijk een aantal functies schrijven om de landgegevens te verwerken. We zullen beide moeten importeren land klasse en de LANDEN array in ons servicebestand. Het bestand zal het moeten importeren LANDEN array om toegang te hebben tot de gegevens. Op dezelfde manier moet het bestand het importeren land klasse om betekenis te geven aan de gegevens in de LANDEN rangschikking.
We zullen ook andere afhankelijkheden zoals importeren injecteerbare van Angular core om onze te maken CountryService klasse beschikbaar voor de Injector om te injecteren in andere componenten.
Zodra uw app groter wordt, moeten verschillende modules met elkaar communiceren. Laten we dat zeggen ModuleA vereist ModuleB om goed te kunnen werken. In dergelijke gevallen zouden we bellen ModuleB een afhankelijkheid van ModuleA.
Het eenvoudigweg importeren van de module die we nodig hebben in een ander bestand werkt meestal. Soms moeten we echter beslissen of we één instantie van klassen moeten maken ModuleB die wordt gebruikt door de hele app of als we een nieuw exemplaar moeten maken telkens wanneer de module wordt gebruikt. In ons geval zullen we één exemplaar van ons injecteren CountryService klasse in de hele app.
Hier is de code voor country.service.ts:
Injectable importeren vanuit '@ angular / core'; importeer Land uit './country'; import COUNTRIES uit './country-data'; Exportklasse @Injectable () CountryService constructor () getCountries (): Country [] return COUNTRIES; getPopulatedCountries (): Country [] return COUNTRIES.sort ((a, b) => b.population - a.population) .slice (0, 3); getLargestCountries (): Land [] return COUNTRIES.sort ((a, b) => b.area - a.area) .slice (0, 3); getGDPCountries (): Land [] return COUNTRIES.sort ((a, b) => b.gdp - a.gdp) .slice (0, 3); getCountry (name: string): Country return COUNTRIES.find (country => country.name === name);
Een @injectable decorateur wordt gebruikt om een serviceklasse te identificeren waarvoor geïnjecteerde afhankelijkheden nodig kunnen zijn. Het toevoegen van de @injectable naar serviceklassen is een vereiste codeerstijl, dus we doen het hoe dan ook.
Daarna schrijven we verschillende methoden voor de klas die de LANDEN array en stuur het direct terug of sorteer het op basis van bepaalde criteria en retourneer vervolgens een deel van de array.
De getCountries () methode zal naar verwachting alle land objecten, en zo retourneert het het geheel LANDEN array zonder er wijzigingen in aan te brengen.
De getPopulatedCountries () neemt de LANDEN array en sorteert het in aflopende volgorde op basis van de populatie van verschillende landen. Vervolgens gebruiken we de methode Array.slice () om de eerste drie landen (met indices 0, 1 en 2) uit de array te retourneren. De getLargestCountries () en getGDPCountries () methoden werken op een vergelijkbare manier.
De getCountry () methode neemt een naam als argument en retourneert het landobject waarvan de eigenschap name dezelfde waarde heeft als het opgegeven naamargument.
Een service die u maakt, is slechts een klasse in Angular totdat u deze hebt geregistreerd met een injector voor hoekinversie. Een hoekinjector is degene die verantwoordelijk is voor het maken van service-exemplaren en deze injecteert in verschillende klassen die deze service nodig hebben. We moeten een service registreren bij een provider voordat de injector die service kan maken.
Er zijn twee veelgebruikte manieren om een service te registreren: met behulp van a @Component provider of met behulp van de @NgModule provider. De ... gebruiken @Component provider is logisch als u de toegang van een service tot een bepaalde component en alle geneste componenten ervan wilt beperken. De ... gebruiken @NgModule provider heeft zin als u wilt dat meerdere componenten toegang hebben tot de dienst.
In ons geval zullen we gebruiken CountryService met meerdere componenten van onze app. Dit betekent dat we het moeten registreren bij de @NgModule provider eenmaal, in plaats van het apart te registreren bij de @Component aanbieder van elke component.
Momenteel is uw app.module.ts bestand zou er als volgt uit moeten zien:
import BrowserModule vanuit '@ angular / platform-browser'; import NgModule uit '@ angular / core'; importeer AppComponent van './app.component'; @ NgModule (aangiften: [AppComponent], import: [BrowserModule], providers: [], bootstrap: [AppComponent]) exportklasse AppModule
Voeg een import statement toe aan de app.module.ts bestand en voeg de service toe aan de @NgModule providers array. Nadat u deze wijzigingen hebt aangebracht, wordt uw app.module.ts bestand zou er als volgt uit moeten zien:
import BrowserModule vanuit '@ angular / platform-browser'; import NgModule uit '@ angular / core'; importeer AppComponent van './app.component'; import CountryService uit './country.service'; @NgModule (aangiften: [AppComponent], import: [BrowserModule], providers: [CountryService], bootstrap: [AppComponent]) exportklasse AppModule
De CountryService klas is nu beschikbaar voor alle componenten die we maken voor onze app.
Succesvol creëren van drie genoemde bestanden country.ts, country-data.ts, en country.service.ts concludeert de tweede tutorial van deze serie.
De country.ts bestand wordt gebruikt om een te maken land klasse met verschillende eigenschappen zoals naam, valuta, bevolking, gebied, etc. Het country-data.ts bestand wordt gebruikt om een reeks landobjecten op te slaan die informatie over verschillende landen bevatten. De country.service.ts bestand bevat een serviceklasse met verschillende methoden om toegang te krijgen tot de landgegevens van de LANDEN matrix. Door al deze methoden afzonderlijk in een serviceklasse te schrijven, kunnen we ze binnen verschillende app-componenten vanaf een centrale locatie benaderen.
In het laatste gedeelte hebben we onze service geregistreerd bij de @NgModule provider om het beschikbaar te maken voor gebruik in verschillende componenten.
In de volgende zelfstudie ziet u hoe u drie verschillende componenten in uw app kunt maken om landdetails en een lijst met landen weer te geven.
Accentsconagua