Share
Angular è diventato molto popolare negli ultimi due anni. Puoi utilizzare questo framework JavaScript open source per creare app web e mobili. Se hai pensato di imparare Angular ma non sai da dove iniziare, seguire questa serie potrebbe essere una buona idea.
Lo scopo di questa serie è quello di coprire le basi di Angular durante la creazione di un'applicazione molto semplice che mostra informazioni su diversi paesi. Angular è scritto in TypeScript, quindi ha senso scrivere anche il tuo codice in TypeScript.
Non c'è bisogno di preoccuparsi se non hai mai usato TypeScript prima. Per dirla semplicemente, TypeScript è semplicemente un JavaScript con funzioni aggiuntive. Ho anche scritto una serie intitolata TypeScript for Beginners su Envato Tuts +, dove puoi imparare le basi di TypeScript prima.
Se hai già familiarità con TypeScript, puoi semplicemente andare avanti e iniziare a creare la tua prima app Angular.
Il primo passo sarebbe installare Node.js. Puoi visitare il sito Web ufficiale e scaricare la versione appropriata. Il gestore pacchetti nodo verrà installato come parte di Node.js.
Il prossimo passo è installare TypeScript eseguendo il seguente comando. Ti consiglio di installare una versione di TypeScript su 2.1.
npm install -g typescript
Infine, è necessario installare la CLI angolare eseguendo il seguente comando. L'installazione di Angular CLI renderà più semplice la creazione della tua app Angular.
npm install -g @ angular / cli
Ora puoi creare una nuova app Angolare immediatamente eseguendo il seguente comando all'interno del terminale. Prima di eseguire il comando, assicurati di averlo spostato nella directory in cui desideri creare l'app.
nuova app per paese
L'installazione di tutte le dipendenze per il progetto richiede un po 'di tempo, quindi per favore sii paziente mentre Angular CLI configura la tua app. Al termine dell'installazione, verrà visualizzata una cartella denominata country-app nella directory corrente. È possibile eseguire l'app in questo momento cambiando la directory in country-app e poi correndo ng servire nella console.
cd country-app ng serve --open
Aggiunta --Aperto aprirà automaticamente la tua app nel browser all'indirizzo http: // localhost: 4200 /.
L'app per le informazioni sui paesi che stiamo creando avrà tre componenti. Il HomeComponent mostrerà i primi tre paesi in varie categorie come popolazione, PIL e area. Potrai fare clic sul nome di ciascun paese per saperne di più. Le informazioni aggiuntive sul paese sono elencate usando un altro componente, che chiameremo il CountryDetailComponent. Ci sarà un altro componente nella nostra app, che verrà utilizzato per visualizzare un elenco di tutti i paesi che abbiamo memorizzato nella nostra app.
Poiché questa è la tua prima app Angolare, il nostro obiettivo principale sarà quello di semplificare le cose senza aggiungere complicate funzionalità. Una volta acquisita una buona conoscenza delle nozioni di base, la creazione di app più complesse non sembrerà un compito scoraggiante.
L'immagine qui sotto è della homepage o HomeComponent nella nostra app di informazioni sul paese. Come puoi vedere, ci sono tre paesi in ogni categoria e sono stati disposti in ordine decrescente. Durante la creazione di HomeComponent, imparerai come ordinare diversi paesi prima di visualizzarli all'interno del modello.
L'immagine seguente mostra la "pagina di tutti i paesi" o AllCountriesComponent della nostra app. Il layout di questo componente è molto simile al HomeComponent. L'unica differenza è che questa volta stiamo elencando tutti i paesi insieme alle loro capitali.
Se si fa clic sulla casella di qualsiasi paese visualizzato all'interno di HomeComponent o il AllCountriesComponent, verrai indirizzato alla pagina dei dettagli del Paese o CountryDetailComponent. Le informazioni fornite su un paese non sono modificabili.
C'è un pulsante indietro dopo i dettagli di ogni paese. Questo pulsante indietro ti riporta al componente o alla pagina precedente. Se tu venissi al CountryDetailComponent dal HomeComponent, verrai riportato al HomeComponent. Se sei arrivato al CountryDetailComponent dal AllCountriesComponent, verrai riportato al AllCountriesComponent.
Fare riferimento a diversi componenti che stiamo creando come pagine non è tecnicamente corretto. Tuttavia, sto usando termini come homepage o HomeComponent in modo intercambiabile perché vedere molti termini non familiari come routing, componenti e decoratori può intimidire i lettori che non hanno mai creato un'app Angular in precedenza. Usare questi termini liberamente per questa serie può aiutarti a imparare velocemente invece di confonderlo con il gergo.
Prima di iniziare a creare la nostra app, è necessario essere a proprio agio con i concetti di base di Angular. Questa sezione tratterà molto brevemente argomenti importanti come componenti e modelli.
I componenti sono gli elementi costitutivi di un'app Angular. Ti consentono di controllare l'interfaccia utente della tua app. Un componente di base è costituito da due parti: un decoratore e una definizione di classe. È possibile specificare la logica dell'applicazione per un componente all'interno della classe.
Il decoratore di componenti viene utilizzato per specificare informazioni come un selettore personalizzato per identificare il componente, il percorso del modello HTML e le regole di stile da applicare al componente.
Ecco un decoratore di componenti di base che imposta tutti e tre i valori per CountryDetailComponent:
@Component (selector: 'app-country-detail', templateUrl: './country-detail.component.html', styleUrls: ['./country-detail.component.css'])
Tutti i componenti che creiamo avranno un selettore personalizzato che specifica il tag che esegue il rendering del componente all'interno del browser. Questi tag personalizzati possono avere qualsiasi nome tu voglia. Ad esempio, creeremo a countryDetailComponent nel terzo tutorial della serie, e useremo il nostro tag personalizzato chiamato app-country-dettaglio per rendere questo componente nel browser.
Qualsiasi componente che crei sarà costituito da un modello che controlla ciò che viene reso nella pagina dell'applicazione. Ad esempio, il countryDetailComponent ha due div tag che fungono da wrapper attorno al contenuto principale del componente. Ogni pezzo di informazione su un paese è messo al suo interno p tag, e il nome del paese è inserito all'interno di h2 etichetta. Tutti questi tag possono essere memorizzati insieme come modello per il countryDetailComponent e quindi reso come un'unità. Questo modello del componente può essere salvato come file HTML o specificato direttamente all'interno del decoratore usando il modello attributo.
Diversi componenti della nostra app dovranno recuperare i dati da visualizzare sullo schermo. Creeremo una classe di servizio che conterrà funzioni per aiutarci a recuperare questi dati e ordinarli o modificarli in un modo o nell'altro. Utilizzeremo quindi le funzionalità delle diverse classi di componenti per visualizzare questi dati all'utente.
Puoi considerare un Servizio per essere semplicemente qualsiasi valore, funzione o funzionalità di cui l'applicazione ha bisogno. Ottenere tutti i paesi memorizzati all'interno della nostra applicazione è un servizio, così come lo ordiniamo e li visualizziamo. Tutti e tre i componenti della nostra classe useranno le funzioni del nostro servizio per recuperare i dati.
Quando crei componenti per la tua app, dovrai importare dipendenze da diversi moduli. Ad esempio, importeremo Componente dal @ Angolare / core ogni volta che creiamo un componente nostro. Puoi anche usare la stessa sintassi per importare dipendenze che sono state create da te. La parte all'interno delle parentesi graffe viene utilizzata per specificare la dipendenza che si desidera importare e la parte dopo a partire dal è usato per specificare dove Angular può trovare la dipendenza.
Ecco uno snippet di codice dal country-app che creeremo. Come puoi vedere, stiamo importando Componente e OnInit dal @ Angolare / core. Allo stesso modo, stiamo importando a Nazione e CountryService dai file che abbiamo creato noi stessi.
import Component, OnInit da '@ angular / core'; importa Paese da '... / Paese'; import CountryService da '... /country.service';
Dopo aver eseguito il nuova app per paese comando, la CLI Angolare ha creato un sacco di file e cartelle per te. Vedere così tanti file può intimorire come un principiante, ma non è necessario lavorare con tutti questi file. Quando crei la nostra app per il paese, modificheremo solo i file già esistenti all'interno di src / app cartella così come la creazione di nuovi file nella stessa directory. Al momento, dovresti avere cinque file diversi in src / app cartella. Questi file creano una shell dell'applicazione che verrà utilizzata per assemblare il resto della nostra app.
Il app.component.ts il file contiene la logica per il nostro componente scritto in TypeScript. È possibile aprire questo file e aggiornare il titolo proprietà del AppComponent classe a 'Fun Facts About Countries'. Il app.component.ts il file dovrebbe ora avere il seguente codice.
importare Component da '@ angular / core'; @Component (selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']) export class AppComponent title = 'Fun Facts About Countries ';
Il app.component.html il file contiene il modello per il nostro AppComponent classe. Apri il app.component.html archiviare e sostituire il codice HTML standard con il seguente codice:
titolo
Con il wrapping titolo all'interno delle parentesi graffe, stiamo dicendo ad Angular di mettere il valore di titolo proprietà del AppComponent classe dentro il h1 etichetta.
Aggiorneremo questo file nell'ultimo tutorial della serie per rendere nuovi componenti che verranno creati. Per ora, ha solo bisogno di mostrare il titolo della nostra app.
Le modifiche apportate a questo file si rifletteranno automaticamente nel browser all'indirizzo http: // localhost: 4200 /. Assicurati che la console sia ancora aperta e che tu abbia già digitato ng servire comando dall'inizio del tutorial.
Diverse funzioni e caratteristiche dell'app saranno controllate da più componenti più semplici che creeremo in seguito. Puoi pensare a questo guscio di applicazione come a un'auto e a diversi componenti che creeremo come parti di quella macchina come il motore e le ruote. Ogni componente eseguirà la sua funzione specifica e potrai metterli tutti insieme per creare l'intera macchina.
Lo scopo di questo tutorial era quello di aiutarti a installare tutti gli strumenti necessari per creare un'app Angular e passare rapidamente ad alcuni concetti fondamentali di Angular.
Per riassumere, è necessario conoscere le basi di TypeScript prima di poter creare un'app Angolare. Nel passaggio successivo, è necessario installare Node.js, TypeScript e la CLI angolare. Dopodiché, puoi eseguire alcuni comandi dalla sezione Guida introduttiva di questo tutorial e la tua prima app Angolare sarà attiva e funzionante.
La nostra app nazionale farà molto di più che mostrare solo il titolo. Nel prossimo tutorial, creerai alcune classi e servizi che verranno utilizzati per archiviare e recuperare dati su diversi paesi. Queste classi e servizi saranno utili nel terzo e nel quarto tutorial, dove creeremo diversi componenti della nostra app.
Mentre stiamo lavorando a questa serie di tutorial, non dimenticare di dare un'occhiata a Envato Market per vedere cosa è disponibile per l'uso e studiare sia per Angular che per JavaScript, in generale.
Accentsconagua