Share
I den første opplæringen av serien lærte vi hvordan vi skulle komme i gang for å opprette en Angular app. Etter at du har fullført denne opplæringen, bør du nå ha den første funksjonen Angular app med overskriften 'Fun Facts About Countries'. Før du lager noen komponenter som kan gjengis på skjermen, vil vi lage noen klasser og definere noen funksjoner som gjør disse komponentene nyttige.
I denne opplæringen vil vi fokusere på å skape en Land klasse som vil inneholde forskjellige egenskaper som vi ønsker å vise til brukeren. Vi vil da opprette en annen fil som heter country-data.ts. Denne filen inneholder informasjon om alle landene i appen vår. Vår tredje fil vil bli navngitt country.service.ts. Navnet kan høres fint ut, men filen vil bare inneholde a CountryService klasse med all nødvendig funksjonalitet for å hente og sortere informasjonen som er gitt av filen country-data.ts.
Inne i src / app mappe av Angular app, opprett en fil som heter country.ts. Legg til følgende kode i den.
eksport klasse Land navn: streng; hovedstad: streng; område: nummer; befolkning: nummer; valuta: streng; gdp: nummer;
Ovenstående TypeScript-kode definerer Land klasse med seks forskjellige egenskaper for å lagre informasjon om forskjellige land. Navnet på landet, dets hovedstad og dets valuta lagres som en streng. Imidlertid lagres områdene, befolkningen og BNP som et tall. Vi vil importere Land klasse i mange steder, så jeg har lagt til eksport søkeord før klassen definisjonen.
Det neste trinnet inkluderer å opprette en country-data.ts fil for å lagre informasjonen om alle landene som en rekke Land objekter. Vi vil importere Land klasse i denne filen og deretter eksportere en konst oppkalt LAND som lagrer en rekke landobjekter.
Her er koden for country-data.ts. Akkurat som country.ts, du må opprette denne filen inne i src / app mappe.
importer Country fra './country'; eksport const LAND: Land [] = [navn: 'Russland', hovedstad: 'Moskva', område: 17098246, befolkning: 144463451, valuta: 'Russisk rubel', gdp: 1283162, navn: 'Canada', hovedstad : 'Ottawa', område: 9984670, befolkning: 35151728, valuta: 'Kanadiske dollar', gdp: 159760, navn: 'Kina', hovedstad: 'Beijing', område: 9596961, befolkning: 1403500365, valuta: 'Renminbi (Yuan) ', gdp: 11199145, navn:' USA ', hovedstad:' Washington, DC ', område: 9525067, befolkning: 325365189, valuta:' United States Dollar ', gdp: 18569100 'Japan', hovedstad: 'Tokyo', område: 377972, befolkning: 12676200, valuta: 'Yen', gdp: 4939384];
Den første linjen i denne filen importerer Land klasse fra country.ts fil som er plassert i samme katalog. Hvis du fjerner denne linjen fra filen, vil TypeScript gi deg følgende feil:
Kan ikke finne navn 'Land'.
Uten import uttalelsen, vil TypeScript ikke ane hva en rekke typer Land midler. Så sørg for at du har importert riktig klasse og angitt plasseringen av country.ts riktig.
Etter import av Land klasse, vi går videre og lager en rekke Land objekter. Vi importerer denne gruppen av land for bruk i andre filer, så vi legger til en eksport søkeord til denne gruppen også. For tiden er det fem forskjellige Land objekter i arrayen. Hver av disse fem objektene gir nøkkelverdige par som viser navnet på en egenskap og dens verdi for en bestemt gjenstand eller et land.
Hvis du prøver å legge til en ekstra egenskap i arrayet som ikke er erklært inne i Land klasses Definisjon, vil du få følgende feil:
Objekt bokstavelig kan bare angi kjente egenskaper, og 'president' eksisterer ikke i typen 'Land'
I dette tilfellet forsøkte jeg å lagre navnet på presidenten som en string inne i en eiendom som heter president. Siden ingen slik eiendom ble erklært, fikk vi en feil. Noen ganger kan det være lurt å spesifisere en eiendom bare for bestemte objekter og ikke for andre. I slike tilfeller kan du merke eiendommen som er valgfritt inne i klassen definisjonen. Jeg har diskutert det mer detaljert i en veiledning som dekker TypeScript-grensesnitt.
For øyeblikket må du bare sørge for at navnene på alle egenskapene stemmer overens med navnene i klassedisplayet. Sørg også for at verdien av hver eiendom har samme type som deklarert i klassen definisjonen.
Etter å ha skapt vår Land klasse og LAND array, kan vi nå endelig skrive noen funksjoner for å behandle landsdataene. Vi må importere begge Land klasse og LAND array i vår servicefil. Filen må importere LAND array for å få tilgang til dataene. På samme måte må filen importere Land klasse for å få mening av dataene inne i LAND matrise.
Vi vil også importere andre avhengigheter som injiserbare fra vinkelkjerne for å gjøre vårt CountryService klasse tilgjengelig for injeksjonen til injeksjon i andre komponenter.
Når appen din vokser, må ulike moduler kommunisere med hverandre. La oss si det ModuleA krever ModuleB for å kunne fungere skikkelig. I slike tilfeller ville vi ringe ModuleB en avhengighet av ModuleA.
Bare import av modulen vi trenger til en annen fil, fungerer mesteparten av tiden. Men noen ganger må vi bestemme om vi skal lage en enkelt forekomst av klasser fra ModuleB som vil bli brukt av hele appen, eller hvis vi skal opprette en ny forekomst hver gang modulen brukes. I vårt tilfelle vil vi injisere en enkelt forekomst av vår CountryService klasse gjennom hele appen.
Her er koden for country.service.ts:
importer Injectable fra '@ vinkel / kjerne'; importer Country fra './country'; importer COUNTRIES fra './country-data'; @Injectable () eksport klasse CountryService constructor () getCountries (): Land [] return COUNTRIES; getPopulatedCountries (): Land [] return COUNTRIES.sort ((a, b) => bpopulation - 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 (navn: streng): Land return COUNTRIES.find (land => country.name === navn);
en @injectable dekoratør brukes til å identifisere en tjeneste klasse som kan kreve injisert avhengigheter. Men legger til @injectable å service klasser er en nødvendig koding stil, så vi gjør det uansett.
Deretter skriver vi forskjellige metoder for klassen som tar LAND array og enten returnere den direkte eller sortere den ved hjelp av bestemte kriterier og deretter returnere en del av arrayet.
De getCountries () Metoden forventes å returnere alle Land objekter, og så returnerer det hele LAND array uten å gjøre noen endringer i det.
De getPopulatedCountries () tar LAND array og sorterer den i synkende rekkefølge basert på befolkningen i forskjellige land. Vi bruker deretter Array.slice () -metoden for å returnere de tre første landene (med indeksene 0, 1 og 2) fra gruppen. De getLargestCountries () og getGDPCountries () metoder fungerer på lignende måte.
De getCountry () Metoden tar navn som argument og returnerer landobjektet hvis navnegenskap har samme verdi som det medfølgende navnargumentet.
En tjeneste du oppretter er bare en klasse i Angular til du har registrert den med en Angular Dependency Injector. En vinkelinjektor vil være den som er ansvarlig for å opprette serviceeksempler og injisere dem i ulike klasser som trenger den tjenesten. Vi må registrere en tjeneste hos en leverandør før injektoren kan skape den tjenesten.
Det er to vanlige måter å registrere hvilken tjeneste som helst: bruker a @Komponent leverandør eller bruker @NgModule forsørger. Bruker @Komponent Leverandøren er fornuftig når du vil begrense tilgangen til en tjeneste til en bestemt komponent og alle de nestede komponentene. Bruker @NgModule Leverandøren gir mening når du vil at flere komponenter skal ha tilgang til tjenesten.
I vårt tilfelle vil vi bruke CountryService med flere komponenter i vår app. Dette betyr at vi skal registrere det med @NgModule leverandør en gang, i stedet for å registrere den separat med @Komponent leverandør av hver komponent.
Foreløpig din app.module.ts filen skal se slik ut:
importer BrowserModule fra '@ vinkel / plattform-nettleser'; importer NgModule fra '@ vinkel / kjerne'; importer AppComponent fra './app.component'; @NgModule (deklarasjoner: [AppComponent], import: [BrowserModule], leverandører: [], bootstrap: [AppComponent]) eksportklasse AppModule
Legg til en importerklæring til app.module.ts fil og legg til tjenesten til @NgModule leverandører array. Etter å ha gjort disse endringene, din app.module.ts filen skal se slik ut:
importer BrowserModule fra '@ vinkel / plattform-nettleser'; importer NgModule fra '@ vinkel / kjerne'; importer AppComponent fra './app.component'; importer CountryService fra './country.service'; @NgModule (declarations: [AppComponent], import: [BrowserModule], leverandører: [CountryService], bootstrap: [AppComponent]) eksportklasse AppModule
De CountryService klassen vil nå være tilgjengelig for alle komponentene som vi lager for vår app.
Opprett tre filer med navnet country.ts, country-data.ts, og country.service.ts avslutter den andre opplæringen av denne serien.
De country.ts filen brukes til å lage en Land klasse med forskjellige egenskaper som navn, valuta, befolkning, område osv country-data.ts filen brukes til å lagre en rekke landobjekter som har informasjon om forskjellige land. De country.service.ts filen inneholder en tjenesteklasse med forskjellige metoder for å få tilgang til landsdataene fra LAND array. Skrive alle disse metodene separat i en serviceklasse tillater oss å få tilgang til dem i forskjellige appkomponenter fra en sentral plassering.
I den siste delen registrerte vi vår tjeneste med @NgModule leverandør for å gjøre den tilgjengelig for bruk i forskjellige komponenter.
Den neste opplæringen vil vise deg hvordan du oppretter tre forskjellige komponenter i appen din for å vise landdetaljer og en liste over land.
Accentsconagua