Share
Nel primo tutorial della serie, abbiamo imparato come iniziare per creare un'app Angular. Dopo aver completato con successo questo tutorial, ora dovresti avere la tua prima app Angolare funzionante con l'intestazione "Fatti divertenti sui Paesi". Prima di creare componenti che possono essere visualizzati sullo schermo, creeremo alcune classi e definiremo alcune funzioni che rendono utili quei componenti.
In questo tutorial, ci concentreremo sulla creazione di un Nazione classe che conterrà proprietà diverse il cui valore vogliamo mostrare all'utente. Creeremo quindi un altro file chiamato country-data.ts. Questo file conterrà informazioni su tutti i paesi nella nostra app. Il nostro terzo file sarà nominato country.service.ts. Il nome può sembrare strano, ma il file conterrà solo un CountryService classe con tutte le funzionalità necessarie per recuperare e ordinare le informazioni fornite dal file country-data.ts.
Dentro il src / app cartella della tua app Angular, crea un file chiamato country.ts. Aggiungi il seguente codice al suo interno.
export class Paese name: string; capitale: stringa; area: numero; popolazione: numero; valuta: stringa; gdp: numero;
Il precedente codice TypeScript definisce il Nazione classe con sei diverse proprietà per memorizzare informazioni su diversi paesi. Il nome del paese, la sua capitale e la sua valuta sono memorizzati come una stringa. Tuttavia, la sua area, popolazione e PIL sono memorizzati come un numero. Noi importeremo il Nazione classe in molti posti, quindi ho aggiunto il esportare parola chiave prima della definizione della classe.
Il prossimo passo prevede la creazione di a country-data.ts file per memorizzare le informazioni su tutti i paesi come una matrice di Nazione oggetti. Noi importeremo il Nazione classe in questo file e quindi esportando a const di nome PAESI che memorizza una serie di oggetti di campagna.
Ecco il codice per country-data.ts. Proprio come country.ts, devi creare questo file dentro il src / app cartella.
importare Paese da "./country"; export const PAESI: Paese [] = [nome: 'Russia', capitale: 'Mosca', area: 17098246, popolazione: 144463451, valuta: 'Russian Ruble', gdp: 1283162, nome: 'Canada', maiuscola : 'Ottawa', area: 9984670, popolazione: 35151728, valuta: 'Canadian Dollar', gdp: 159760, nome: 'China', capitale: 'Beijing', area: 9596961, popolazione: 1403500365, valuta: 'Renminbi (Yuan) ', gdp: 11199145, nome:' United States ', capitale:' Washington, DC ', area: 9525067, popolazione: 325365189, valuta:' United States Dollar ', gdp: 18569100, nome: 'Giappone', capitale: 'Tokyo', area: 377972, popolazione: 12676200, valuta: 'Yen', pda: 4939384];
La prima riga in questo file importa il file Nazione classe dal country.ts file situato nella stessa directory. Se rimuovi questa riga dal file, TypeScript ti darà il seguente errore:
Impossibile trovare il nome "Paese".
Senza l'istruzione import, TypeScript non ha idea di cosa sia un array di tipo Nazione si intende. Quindi assicurati di aver importato la classe giusta e specificato la posizione di country.ts correttamente.
Dopo aver importato il file Nazione classe, andiamo avanti e creare una serie di Nazione oggetti. Importeremo questa serie di paesi per l'uso all'interno di altri file, quindi aggiungiamo un esportare parola chiave anche a questo array. Attualmente, ci sono cinque diversi Nazione oggetti nella matrice. Ognuno di questi cinque oggetti fornisce coppie chiave-valore che elencano il nome di una proprietà e il suo valore per un particolare oggetto o paese.
Se si tenta di aggiungere una proprietà aggiuntiva alla matrice che non è stata dichiarata all'interno di Nazione definizione della classe, si otterrà il seguente errore:
Il letterale dell'oggetto può specificare solo le proprietà conosciute e 'president' non esiste nel tipo 'Paese'
In questo caso, stavo cercando di memorizzare il nome del presidente come a stringa all'interno di una proprietà denominata Presidente. Dal momento che nessuna di queste proprietà è stata dichiarata, abbiamo ricevuto un errore. A volte, potresti voler specificare una proprietà solo per oggetti particolari e non per altri. In questi casi, è possibile contrassegnare la proprietà facoltativa all'interno della definizione della classe. Ne ho discusso in maggior dettaglio in un tutorial che copre le interfacce TypeScript.
Per ora, assicurati solo che i nomi di tutte le proprietà corrispondano ai nomi all'interno della definizione della classe. Assicurarsi inoltre che il valore di ogni proprietà abbia lo stesso tipo dichiarato nella definizione della classe.
Dopo aver creato il nostro Nazione classe e PAESI array, ora possiamo finalmente scrivere alcune funzioni per elaborare i dati del paese. Dovremo importare entrambi i file Nazione classe e il PAESI array all'interno del nostro file di servizio. Il file dovrà importare il file PAESI array per avere accesso ai dati. Allo stesso modo, il file dovrà importare il file Nazione classe per dare un senso ai dati all'interno del PAESI schieramento.
Importeremo anche altre dipendenze come iniettabili dal nucleo angolare per rendere il nostro CountryService classe disponibile per l'iniettore da iniettare in altri componenti.
Una volta che la tua app cresce di dimensioni, i diversi moduli dovranno comunicare tra loro. Diciamo questo ModuleA richiede ModuleB per funzionare correttamente. In questi casi, chiameremmo ModuleB una dipendenza di ModuleA.
Semplicemente importando il modulo di cui abbiamo bisogno in un altro file funziona la maggior parte del tempo. Tuttavia, a volte abbiamo bisogno di decidere se dovremmo creare una singola istanza di classi da ModuleB che verrà utilizzato dall'intera app o se dovremmo creare una nuova istanza ogni volta che viene utilizzato il modulo. Nel nostro caso, inietteremo una singola istanza del nostro CountryService classe in tutta l'app.
Ecco il codice per country.service.ts:
import Injectable da '@ angular / core'; importare Paese da "./country"; importare PAESI da './country-data'; @Injectable () classe di esportazione CountryService costruttore () getCountries (): Paese [] return COUNTRIES; 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 (nome: stringa): Paese return COUNTRIES.find (country => country.name === name);
Un @injectable decoratore viene utilizzato per identificare una classe di servizio che potrebbe richiedere dipendenze iniettate. Tuttavia, aggiungendo il @injectable alle classi di servizio è richiesto uno stile di codifica, quindi lo facciamo comunque.
Dopodiché, scriviamo diversi metodi per la classe che prendono il PAESI array e restituirlo direttamente o ordinarlo utilizzando determinati criteri e quindi restituire una parte dell'array.
Il getCountries () il metodo dovrebbe restituire tutto il Nazione oggetti, e così restituisce il tutto PAESI array senza apportare modifiche.
Il getPopulatedCountries () prende il PAESI array e ordinarlo in ordine decrescente in base alla popolazione di diversi paesi. Quindi usiamo il metodo Array.slice () per restituire i primi tre paesi (con gli indici 0, 1 e 2) dall'array. Il getLargestCountries () e getGDPCountries () i metodi funzionano in modo simile.
Il getCountry () metodo prende un nome come argomento e restituisce l'oggetto country la cui proprietà name ha lo stesso valore dell'argomento name fornito.
Un servizio che crei è solo una classe in Angolare finché non lo hai registrato con un iniettore di dipendenze Angolare. Un iniettore angolare sarà il responsabile della creazione di istanze di servizio e l'iniezione in classi diverse che necessitano di tale servizio. Abbiamo bisogno di registrare un servizio con un fornitore prima che l'iniettore possa creare quel servizio.
Esistono due modi comuni per registrare qualsiasi servizio: utilizzando a @Componente fornitore o utilizzando il @NgModule fornitore. Usando il @Componente il provider ha senso quando si desidera limitare l'accesso di un servizio a un particolare componente ea tutti i suoi componenti nidificati. Usando il @NgModule il fornitore ha senso quando si desidera che più componenti abbiano accesso al servizio.
Nel nostro caso, useremo CountryService con più componenti della nostra app. Ciò significa che dovremmo registrarlo con il @NgModule fornitore una volta, invece di registrarlo separatamente con il @Componente fornitore di ciascun componente.
Attualmente, il tuo app.module.ts il file dovrebbe assomigliare a questo:
importare BrowserModule da '@ angular / platform-browser'; import NgModule da '@ angular / core'; importare AppComponent da './app.component'; @NgModule (dichiarazioni: [AppComponent], importazioni: [BrowserModule], provider: [], bootstrap: [AppComponent]) classe di esportazione AppModule
Aggiungi una dichiarazione di importazione al app.module.ts file e aggiungere il servizio al @NgModule matrice di fornitori. Dopo aver apportato queste modifiche, il tuo app.module.ts il file dovrebbe assomigliare a questo:
importare BrowserModule da '@ angular / platform-browser'; import NgModule da '@ angular / core'; importare AppComponent da './app.component'; importare CountryService da './country.service'; @NgModule (dichiarazioni: [AppComponent], importazioni: [BrowserModule], provider: [CountryService], bootstrap: [AppComponent]) classe di esportazione AppModule
Il CountryService la classe sarà ora disponibile per tutti i componenti che creiamo per la nostra app.
Creazione di tre file con successo country.ts, country-data.ts, e country.service.ts conclude il secondo tutorial di questa serie.
Il country.ts il file viene utilizzato per creare un Nazione classe con proprietà diverse come nome, valuta, popolazione, area, ecc country-data.ts il file viene utilizzato per memorizzare una serie di oggetti Paese che contengono informazioni su diversi paesi. Il country.service.ts il file contiene una classe di servizio con metodi diversi per accedere ai dati del Paese da PAESI array. Scrivere tutti questi metodi separatamente all'interno di una classe di servizio ci consente di accedervi all'interno di diversi componenti dell'app da una posizione centrale.
Nell'ultima sezione, abbiamo registrato il nostro servizio con il @NgModule fornitore per renderlo disponibile per l'uso all'interno di diversi componenti.
Il prossimo tutorial ti mostrerà come creare tre diversi componenti nella tua app per visualizzare i dettagli del Paese e un elenco di paesi.
Accentsconagua