Share
În primul tutorial al seriei, am învățat cum să începem pentru a crea o aplicație Angular. După finalizarea cu succes a acestui tutorial, acum trebuie să aveți prima aplicație Angular funcțională cu titlul "Fun Facts About Countries". Înainte de crearea oricăror componente care pot fi redate pe ecran, vom crea câteva clase și vom defini câteva funcții care fac aceste componente utile.
În acest tutorial, accentul se va pune pe crearea unui Țară clasa care va conține diferite proprietăți a căror valoare dorim să le afișăm utilizatorului. Apoi vom crea un alt fișier numit Country-data.ts. Acest fișier conține informații despre toate țările din aplicația noastră. Al treilea dosar va fi numit country.service.ts. Numele poate suna fantezie, dar fisierul va contine doar a CountryService cu toate funcțiile necesare pentru a prelua și sorta informațiile furnizate de fișier Country-data.ts.
În interiorul src / app folder al aplicației dvs. Angular, creați un fișier numit country.ts. Adăugați următorul cod în interiorul acestuia.
clasa de export Țară name: string; capital: șir; zona: număr; populație: număr; valută: șir; gdp: număr;
Codul TypeScript de mai sus definește Țară clasa cu șase proprietăți diferite pentru a stoca informații despre diferite țări. Numele țării, capitala și moneda sa sunt stocate ca șir. Cu toate acestea, suprafața, populația și PIB-ul sunt stocate ca număr. Vom importa Țară clasa într-o mulțime de locuri, așa că am adăugat export înainte de definirea clasei.
Următorul pas include crearea unui Country-data.ts fișier pentru a stoca informațiile despre toate țările ca o serie de Țară obiecte. Vom importa Țară clasa în acest fișier și apoi exportul a const numit ȚĂRI care stochează o serie de obiecte de țară.
Iată codul pentru Country-data.ts. Ca și cum country.ts, trebuie să creați acest fișier în interiorul src / app pliant.
import Country din "./country"; export const COUNTRIES: Țara []: [nume: 'Rusia', capitala: 'Moscova', zona: 17098246, populație: 144463451, moneda: ruble ruse, gdp: 1283162, name: : 'Ottawa', domeniul: 9984670, populație: 35151728, valută: 'Canadian Dollar', gdp: 159760, name: 'China', capitala: 'Beijing', zona: 9596961, population: 1403500365, currency: 'Renminbi (Denumirea: "Statele Unite", capitala: "Washington, DC", zona: 9525067, populație: 325365189, valută: 'dolar american', gdp: "Japonia", capitala: "Tokyo", suprafață: 377972, populație: 12676200, valută: 'Yen', gdp: 4939384];
Prima linie din acest fișier importă Țară clasa de la country.ts fișier situat în același director. Dacă eliminați această linie din fișier, TypeScript vă va da următoarea eroare:
Nu se poate găsi numele "Țară".
Fără declarația de import, TypeScript nu va avea nicio idee despre ce tip de matrice Țară mijloace. Asigurați-vă că ați importat clasa potrivită și ați specificat locația country.ts corect.
După importarea Țară clasa, vom merge mai departe și de a crea o serie de Țară obiecte. Vom importa această gamă de țări pentru a fi utilizate în alte fișiere, așa că adăugăm un export cuvânt cheie la acest matrice, de asemenea. În prezent, există cinci tipuri diferite Țară obiecte din matrice. Fiecare dintre aceste cinci obiecte oferă perechi cheie-valoare care afișează numele unei proprietăți și valoarea acesteia pentru un anumit obiect sau țară.
Dacă încercați să adăugați o proprietate suplimentară la matricea care nu a fost declarată în interiorul Țară clasă, veți primi următoarea eroare:
Obiectul literal poate specifica doar proprietăți cunoscute, iar "președinte" nu există în tipul "Țară"
În acest caz, am încercat să stochez numele de președinte ca fiind şir în interiorul unei proprietăți numite președinte. Deoarece nu a fost declarată o astfel de proprietate, am primit o eroare. Uneori, poate doriți să specificați o proprietate numai pentru anumite obiecte și nu pentru altele. În astfel de cazuri, puteți marca proprietatea opțională în interiorul definiției clasei. Am discutat mai detaliat într-un tutorial care acoperă interfețele TypeScript.
Pentru moment, asigurați-vă că numele tuturor proprietăților se potrivesc cu numele din interiorul definiției clasei. De asemenea, asigurați-vă că valoarea fiecărei proprietăți are același tip ca cea declarată în definiția clasei.
După ce ne-a creat Țară clasă și ȚĂRI array, putem scrie în sfârșit câteva funcții care să proceseze datele țării. Va trebui să importăm atât Țară clasa și ȚĂRI array în fișierul nostru de servicii. Fișierul va trebui să importe ȚĂRI pentru a avea acces la date. În mod similar, fișierul va trebui să importe Țară clasa pentru a face sens în interiorul datelor ȚĂRI mulțime.
De asemenea, vom importa și alte dependențe injectabil de la miezul unghiular pentru a ne face CountryService clasa disponibilă pentru Injectorul pentru injectare în alte componente.
Odată ce aplicația dvs. crește, diferite module vor trebui să comunice între ele. Să spunem asta ModuleA necesită ModuleB pentru a funcționa corect. În astfel de cazuri, am sunat ModuleB o dependență de ModuleA.
Simplu importarea modulului de care avem nevoie într-un alt fișier funcționează de cele mai multe ori. Cu toate acestea, uneori trebuie să decidem dacă ar trebui să creăm o singură instanță de clase ModuleB care vor fi utilizate de întreaga aplicație sau dacă ar trebui să creăm o nouă instanță de fiecare dată când modulul este utilizat. În cazul nostru, vom injecta o singură instanță a noastră CountryService clasă în întreaga aplicație.
Iată codul pentru country.service.ts:
import Injectable de la '@ angular / core'; import Country din "./country"; import COUNTRIES din "./country-data"; @ Categoria de export injectabilă () CountryService constructor () getCountries (): Țară [] returnează COUNTRIES; getPopulatedCountries (): Țară [] returnează COUNTRIES.sort ((a, b) => b.populație - a.populație) .slice (0, 3); getLargestCountries (): Țară [] retur COUNTRIES.sort ((a, b) => b.area - a.area) .slice (0, 3); getGDPCountries (): Țară [] retur COUNTRIES.sort ((a, b) => b.gdp - a.gdp) .slice (0, 3); getCountry (nume: șir): Țară return COUNTRIES.find (country => country.name === nume);
Un @injectable decoratorul este utilizat pentru a identifica o clasă de servicii care ar putea necesita dependențe injectate. Cu toate acestea, adăugând @injectable la clasele de servicii este un stil de codare necesar, așa că o facem oricum.
După aceea, scriem diferite metode pentru clasa care iau ȚĂRI și întoarce-l direct sau sortează-l folosind anumite criterii și apoi returnează o parte a matricei.
getCountries () metoda este de așteptat să returneze toate Țară obiecte și astfel întoarce întregul ȚĂRI fără a face modificări.
getPopulatedCountries () ia ȚĂRI și sortează ordinea în ordine descendentă pe baza populației din diferite țări. Apoi utilizăm metoda Array.slice () pentru a returna din matrice primele trei țări (cu indicii 0, 1 și 2). getLargestCountries () și getGDPCountries () metodele funcționează într-un mod similar.
getCountry () metoda ia un argument ca argument și returnează obiectul țării al cărui nume proprietate are aceeași valoare ca argumentul furnizat de nume.
Un serviciu pe care îl creați este doar o clasă în Angular până când îl înregistrați cu un injector de dependență Angular. Un injector unghiular va fi responsabil pentru crearea instanțelor de serviciu și injectarea acestora în diferite clase care au nevoie de acel serviciu. Trebuie să înregistrăm un serviciu cu un furnizor înainte ca injectorul să poată crea acel serviciu.
Există două moduri comune de a înregistra orice serviciu: utilizând a @Component furnizor sau folosind @NgModule furnizor. Utilizarea @Component furnizorului are sens atunci când doriți să restricționați accesul unui serviciu la o anumită componentă și la toate componentele imbricate. Utilizarea @NgModule furnizor are sens atunci când doriți ca mai multe componente să aibă acces la serviciu.
În cazul nostru, vom folosi CountryService cu componente multiple ale aplicației noastre. Aceasta înseamnă că ar trebui să o înregistrăm la @NgModule furnizor o dată, în loc să o înregistreze separat cu @Component furnizor al fiecărei componente.
În prezent, dvs. app.module.ts fișierul ar trebui să arate astfel:
import BrowserModule din '@ unghiular / platform-browser'; import NgModule de la '@ angular / core'; importați AppComponent din "./app.component"; @NgModule (declarații: [AppComponent], import: [BrowserModule], furnizori: [], bootstrap: [AppComponent]) clasă de export AppModule
Adăugați o declarație de import la app.module.ts fișier și adăugați serviciul la @NgModule furnizorii array. După efectuarea acestor modificări, dvs. app.module.ts fișierul ar trebui să arate astfel:
import BrowserModule din '@ unghiular / platform-browser'; import NgModule de la '@ angular / core'; importați AppComponent din "./app.component"; import CountryService de la "./country.service"; @NgModule (declarații: [AppComponent], importuri: [BrowserModule], furnizori: [CountryService], bootstrap: [AppComponent]) clasa de export AppModule
CountryService clasa va fi acum disponibilă pentru toate componentele pe care le creăm pentru aplicația noastră.
Crearea cu succes a trei fișiere numite country.ts, Country-data.ts, și country.service.ts încheie al doilea tutorial al acestei serii.
country.ts fișierul este utilizat pentru a crea un Țară clasa cu diferite proprietati cum ar fi numele, moneda, populatia, zona etc. Country-data.ts fișierul este utilizat pentru a stoca o serie de obiecte de țară care au informații despre diferite țări. country.service.ts fișierul conține o clasă de servicii cu metode diferite pentru a accesa datele de țară din ȚĂRI matrice. Scrierea tuturor acestor metode separat într-o clasă de servicii ne permite să le accesăm în interiorul componentelor diferite ale aplicației dintr-o locație centrală.
În ultima secțiune, am înregistrat serviciul nostru cu @NgModule furnizorul să îl pună la dispoziție pentru utilizare în interiorul diferitelor componente.
Următorul tutorial vă va arăta cum să creați trei componente diferite în aplicația dvs. pentru a afișa detaliile unei țări și o listă de țări.
Accentsconagua