Share
Un'applicazione Angolare è composta da componenti. In un'applicazione Angolare, un componente è costituito da un modello HTML e una classe componente. Dai documenti ufficiali:
I componenti sono il componente base di un'interfaccia utente in un'applicazione angolare. Un'applicazione angolare è un albero di componenti angolari. I componenti angolari sono un sottoinsieme di direttive. A differenza delle direttive, i componenti hanno sempre un modello e solo un componente può essere istanziato per un elemento in un modello.
In questo tutorial, imparerai come iniziare a creare un gestore di liste della spesa usando Angular.
Avrai bisogno di Node version> 6.9.x e Node Package Manager (npm)> 3.x.x. Una volta che hai entrambi, prova ad installare la CLI Angolare usando npm.
npm install -g @ angular / cli
Dopo l'installazione di Angular CLI, provare a creare un progetto utilizzando lo stesso.
Nuova AngularGrocery --skip-npm
Il comando precedente creerà la struttura del progetto. Passare alla directory del progetto e installare le dipendenze richieste.
cd AngularGrocery npm install
Per avviare il server Web dell'applicazione, digitare il seguente comando:
ng servire
Una volta avviato il server applicazioni, indirizzare il browser a http: // localhost: 4200 / e sarà possibile visualizzare l'applicazione predefinita.
La figura sopra mostra la struttura dell'applicazione per il nostro gestore della lista della spesa. Il src cartella contiene il codice sorgente per l'applicazione predefinita. Il App cartella all'interno del src cartella contiene il codice TypeScript. index.html dentro il src cartella è il file HTML principale in cui vengono renderizzati i componenti Angular creati.
Per impostazione predefinita, l'applicazione ha un App-root componente. Creiamo un nuovo componente chiamato app-alimentari per creare la nostra app manager della spesa. All'interno della cartella dell'app, crea un file chiamato app.grocery.ts.
Importa il Componente modulo dal angolare-core.
importare Component da '@ angular / core';
Utilizzerai Bootstrap per progettare il componente. Scarica e includi il pacchetto Bootstrap dal sito ufficiale. Conserva i file nel src / Attività cartella.
Definiamo il componente all'interno del app.grocery.ts file. Il componente avrà tre proprietà: selettore, modello, e styleUrls. selettore indica il modo in cui verrà utilizzato il componente. modello definisce l'HTML che verrà visualizzato quando viene utilizzato il particolare selettore. styleUrls definisce l'URL degli stili utilizzati nel componente.
Dentro app.grocery.ts, una volta che il modulo componente è stato importato, definire il app-alimentari componente come mostrato:
@Component (selector: 'app-grocery', templateUrl: './app.grocery.html', styleUrls: ['... /assets/css/bootstrap.min.css'])
Come visto nel codice precedente, il componente utilizza un modello chiamato app.grocery.html. Crea un file chiamato app.grocery.html dentro il src / app cartella. Aggiungi il seguente codice al app.grocery.html file:
Gestore della lista della spesa
Nel app.grocery.ts file, aggiungi il GroceryComponent classe da esportare.
export class GroceryComponent
È necessario importare il componente appena creato all'interno del app.module.ts prima che tu possa usarlo Importa il GroceryComponent nel app.module.ts.
importare GroceryComponent da './app.grocery';
Dichiara e avvia il componente Grocery appena creato nel file app.module.ts file.
@NgModule (dichiarazioni: [GroceryComponent], importa: [BrowserModule, FormsModule, HttpModule], provider: [], bootstrap: [GroceryComponent])
Ora siete pronti per utilizzare il componente Grocery all'interno del index.html pagina. Rimuovere il componente predefinito dal index.html pagina e aggiungi il seguente codice HTML:
Caricamento in corso…
Salvare le modifiche precedenti e riavviare il server. Passare al browser http: // localhost: 4200 / e verrà visualizzato il componente Grocery.
Una volta inserito un elemento nella casella di testo di input, è necessario leggere l'elemento e salvarlo in un elenco. Per leggere l'input, farai uso di ngModel, che lo legherà a una variabile. Inserisci ngModel alla casella di testo di input.
Ogni volta che viene inserito del testo nella casella di testo di input, il compito variabile viene aggiornata di conseguenza. Definire il compito variabile all'interno del GroceryComponent nel app.grocery.ts file. Aggiungi una variabile chiamata compiti per mantenere una raccolta di attività inserite.
compito: stringa; tasks = [];
Facendo clic sul pulsante OK, l'attività verrà aggiunta al compiti elenco di raccolta che hai definito all'interno di GroceryComponent. Definisci un al clic metodo all'interno del GroceryComponent per gestire il pulsante OK, fare clic. Ecco come appare:
onClick () this.tasks.push (name: this.task); this.task = ";
Aggiungi l'evento click al pulsante OK come mostrato:
Quando si fa clic sul pulsante OK, la nuova attività viene aggiunta al compiti lista di raccolta. Il compito anche la variabile viene ripristinata per cancellare la casella di testo di input.
Salvare le modifiche precedenti e, entrando in compito e facendo clic sul pulsante OK, l'attività viene aggiunta al compiti collezione. Per visualizzare la raccolta di attività, aggiungi una span all'interno app.grocery.html.
Accentsconagua
tasks | JSON Inserire l'attività nella casella di inserimento e premere il tasto ok pulsante. Avrai il compiti variabile visualizzata come JSON sulla pagina.
Ecco il completo app.grocery.ts file:
importare Component da '@ angular / core'; @Component (selector: 'app-grocery', templateUrl: './app.grocery.html', styleUrls: ['... /assets/css/bootstrap.min.css']) export class GroceryComponent task: string ; tasks = []; onClick () this.tasks.push (name: this.task); this.task = ";
Ora, dal momento che hai gli oggetti aggiunti nel compiti variabile, è possibile utilizzarlo per visualizzare le attività. Farai uso di NgFor direttiva per iterare il compiti raccolta e creare dinamicamente l'HTML per la visualizzazione delle attività. Visualizzerai il compito all'interno dell'elemento UL e ripetendo la LI usando il NgFor direttiva. Ecco come appare:
Come visto nel codice sopra, si scorre attraverso il compiti variabile e crea dinamicamente l'elemento LI e lo span. Ecco come il completo app.grocery.html aspetto del file modello:
Gestore della lista della spesa
- task.name
Salvare le modifiche precedenti e riavviare il server. Puntare il browser su http: // localhost: 4200 / e inserire l'attività e premere il tasto ok pulsante. Ogni attività aggiunta verrà visualizzata nell'elenco seguente.
In questo tutorial angolare, hai visto come iniziare a creare un gestore di liste della spesa usando Angular. Hai imparato come creare la vista per il componente Grocery, aggiungere elementi all'elenco della spesa e visualizzare gli elementi aggiunti.
Nella parte successiva di questo tutorial, implementerai le funzionalità per contrassegnare gli elementi completati, archiviare gli elementi completati e rimuovere gli elementi aggiunti.
Il codice sorgente di questo tutorial è disponibile su GitHub. Fateci sapere i vostri suggerimenti nei commenti qui sotto.
