Angular 2 - Guida rapida

Angular JS è un framework open source costruito su JavaScript. È stato realizzato dagli sviluppatori di Google. Questo framework è stato utilizzato per superare gli ostacoli incontrati durante il lavoro con applicazioni a pagina singola. Inoltre, il test è stato considerato un aspetto chiave durante la creazione del framework. È stato garantito che il framework potesse essere facilmente testato. Il rilascio iniziale del framework è stato nell'ottobre 2010.

Caratteristiche di Angular 2

Di seguito sono riportate le caratteristiche principali di Angular 2:

• Components- La versione precedente di Angular aveva un focus sui controller, ma ora ha cambiato l'attenzione per avere componenti sui controller. I componenti aiutano a costruire le applicazioni in molti moduli. Questo aiuta a mantenere meglio l'applicazione per un periodo di tempo.

• TypeScript- La versione più recente di Angular è basata su TypeScript. Questo è un superset di JavaScript ed è gestito da Microsoft.

• Services- I servizi sono un insieme di codice che può essere condiviso da diversi componenti di un'applicazione. Quindi, ad esempio, se avessi un componente dati che raccoglie dati da un database, potresti averlo come servizio condiviso che potrebbe essere utilizzato su più applicazioni.

Inoltre, Angular 2 ha migliori capacità di gestione degli eventi, potenti modelli e un migliore supporto per i dispositivi mobili.

Componenti di Angular 2

Angular 2 ha i seguenti componenti:

• Modules- Viene utilizzato per suddividere l'applicazione in parti logiche di codice. Ogni parte di codice o modulo è progettato per eseguire una singola operazione.

• Component - Questo può essere utilizzato per riunire i moduli.

• Templates - Viene utilizzato per definire le viste di un'applicazione JS angolare.

• Metadata - Questo può essere usato per aggiungere più dati a una classe JS angolare.

• Service - Viene utilizzato per creare componenti che possono essere condivisi nell'intera applicazione.

Discuteremo tutti questi componenti in dettaglio nei capitoli successivi di questo tutorial.

Il sito ufficiale di Angular è https://angular.io/ Il sito contiene tutte le informazioni e la documentazione su Angular 2.

Per iniziare a lavorare con Angular 2, è necessario installare i seguenti componenti chiave.

• Npm- Questo è noto come il gestore di pacchetti del nodo utilizzato per lavorare con i repository open source. Angular JS come framework ha dipendenze da altri componenti. Enpm può essere utilizzato per scaricare queste dipendenze e allegarle al progetto.

• Git - Questo è il software del codice sorgente che può essere utilizzato per ottenere l'applicazione di esempio da github sito angolare.

• Editor- Esistono molti editor che possono essere utilizzati per lo sviluppo di Angular JS come il codice di Visual Studio e WebStorm. Nel nostro tutorial, useremo il codice Visual Studio che viene fornito gratuitamente da Microsoft.

Installazione di npm

Diamo ora un'occhiata ai passaggi per installare npm. Il sito ufficiale di npm èhttps://www.npmjs.com/

Step 1 - Vai alla sezione "Inizia con npm" nel sito.

Step 2- Nella schermata successiva, scegli il programma di installazione da scaricare, a seconda del sistema operativo. Ai fini di questo esercizio, scarica la versione Windows a 64 bit.

Step 3- Avvia il programma di installazione. Nella schermata iniziale, fare clic sul pulsante Avanti.

Step 4 - Nella schermata successiva, accetta il contratto di licenza e fai clic sul pulsante Avanti.

Step 5 - Nella schermata successiva, scegli la cartella di destinazione per l'installazione e fai clic sul pulsante Avanti.

Step 6- Scegli i componenti nella schermata successiva e fai clic sul pulsante Avanti. È possibile accettare tutti i componenti per l'installazione predefinita.

Step 7 - Nella schermata successiva, fare clic sul pulsante Installa.

Step 8 - Al termine dell'installazione, fare clic sul pulsante Fine.

Step 9- Per confermare l'installazione, nel prompt dei comandi è possibile immettere il comando npm version. Otterrai il numero di versione di npm come mostrato nello screenshot seguente.

Installazione di Visual Studio Code

Di seguito sono riportate le funzionalità di Visual Studio Code:

• Editor leggero rispetto alla versione effettiva di Visual Studio.

• Può essere utilizzato per linguaggi di codifica come Clojure, Java, Objective-C e molti altri linguaggi.

• Estensione Git incorporata.

• Funzionalità IntelliSense incorporata.

• Molte altre estensioni per lo sviluppo.

Il sito ufficiale per il codice di Visual Studio è https://code.visualstudio.com/

Step 1- Al termine del download, seguire i passaggi di installazione. Nella schermata iniziale, fare clic sul pulsante Avanti.

Step 2 - Nella schermata successiva, accetta il contratto di licenza e fai clic sul pulsante Avanti.

Step 3 - Nella schermata successiva, scegli la posizione di destinazione per l'installazione e fai clic sul pulsante Avanti.

Step 4 - Scegli il nome del collegamento al programma e fai clic sul pulsante Avanti.

Step 5 - Accetta le impostazioni predefinite e fai clic sul pulsante Avanti.

Step 6 - Fare clic sul pulsante Installa nella schermata successiva.

Step 7 - Nella schermata finale, fare clic sul pulsante Fine per avviare Visual Studio Code.

Installazione di Git

Alcune delle caratteristiche principali di Git sono:

• Facile ramificazione e fusione del codice.
• Possibilità di utilizzare molte tecniche per il flusso di codice all'interno di Git.
• Git è molto veloce se confrontato con altri strumenti SCM.
• Offre una migliore garanzia dei dati.
• Gratuito e open source.

Il sito ufficiale di Git è https://git-scm.com/

Step 1- Al termine del download, seguire i passaggi di installazione. Nella schermata iniziale, fare clic sul pulsante Avanti.

Step 2- Scegli i componenti che devono essere installati. È possibile accettare i componenti predefiniti.

Step 3 - Nel passaggio successivo, scegli il nome del collegamento al programma e fai clic sul pulsante Avanti.

Step 4 - Accetta l'eseguibile SSH predefinito e fai clic sul pulsante Avanti.

Step 5 - Accetta l'impostazione predefinita di "Checkout Windows style, commit dei finali in stile Unix" e fai clic sul pulsante Next.

Step 6 - Ora, accetta l'impostazione predefinita dell'emulatore di terminale e fai clic sul pulsante Avanti.

Step 7 - Accetta le impostazioni predefinite e fai clic sul pulsante Avanti.

Step 8 - Puoi saltare le opzioni sperimentali e fare clic sul pulsante Installa.

Step 9 - Nella schermata finale, fare clic sul pulsante Fine per completare l'installazione.

Esistono vari modi per iniziare con la tua prima applicazione Angular JS.

• Un modo è fare tutto da zero, che è il modo più difficile e non preferito. A causa delle molte dipendenze, diventa difficile ottenere questa configurazione.

• Un altro modo è utilizzare l'avvio rapido su Angular Github. Contiene il codice necessario per iniziare. Questo è normalmente ciò che viene scelto da tutti gli sviluppatori ed è ciò che mostreremo per l'applicazione Hello World.

• Il modo finale è utilizzare Angular CLI. Ne discuteremo in dettaglio in un capitolo separato.

Di seguito sono riportati i passaggi per ottenere un'applicazione di esempio attiva e funzionante tramite GitHub.

Step 1 - Vai all'URL di GitHub - https://github.com/angular/quickstart

Step 2- Vai al prompt dei comandi, crea una directory del progetto. Può essere una directory vuota. Nel nostro esempio, abbiamo creato una directory chiamata Project.

Step 3- Successivamente, nel prompt dei comandi, vai in questa directory ed esegui il seguente comando per clonare il repository github sul tuo sistema locale. Puoi farlo emettendo il seguente comando:

git clone https://github.com/angular/quickstart Demo

Questo creerà un'applicazione JS angolare di esempio sulla tua macchina locale.

Step 4 - Apri il codice nel codice di Visual Studio.

Step 5 - Vai al prompt dei comandi e di nuovo nella cartella del tuo progetto ed esegui il seguente comando -

npm install

Questo installerà tutti i pacchetti necessari che sono richiesti per il funzionamento dell'applicazione Angular JS.

Una volta fatto, dovresti vedere una struttura ad albero con tutte le dipendenze installate.

Step 6- Vai alla cartella Demo → src → app → app.component.ts. Trova le seguenti righe di codice:

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

E sostituisci la parola chiave Angular con World come mostrato di seguito:

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'World'; }

Ci sono altri file che vengono creati come parte della creazione del progetto per l'applicazione Angular 2. Al momento, non è necessario preoccuparsi degli altri file di codice perché sono tutti inclusi come parte dell'applicazione Angular 2 e non è necessario modificarli per l'applicazione Hello World.

Discuteremo questi file in dettaglio nei capitoli successivi.

Note - Visual Studio Code compilerà automaticamente tutti i file e creerà file JavaScript per tutti i file dattiloscritti.

Step 7- Ora vai al tuo prompt dei comandi ed esegui il comando npm start. Ciò farà sì che il gestore di pacchetti Node avvii un server Web leggero e avvii l'applicazione Angular.

L'applicazione Angular JS verrà ora avviata nel browser e vedrai "Hello World" nel browser, come mostrato nello screenshot seguente.

Distribuzione

Questo argomento è incentrato sulla distribuzione dell'applicazione Hello world sopra. Poiché si tratta di un'applicazione JS angolare, può essere distribuita su qualsiasi piattaforma. Il tuo sviluppo può essere su qualsiasi piattaforma.

In questo caso, sarà su Windows utilizzando il codice di Visual Studio. Ora esaminiamo due opzioni di distribuzione.

Distribuzione su server NGNIX su Windows

Nota che puoi utilizzare qualsiasi server web su qualsiasi piattaforma per ospitare applicazioni JS Angular. In questo caso, prenderemo l'esempio di NGNIX che è un popolare server web.

Step 1 - Scarica il server web NGNIX dal seguente URL http://nginx.org/en/download.html

Step 2- Dopo aver estratto il file zip scaricato, esegui il componente exe nginx che farà funzionare il server web in background. Sarai quindi in grado di andare alla home page nell'URL -http://localhost

Step 3 - Vai alla cartella del progetto Angular JS in Windows Explorer.

Step 4 - Copia la cartella Project → Demo → node-modules.

Step 5 - Copia tutti i contenuti dalla cartella Progetto → Demo → src.

Step 6 - Copia tutti i contenuti nella cartella nginx / html.

Ora vai all'URL - http://localhost, vedrai effettivamente l'applicazione Hello World come mostrato nello screenshot seguente.

Configurazione su Ubuntu

Ora vediamo come ospitare la stessa applicazione hello world su un server Ubuntu.

Step 1 - Emetti i seguenti comandi sul tuo server Ubuntu per installare nginx.

apt-get update

Il comando precedente garantirà che tutti i pacchetti sul sistema siano aggiornati.

Una volta fatto, il sistema dovrebbe essere aggiornato.

Step 2 - Ora installa GIT sul server Ubuntu emettendo il seguente comando.

sudo apt-get install git

Una volta fatto, GIT verrà installato sul sistema.

Step 3 - Per controllare il file git version, emettere il seguente comando.

sudo git –version

Step 4 - Installa npmche è il gestore di pacchetti del nodo su Ubuntu. A tale scopo, emettere il seguente comando.

sudo apt-get install npm

Una volta fatto, npm verrà installato nel sistema.

Step 5 - Per controllare il file npm version, emettere il seguente comando.

sudo npm -version

Step 6 - Quindi, installa nodejs. Questo può essere fatto tramite il seguente comando.

sudo npm install nodejs

Step 7 - Per vedere la versione di Node.js, immetti il ​​seguente comando.

sudo nodejs –version

Step 8 - Crea una cartella del progetto e scarica il progetto iniziale di github utilizzando il seguente comando git.

git clone https://github.com/angular/quickstart Demo

Questo scaricherà tutti i file sul sistema locale.

Puoi navigare nella cartella per vedere i file sono stati scaricati con successo da GitHub.

Step 9 - Quindi emettere il seguente comando per npm.

npm install

Questo installerà tutti i pacchetti necessari che sono richiesti per il funzionamento dell'applicazione Angular JS.

Una volta terminato, vedrai tutte le dipendenze installate sul sistema.

Step 10- Vai alla cartella Demo → src → app → app.component.ts. Utilizzare l'editor vim se necessario. Trova le seguenti righe di codice:

import { Component } from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'Angular'; }

E sostituire la parola chiave Angular con World come mostrato nel codice seguente.

import { Component } from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'World'; }

Ci sono altri file che vengono creati come parte della creazione del progetto per l'applicazione Angular 2. Al momento, non è necessario preoccuparsi degli altri file di codice perché sono inclusi come parte dell'applicazione Angular 2 e non è necessario modificarli per l'applicazione Hello World.

Discuteremo questi file in dettaglio nei capitoli successivi.

Step 11- Successivamente, installa il server Lite che può essere utilizzato per eseguire l'applicazione Angular 2. Puoi farlo emettendo il seguente comando:

sudo npm install –save-dev lite-server

Una volta terminato, vedrai lo stato di completamento. Non devi preoccuparti degli avvisi.

Step 12- Creare un collegamento simbolico alla cartella del nodo tramite il seguente comando. Ciò aiuta a garantire che il gestore di pacchetti del nodo possa individuare l'installazione di nodejs.

sudo ln -s /usr/bin/nodejs /usr/bin/node

Step 13- Ora è il momento di avviare l'applicazione Angular 2 tramite il comando di avvio npm. Questo creerà prima i file e quindi avvierà l'app Angular nel server Lite che è stato installato nel passaggio precedente.

Emetti il ​​seguente comando:

sudo npm start

Una volta terminato, ti verrà presentato l'URL.

Se vai all'URL, ora vedrai l'app Angular 2 caricare il browser.

Distribuzione di nginx su Ubuntu

Note- Puoi utilizzare qualsiasi server web su qualsiasi piattaforma per ospitare applicazioni JS Angular. In questo caso, prenderemo l'esempio di NGNIX che è un popolare server web.

Step 1 - Emetti il ​​seguente comando sul tuo server Ubuntu per installare nginx come server web.

sudo apt-get update

Questo comando garantirà che tutti i pacchetti sul sistema siano aggiornati.

Una volta fatto, il sistema dovrebbe essere aggiornato.

Step 2 - Ora emetti il ​​seguente comando per l'installazione nginx.

apt-get install nginx

Una volta terminato, nginx verrà eseguito in background.

Step 3 - Eseguire il comando seguente per confermare che il file nginx i servizi sono in esecuzione.

ps –ef | grep nginx

Ora, per impostazione predefinita, i file per nginx sono archiviati nella cartella / var / www / html. Quindi, dai le autorizzazioni necessarie per copiare i tuoi file Hello World in questa posizione.

Step 4 - Emetti il ​​seguente comando.

sudo chmod 777 /var/www/html

Step 5 - Copiare i file utilizzando qualsiasi metodo per copiare i file di progetto nella cartella / var / www / html.

Ora, se navighi all'URL - http://192.168.1.200/index.html troverai l'applicazione Hello world Angular JS.

I moduli vengono utilizzati in Angular JS per inserire limiti logici nella tua applicazione. Quindi, invece di codificare tutto in un'unica applicazione, puoi invece costruire tutto in moduli separati per separare la funzionalità della tua applicazione. Esaminiamo il codice che viene aggiunto all'applicazione demo.

In Visual Studio Code, vai alla cartella app.module.ts nella cartella dell'app. Questa è nota come classe del modulo radice.

Il codice seguente sarà presente nel file app.module.ts file.

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser';  
import { AppComponent }  from './app.component';  

@NgModule ({ 
   imports:      [ BrowserModule ], 
   declarations: [ AppComponent ], 
   bootstrap:    [ AppComponent ] 
}) 
export class AppModule { }

Esaminiamo in dettaglio ogni riga del codice.

• L'istruzione import viene utilizzata per importare funzionalità dai moduli esistenti. Pertanto, le prime 3 istruzioni vengono utilizzate per importare i moduli NgModule, BrowserModule e AppComponent in questo modulo.

• Il decoratore NgModule viene utilizzato per definire successivamente le opzioni di importazione, dichiarazioni e bootstrap.

• Il BrowserModule è richiesto per impostazione predefinita per qualsiasi applicazione angolare basata sul web.

• L'opzione bootstrap dice ad Angular quale componente avviare nell'applicazione.

Un modulo è composto dalle seguenti parti:

• Bootstrap array- Viene utilizzato per indicare ad Angular JS quali componenti devono essere caricati in modo che sia possibile accedere alle sue funzionalità nell'applicazione. Dopo aver incluso il componente nell'array bootstrap, è necessario dichiararli in modo che possano essere utilizzati su altri componenti nell'applicazione Angular JS.

• Export array - Viene utilizzato per esportare componenti, direttive e tubi che possono essere utilizzati in altri moduli.

• Import array - Proprio come l'array di esportazione, l'array di importazione può essere utilizzato per importare la funzionalità da altri moduli JS angolari.

Lo screenshot seguente mostra l'anatomia di un'applicazione Angular 2. Ogni applicazione è composta da componenti. Ogni componente è un confine logico di funzionalità per l'applicazione. È necessario disporre di servizi a più livelli, utilizzati per condividere la funzionalità tra i componenti.

Di seguito è riportata l'anatomia di un componente. Un componente è costituito da:

• Class - È come una classe C ++ o Java che consiste di proprietà e metodi.

• Metadata - Viene utilizzato per decorare la classe ed estendere le funzionalità della classe.

• Template - Viene utilizzato per definire la visualizzazione HTML che viene visualizzata nell'applicazione.

Di seguito è riportato un esempio di un componente.

import { Component } from '@angular/core';

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   appTitle: string = 'Welcome';
}

Ogni applicazione è composta da moduli. Ogni applicazione Angular 2 deve avere un modulo radice angolare. Ogni modulo Angular Root può quindi avere più componenti per separare la funzionalità.

Di seguito è riportato un esempio di un modulo radice.

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent }  from './app.component';  

@NgModule ({ 
   imports:      [ BrowserModule ], 
   declarations: [ AppComponent ], 
   bootstrap:    [ AppComponent ] 
}) 
export class AppModule { }

Ogni applicazione è composta da moduli di funzionalità in cui ogni modulo ha una caratteristica separata dell'applicazione. Ogni modulo di funzionalità angolare può quindi avere più componenti per separare la funzionalità.

I componenti sono un pezzo logico di codice per l'applicazione Angular JS. Un componente è costituito da quanto segue:

• Template- Viene utilizzato per eseguire il rendering della vista per l'applicazione. Contiene l'HTML che deve essere visualizzato nell'applicazione. Questa parte include anche il vincolo e le direttive.

• Class- È come una classe definita in qualsiasi linguaggio come C. Contiene proprietà e metodi. Questo ha il codice che viene utilizzato per supportare la visualizzazione. È definito in TypeScript.

• Metadata- Questo ha i dati extra definiti per la classe Angular. Si definisce con un decoratore.

Andiamo ora al file app.component.ts e creiamo il nostro primo componente Angular.

Aggiungiamo il seguente codice al file e guardiamo in dettaglio ogni aspetto.

Classe

Il decoratore di classe. La classe è definita in TypeScript. La classe normalmente ha la seguente sintassi in TypeScript.

Sintassi

class classname {
   Propertyname: PropertyType = Value
}

Parametri

• Classname - Questo è il nome da dare alla classe.

• Propertyname - Questo è il nome da dare alla proprietà.

• PropertyType - Poiché TypeScript è fortemente tipizzato, è necessario assegnare un tipo alla proprietà.

• Value - Questo è il valore da dare alla proprietà.

Esempio

export class AppComponent {
   appTitle: string = 'Welcome';
}

Nell'esempio, è necessario notare le seguenti cose:

• Stiamo definendo una classe chiamata AppComponent.

• La parola chiave export viene utilizzata in modo che il componente possa essere utilizzato in altri moduli nell'applicazione Angular JS.

• appTitle è il nome della proprietà.

• Alla proprietà viene assegnato il tipo di stringa.

• Alla proprietà viene assegnato il valore "Benvenuto".

Modello

Questa è la vista che deve essere visualizzata nell'applicazione.

Sintassi

Template: '
   <HTML code>
   class properties
'

Parametri

• HTML Code - Questo è il codice HTML che deve essere visualizzato nell'applicazione.

• Class properties - Queste sono le proprietà della classe a cui è possibile fare riferimento nel modello.

Esempio

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

Nell'esempio, è necessario notare le seguenti cose:

• Stiamo definendo il codice HTML che verrà visualizzato nella nostra applicazione

• Stiamo anche facendo riferimento alla proprietà appTitle della nostra classe.

Metadati

Viene utilizzato per decorare la classe JS angolare con informazioni aggiuntive.

Diamo un'occhiata al codice completato con la nostra classe, modello e metadati.

Esempio

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div> `,
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

Nell'esempio sopra, è necessario notare le seguenti cose:

• Stiamo utilizzando la parola chiave import per importare il decoratore 'Component' dal modulo angular / core.

• Quindi utilizziamo il decoratore per definire un componente.

• Il componente ha un selettore chiamato "my-app". Questo non è altro che il nostro tag html personalizzato che può essere utilizzato nella nostra pagina html principale.

Ora andiamo al nostro file index.html nel nostro codice.

Assicuriamoci che il tag body ora contenga un riferimento al nostro tag personalizzato nel componente. Pertanto, nel caso precedente, dobbiamo assicurarci che il tag body contenga il seguente codice:

<body>
   <my-app></my-app>
</body>

Produzione

Ora se andiamo nel browser e vediamo l'output, vedremo che l'output viene renderizzato così come è nel componente.

Nel capitolo sui componenti, abbiamo già visto un esempio del seguente modello.

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

Questo è noto come inline template. Esistono altri modi per definire un modello e ciò può essere eseguito tramite il comando templateURL. Il modo più semplice per utilizzarlo nel componente è il seguente.

Sintassi

templateURL:
viewname.component.html

Parametri

• viewname - Questo è il nome del modulo del componente dell'app.

Dopo il nome visualizzazione, il componente deve essere aggiunto al nome del file.

Di seguito sono riportati i passaggi per definire un modello in linea.

Step 1- Crea un file chiamato app.component.html. Questo conterrà il codice html per la visualizzazione.

Step 2 - Aggiungi il seguente codice nel file creato sopra.

<div>{{appTitle}} Tutorialspoint </div>

Definisce un semplice tag div e fa riferimento alla proprietà appTitle dalla classe app.component.

Step 3 - Nel file app.component.ts, aggiungi il seguente codice.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'  
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

Dal codice sopra, l'unica modifica che si può notare è dal templateURL, che fornisce il collegamento al file app.component.html che si trova nella cartella dell'app.

Step 4 - Esegui il codice nel browser, otterrai il seguente output.

Dall'output, si può vedere che il file del modello (app.component.html) viene chiamato di conseguenza.

UN directiveè un elemento HTML personalizzato che viene utilizzato per estendere la potenza dell'HTML. Angular 2 ha le seguenti direttive che vengono chiamate come parte del modulo BrowserModule.

• ngif
• ngFor

Se visualizzi il file app.module.ts, vedrai il codice seguente e il modulo BrowserModule definito. Definendo questo modulo, avrai accesso alle 2 direttive.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

Ora esaminiamo in dettaglio ciascuna direttiva.

ngIf

Il ngif elemento viene utilizzato per aggiungere elementi al codice HTML se restituisce true, altrimenti non aggiungerà gli elementi al codice HTML.

Sintassi

*ngIf = 'expression'

Se l'espressione restituisce true, viene aggiunto il corrispondente, altrimenti gli elementi non vengono aggiunti.

Diamo ora uno sguardo a un esempio di come possiamo usare la direttiva * ngif.

Step 1- Prima aggiungi una proprietà alla classe denominata appStatus. Sarà di tipo booleano. Manteniamo questo valore come vero.

import { Component } from '@angular/core';  

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appStatus: boolean = true;
}

Step 2 - Ora nel file app.component.html, aggiungi il seguente codice.

<div *ngIf = 'appStatus'>{{appTitle}} Tutorialspoint </div>

Nel codice precedente, ora abbiamo la direttiva * ngIf. Nella direttiva stiamo valutando il valore della proprietà appStatus. Poiché il valore della proprietà dovrebbe restituire true, significa che il tag div dovrebbe essere visualizzato nel browser.

Una volta aggiunto il codice sopra, otterremo il seguente output nel browser.

Produzione

ngFor

Il ngFor elemento viene utilizzato per gli elementi in base alla condizione del ciclo For.

Sintassi

*ngFor = 'let variable of variablelist'

La variabile è una variabile temporanea per visualizzare i valori in variablelist.

Diamo ora un'occhiata a un esempio di come possiamo usare la direttiva * ngFor.

Step 1- Prima aggiungi una proprietà alla classe denominata appList. Questo sarà del tipo che può essere utilizzato per definire qualsiasi tipo di array.

import { Component } from '@angular/core';
 
@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "Name" : "One"
   },

   {
      "ID": "2",
      "Name" : "Two"
   } ];
}

Quindi, stiamo definendo appList come un array che ha 2 elementi. Ogni elemento ha 2 proprietà secondarie come ID e Nome.

Step 2 - In app.component.html, definire il codice seguente.

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
   </ul> 
</div>

Nel codice sopra, ora stiamo usando la direttiva ngFor per iterare attraverso l'array appList. Definiamo quindi un elenco in cui ogni elemento dell'elenco è l'ID e il parametro del nome dell'array.

Una volta aggiunto il codice sopra, otterremo il seguente output nel browser.

Produzione

I metadati vengono utilizzati per decorare una classe in modo che possa configurare il comportamento previsto della classe. Di seguito sono riportate le diverse parti per i metadati.

Annotations- Questi sono decoratori a livello di classe. Questo è un array e un esempio con il decoratore @Component e @Routes.

Di seguito è riportato un codice di esempio, presente nel file app.component.ts.

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
})

Il decoratore del componente viene utilizzato per dichiarare la classe nel file app.component.ts come componente.

• Design:paramtypes - Questi sono usati solo per i costruttori e applicati solo a Typescript.

• propMetadata - Questi sono i metadati che vengono applicati alle proprietà della classe.

Di seguito è riportato un codice di esempio.

export class AppComponent {
   @Environment(‘test’)
   appTitle: string = 'Welcome';
}

Qui, @Environment sono i metadati applicati alla proprietà appTitle e il valore fornito è "test".

Parameters - Questo è impostato dai decoratori a livello di costruttore.

Di seguito è riportato un codice di esempio.

export class AppComponent {
   constructor(@Environment(‘test’ private appTitle:string) { }
}

Nell'esempio precedente, i metadati vengono applicati ai parametri del costruttore.

L'associazione a due vie era una funzionalità in Angular JS, ma è stata rimossa da Angular 2.x in poi. Ma ora, dall'evento delle classi in Angular 2, possiamo legare alle proprietà nella classe AngularJS.

Supponiamo di avere una classe con un nome di classe, una proprietà con un tipo e un valore.

export class className {
   property: propertytype = value;
}

È quindi possibile associare la proprietà di un tag html alla proprietà della classe.

<html tag htmlproperty = 'property'>

Il valore della proprietà verrebbe quindi assegnato alla proprietà html dell'html.

Diamo un'occhiata a un esempio di come possiamo ottenere il data binding. Nel nostro esempio, esamineremo la visualizzazione di immagini in cui l'origine delle immagini verrà dalle proprietà nella nostra classe. Di seguito sono riportati i passaggi per raggiungere questo obiettivo.

Step 1- Scarica 2 immagini qualsiasi. Per questo esempio, scaricheremo alcune semplici immagini mostrate di seguito.

Step 2 - Memorizza queste immagini in una cartella chiamata Imagesnella directory dell'app. Se la cartella delle immagini non è presente, creala.

Step 3 - Aggiungi il seguente contenuto in app.component.ts come mostrato di seguito.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "url": 'app/Images/One.jpg'
   },

   {
      "ID": "2",
      "url": 'app/Images/Two.jpg'
   } ];
}

Step 4 - Aggiungi il seguente contenuto in app.component.html come mostrato di seguito.

<div *ngFor = 'let lst of appList'>
   <ul>
      <li>{{lst.ID}}</li>
      <img [src] = 'lst.url'>
   </ul>
</div>

Nel file app.component.html sopra, stiamo accedendo alle immagini dalle proprietà della nostra classe.

Produzione

L'output del programma precedente dovrebbe essere così:

L'operazione CRUD di base che esamineremo in questo capitolo è la lettura dei dati da un servizio web utilizzando Angular 2.

Esempio

In questo esempio, definiremo un'origine dati che è un semplice file jsonfile di prodotti. Successivamente, definiremo un servizio che verrà utilizzato per leggere i dati dal filejsonfile. Successivamente, utilizzeremo questo servizio nel nostro file principale app.component.ts.

Step 1 - Per prima cosa definiamo il nostro file product.json nel codice di Visual Studio.

Nel file products.json, inserisci il testo seguente. Questi saranno i dati che verranno presi dall'applicazione Angular JS.

[{
   "ProductID": 1,
   "ProductName": "ProductA"
},

{
   "ProductID": 2,
   "ProductName": "ProductB"
}]

Step 2- Definire un'interfaccia che sarà la definizione della classe per memorizzare le informazioni dal nostro file products.json. Crea un file chiamato products.ts.

Step 3 - Inserisci il seguente codice nel file.

export interface IProduct {
   ProductID: number;
   ProductName: string;
}

L'interfaccia precedente ha la definizione per ProductID e ProductName come proprietà per l'interfaccia.

Step 4 - Nel file app.module.ts includere il codice seguente -

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HttpModule } from '@angular/http';

@NgModule ({
   imports:      [ BrowserModule,HttpModule],
   declarations: [ AppComponent],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

Step 5 - Definisci un file products.service.ts nel codice di Visual Studio

Step 6 - Inserisci il seguente codice nel file.

import { Injectable } from '@angular/core';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import { IProduct } from './product';

@Injectable()
export class ProductService {
   private _producturl='app/products.json';
   constructor(private _http: Http){}
   
   getproducts(): Observable<IProduct[]> {
      return this._http.get(this._producturl)
      .map((response: Response) => <IProduct[]> response.json())
      .do(data => console.log(JSON.stringify(data)));
   }
}

I seguenti punti devono essere annotati sul programma di cui sopra.

• L'istruzione import {Http, Response} da '@ angular / http' viene utilizzata per garantire che la funzione http possa essere utilizzata per ottenere i dati dal file products.json.

• Le seguenti affermazioni sono usate per fare uso del framework Reactive che può essere usato per creare una variabile Observable. Il framework Observable viene utilizzato per rilevare eventuali modifiche nella risposta http che possono quindi essere rimandate all'applicazione principale.

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';

• L'istruzione private _producturl = 'app / products.json' nella classe viene utilizzata per specificare la posizione della nostra origine dati. Può anche specificare la posizione del servizio web, se necessario.

• Successivamente, definiamo una variabile del tipo Http che verrà utilizzata per ottenere la risposta dall'origine dati.

• Una volta ottenuti i dati dall'origine dati, utilizziamo il comando JSON.stringify (data) per inviare i dati alla console nel browser.

Step 7 - Ora nel file app.component.ts, inserisci il seguente codice.

import { Component } from '@angular/core';
import { IProduct } from './product';
import { ProductService } from './products.service';
import { appService } from './app.service';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component ({
   selector: 'my-app',
   template: '<div>Hello</div>',
   providers: [ProductService]
})

export   class   AppComponent  {
   iproducts: IProduct[];
   constructor(private _product: ProductService) {
   }
   
   ngOnInit() : void {
      this._product.getproducts()
      .subscribe(iproducts => this.iproducts = iproducts);
   }
}

Qui, la cosa principale nel codice è l'opzione di sottoscrizione che viene utilizzata per ascoltare la funzione Observable getproducts () per ascoltare i dati dall'origine dati.

Ora salva tutti i codici ed esegui l'applicazione usando npm. Vai al browser, vedremo il seguente output.

Nella console, vedremo i dati recuperati dal file products.json.

Le applicazioni Angular 2 hanno la possibilità di gestire gli errori. Questo viene fatto includendo la libreria catch di ReactJS e quindi utilizzando la funzione catch.

Vediamo il codice richiesto per la gestione degli errori. Questo codice può essere aggiunto all'inizio del capitolo per le operazioni CRUD utilizzando http.

Nel file product.service.ts, inserisci il seguente codice:

import { Injectable } from '@angular/core'; 
import { Http , Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 
import { IProduct } from './product';  

@Injectable() 
export class ProductService { 
   private _producturl = 'app/products.json'; 
   constructor(private _http: Http){}  

   getproducts(): Observable<IProduct[]> { 
      return this._http.get(this._producturl) 
      .map((response: Response) => <IProduct[]> response.json()) 
      .do(data => console.log(JSON.stringify(data))) 
      .catch(this.handleError); 
   }  
   
   private handleError(error: Response) { 
      console.error(error); 
      return Observable.throw(error.json().error()); 
   } 
}

• La funzione catch contiene un collegamento alla funzione Error Handler.

• Nella funzione di gestione degli errori, inviamo l'errore alla console. Inoltre restituiamo l'errore al programma principale in modo che l'esecuzione possa continuare.

Ora, ogni volta che ricevi un errore, verrà reindirizzato alla console degli errori del browser.

Il routing aiuta a indirizzare gli utenti a pagine diverse in base all'opzione che scelgono nella pagina principale. Quindi, in base all'opzione scelta, il componente angolare richiesto verrà reso all'utente.

Vediamo i passaggi necessari per vedere come possiamo implementare il routing in un'applicazione Angular 2.

Step 1 - Aggiungi il tag di riferimento di base nel file index.html.

<!DOCTYPE html>
<html>
   <head>
      <base href = "/">
      <title>Angular QuickStart</title>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      
      <base href = "/">
      <link rel = "stylesheet" href = "styles.css">

      <!-- Polyfill(s) for older browsers -->
      <script src = "node_modules/core-js/client/shim.min.js"></script>
      <script src = "node_modules/zone.js/dist/zone.js"></script>
      <script src = "node_modules/systemjs/dist/system.src.js"></script>
      <script src = "systemjs.config.js"></script>

      <script>
         System.import('main.js').catch(function(err){ console.error(err); });
      </script>
   </head>

   <body>
      <my-app></my-app>
   </body>
</html>

Step 2- Crea due percorsi per l'applicazione. Per questo, crea 2 file chiamatiInventory.component.ts e product.component.ts

Step 3 - Inserisci il seguente codice nel file product.component.ts.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: 'Products',
})
export   class   Appproduct  {
}

Step 4 - Inserisci il seguente codice nel file Inventory.component.ts.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: 'Inventory',
})
export class AppInventory  {
}

Entrambi i componenti non fanno nulla di stravagante, si limitano a eseguire il rendering delle parole chiave in base al componente. Pertanto, per il componente Inventario, mostrerà all'utente la parola chiave Inventario. E per il componente prodotti, mostrerà la parola chiave del prodotto all'utente.

Step 5 - Nel file app.module.ts, aggiungi il seguente codice -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { Appproduct } from './product.component';
import { AppInventory } from './Inventory.component';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
   { path: 'Product', component: Appproduct },
   { path: 'Inventory', component: AppInventory },
];

@NgModule ({
   imports: [ BrowserModule,
   RouterModule.forRoot(appRoutes)],
   declarations: [ AppComponent,Appproduct,AppInventory],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

I seguenti punti devono essere annotati sul programma di cui sopra:

• Gli appRoutes contengono 2 route, una è il componente Appproduct e l'altra è il componente AppInventory.

• Assicurati di dichiarare entrambi i componenti.

• RouterModule.forRoot garantisce di aggiungere le rotte all'applicazione.

Step 6 - Nel file app.component.ts, aggiungi il seguente codice.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `
   <ul>
      <li><a [routerLink] = "['/Product']">Product</a></li>
      <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
   </ul>
   <router-outlet></router-outlet>`
})
export class AppComponent  { }

Il seguente punto deve essere notato sul programma di cui sopra:

• <router-outlet> </router-outlet> è il segnaposto per il rendering del componente in base all'opzione scelta dall'utente.

Ora salva tutto il codice ed esegui l'applicazione usando npm. Vai al browser, vedrai il seguente output.

Ora se fai clic sul collegamento Inventario, otterrai il seguente output.

Aggiunta di un percorso di errore

In Routing, si può anche aggiungere un percorso di errore. Ciò può accadere se l'utente accede a una pagina che non esiste nell'applicazione.

Vediamo come possiamo implementarlo.

Step 1 - Aggiungi un componente PageNotFound come NotFound.component.ts come mostrato di seguito -

Step 2 - Aggiungi il seguente codice al nuovo file.

import { Component } from '@angular/core';

@Component ({  
   selector: 'my-app',  
   template: 'Not Found', 
})  
export class PageNotFoundComponent {  
}

Step 3 - Aggiungi il codice seguente al file app.module.ts.

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { Appproduct } from './product.component' 
import { AppInventory } from  './Inventory.component' 
import { PageNotFoundComponent } from  './NotFound.component' 
import { RouterModule, Routes } from '@angular/router';  

const appRoutes: Routes = [ 
   { path: 'Product', component: Appproduct }, 
   { path: 'Inventory', component: AppInventory }, 
   { path: '**', component: PageNotFoundComponent } 
];  

@NgModule ({ 
   imports: [ BrowserModule, 
   RouterModule.forRoot(appRoutes)], 
   declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent], 
   bootstrap: [ AppComponent ] 
}) 

export class AppModule {
}

Il seguente punto deve essere notato sul programma di cui sopra:

• Ora abbiamo una route aggiuntiva chiamata path: '**', component: PageNotFoundComponent. Quindi, ** è per qualsiasi rotta che non si adatta alla rotta predefinita. Verranno indirizzati al componente PageNotFoundComponent.

Ora salva tutto il codice ed esegui l'applicazione usando npm. Vai al tuo browser e vedrai il seguente output. Ora, quando vai a un collegamento sbagliato, otterrai il seguente output.

In Angular 2 è anche possibile effettuare la navigazione manuale. Di seguito sono riportati i passaggi.

Step 1 - Aggiungi il seguente codice al file Inventory.component.ts.

import { Component } from '@angular/core'; 
import { Router }  from '@angular/router';  

@Component ({  
   selector: 'my-app',  
   template: 'Inventory 
   <a class = "button" (click) = "onBack()">Back to Products</a>' 
})  

export class AppInventory {  
   constructor(private _router: Router){} 

   onBack(): void { 
      this._router.navigate(['/Product']); 
   } 
}

I seguenti punti devono essere annotati sul programma di cui sopra:

• Dichiarare un tag html che ha una funzione onBack taggata all'evento click. Pertanto, quando un utente fa clic su questo, verrà reindirizzato alla pagina Prodotti.

• Nella funzione onBack, utilizzare router.navigate per navigare alla pagina richiesta.

Step 2- Ora salva tutto il codice ed esegui l'applicazione usando npm. Vai al browser, vedrai il seguente output.

Step 3 - Fare clic sul collegamento Inventario.

Step 4 - Fai clic sul link "Torna ai prodotti", otterrai il seguente output che ti riporta alla pagina Prodotti.

Angular 2 può anche progettare moduli che possono utilizzare l'associazione a due vie utilizzando l'estensione ngModeldirettiva. Vediamo come possiamo ottenere questo risultato.

Step 1- Crea un modello che sia un modello di prodotti. Crea un file chiamatoproducts.ts file.

Step 2 - Inserisci il seguente codice nel file.

export class Product { 
   constructor ( 
      public productid: number, 
      public productname: string 
   ) {  } 
}

Questa è una classe semplice che ha 2 proprietà, productid e productname.

Step 3 - Crea un componente del modulo prodotto chiamato componente product-form.component.ts e aggiungi il codice seguente -

import { Component } from '@angular/core';
import { Product } from './products';

@Component ({
   selector: 'product-form',
   templateUrl: './product-form.component.html'
})

export class ProductFormComponent {
   model = new Product(1,'ProductA');
}

I seguenti punti devono essere annotati riguardo al programma di cui sopra.

• Crea un oggetto della classe Product e aggiungi valori a productid e productname.

• Utilizza templateUrl per specificare la posizione del nostro product-form.component.html che renderà il componente.

Step 4- Crea il modulo vero e proprio. Crea un file chiamato product-form.component.html e inserisci il codice seguente.

<div class = "container">
   <h1>Product Form</h1>
   <form>
      <div class = "form-group">
         <label for = "productid">ID</label>
         <input type = "text" class = "form-control" id = "productid" required
            [(ngModel)] = "model.productid" name = "id">
      </div>
      
      <div class = "form-group">
         <label for = "name">Name</label>
         <input type = "text" class = "form-control" id = "name"
            [(ngModel)] = "model.productname" name = "name">
      </div>
   </form>
</div>

Il punto seguente deve essere notato sul programma di cui sopra.

• Il ngModel viene utilizzata per associare l'oggetto del prodotto agli elementi separati del modulo.

Step 5 - Inserisci il seguente codice nel file app.component.ts.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: '<product-form></product-form>'
})
export class AppComponent { }

Step 6 - Inserisci il codice seguente nel file app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ProductFormComponent } from './product-form.component';

@NgModule ({
   imports: [ BrowserModule,FormsModule],
   declarations: [ AppComponent,ProductFormComponent],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

Step 7- Salva tutto il codice ed esegui l'applicazione utilizzando npm. Vai al tuo browser, vedrai il seguente output.

Command Line Interface (CLI) può essere utilizzata per creare la nostra applicazione JS angolare. Aiuta anche a creare un'unità e test end-to-end per l'applicazione.

Il sito ufficiale per Angular CLI è https://cli.angular.io/

Se fai clic sull'opzione Inizia, verrai indirizzato al repository github per la CLI https://github.com/angular/angular-cli

Diamo ora un'occhiata ad alcune delle cose che possiamo fare con Angular CLI.

Installazione della CLI

Note- Assicurati che Python sia installato sul sistema. Python può essere scaricato dal sitohttps://www.python.org/

Il primo passo è installare la CLI. Possiamo farlo con il seguente comando:

npm install –g angular-cli

Ora, crea una nuova cartella chiamata angularCLI in qualsiasi directory ed esegui il comando sopra.

Al termine, verrà installata la CLI.

Creazione di un progetto

Il progetto JS angolare può essere creato utilizzando il seguente comando.

Sintassi

ng new Project_name

Parametri

Project_name - Questo è il nome del progetto che deve essere creato.

Produzione

Nessuna.

Esempio

Eseguiamo il seguente comando per creare un nuovo progetto.

ng new demo2

Creerà automaticamente i file e inizierà a scaricare i pacchetti npm necessari.

Ora nel codice di Visual Studio possiamo aprire il progetto appena creato.

Esecuzione del progetto

Per eseguire il progetto, è necessario emettere il seguente comando:

ng server

Il numero di porta predefinito per l'applicazione in esecuzione è 4200. È possibile accedere alla porta e vedere l'applicazione in esecuzione.

L'inserimento delle dipendenze è la capacità di aggiungere la funzionalità dei componenti in fase di esecuzione. Diamo un'occhiata a un esempio e ai passaggi utilizzati per implementare l'inserimento delle dipendenze.

Step 1- Creare una classe separata che abbia il decoratore iniettabile. Il decoratore iniettabile consente di iniettare e utilizzare le funzionalità di questa classe in qualsiasi modulo JS angolare.

@Injectable() 
   export class classname {  
}

Step 2 - Successivamente nel modulo appComponent o nel modulo in cui desideri utilizzare il servizio, devi definirlo come provider nel decoratore @Component.

@Component ({  
   providers : [classname] 
})

Diamo un'occhiata a un esempio su come ottenere ciò.

Step 1 - Crea un file ts file per il servizio denominato app.service.ts.

Step 2 - Inserisci il seguente codice nel file creato sopra.

import { 
   Injectable 
} from '@angular/core'; 

@Injectable() 
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

I seguenti punti devono essere annotati riguardo al programma di cui sopra.

• Il decoratore iniettabile viene importato dal modulo angolare / centrale.

• Stiamo creando una classe chiamata appService decorata con il decoratore iniettabile.

• Stiamo creando una semplice funzione chiamata getApp che restituisce una semplice stringa chiamata "Hello world".

Step 3 - Nel file app.component.ts inserire il seguente codice.

import { 
   Component 
} from '@angular/core';  

import { 
   appService 
} from './app.service';  

@Component({ 
   selector: 'my-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService]  
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { } 
   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   }   
}

I seguenti punti devono essere annotati riguardo al programma di cui sopra.

• Innanzitutto, stiamo importando il nostro modulo appService nel modulo appComponent.

• Quindi, stiamo registrando il servizio come fornitore in questo modulo.

• Nel costruttore definiamo una variabile chiamata _appService del tipo appService in modo che possa essere chiamata ovunque nel modulo appComponent.

• Ad esempio, nel lifecyclehook ngOnInit, abbiamo chiamato la funzione getApp del servizio e assegnato l'output alla proprietà value della classe AppComponent.

Salva tutte le modifiche al codice e aggiorna il browser, otterrai il seguente output.

In questo capitolo vedremo gli altri file di configurazione che fanno parte del progetto Angular 2.

tsconfig.json

Questo file viene utilizzato per fornire le opzioni su TypeScript utilizzato per il progetto Angular JS.

{ 
   "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [ "es2015", "dom" ],
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
   }
}

Di seguito sono riportati alcuni punti chiave da notare sul codice sopra.

• L'obiettivo per la compilazione è es5 e questo perché la maggior parte dei browser può comprendere solo il dattiloscritto ES5.

• L'opzione sourceMap viene utilizzata per generare file Map, utili durante il debug. Quindi, durante lo sviluppo è bene mantenere questa opzione vera.

• Il "emitDecoratorMetadata": true e "experimentDecorators": true è richiesto per i decoratori JS angolari. Se non è presente, l'applicazione Angular JS non verrà compilata.

package.json

Questo file contiene informazioni sul progetto Angular 2. Di seguito sono riportate le impostazioni tipiche nel file.

{
   "name": "angular-quickstart",
   "version": "1.0.0",
   "description": "QuickStart package.json from the documentation,
      supplemented with testing support",
   
   "scripts": {
      "build": "tsc -p src/",
      "build:watch": "tsc -p src/ -w",
      "build:e2e": "tsc -p e2e/",
      "serve": "lite-server -c=bs-config.json",
      "serve:e2e": "lite-server -c=bs-config.e2e.json",
      "prestart": "npm run build",
      "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
      "pree2e": "npm run build:e2e",
      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" 
         --killothers --success first",
      "preprotractor": "webdriver-manager update",
      "protractor": "protractor protractor.config.js",
      "pretest": "npm run build",
      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
      "pretest:once": "npm run build",
      "test:once": "karma start karma.conf.js --single-run",
      "lint": "tslint ./src/**/*.ts -t verbose"
   },

   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
      "@angular/common": "~2.4.0",
      "@angular/compiler": "~2.4.0",
      "@angular/core": "~2.4.0",
      "@angular/forms": "~2.4.0",
      "@angular/http": "~2.4.0",
      "@angular/platform-browser": "~2.4.0",
      "@angular/platform-browser-dynamic": "~2.4.0",
      "@angular/router": "~3.4.0",
      "angular-in-memory-web-api": "~0.2.4",
      "systemjs": "0.19.40",
      "core-js": "^2.4.1",
      "rxjs": "5.0.1",
      "zone.js": "^0.7.4"
   },

   "devDependencies": {
      "concurrently": "^3.2.0",
      "lite-server": "^2.2.2",
      "typescript": "~2.0.10",
      "canonical-path": "0.0.2",
      "tslint": "^3.15.1",
      "lodash": "^4.16.4",
      "jasmine-core": "~2.4.1",
      "karma": "^1.3.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~4.0.14",
      "rimraf": "^2.5.4",
      "@types/node": "^6.0.46",
      "@types/jasmine": "2.5.36"
   },
   "repository": {}
}

Alcuni punti chiave da notare sul codice sopra -

• Esistono due tipi di dipendenze, prima sono le dipendenze e poi ci sono le dipendenze dev. Quelli di sviluppo sono necessari durante il processo di sviluppo e gli altri sono necessari per eseguire l'applicazione.

• Il comando "build: watch": "tsc -p src / -w" viene utilizzato per compilare il dattiloscritto in background cercando le modifiche nei file del dattiloscritto.

systemjs.config.json

Questo file contiene i file di sistema richiesti per l'applicazione Angular JS. Questo carica tutti i file di script necessari senza la necessità di aggiungere un tag di script alle pagine html. I file tipici avranno il codice seguente.

/** 
 * System configuration for Angular samples 
 * Adjust as necessary for your application needs. 
*/ 
(function (global) { 
   System.config ({ 
      paths: { 
         // paths serve as alias 
         'npm:': 'node_modules/' 
      }, 
      
      // map tells the System loader where to look for things 
      map: { 
         // our app is within the app folder 
         app: 'app',  
         
         // angular bundles 
         '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
         '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
         '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
         '@angular/platform-browser': 'npm:@angular/platformbrowser/bundles/platform-browser.umd.js', 
         '@angular/platform-browser-dynamic': 
            'npm:@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js', 
         '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
         '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
         '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',  
         
         // other libraries 
         'rxjs':  'npm:rxjs', 
         'angular-in-memory-web-api': 
            'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js' 
      }, 
     
      // packages tells the System loader how to load when no filename 
         and/or no extension 
      packages: { 
         app: { 
            defaultExtension: 'js' 
         }, 
         
         rxjs: { 
            defaultExtension: 'js' 
         } 
      } 
   
   }); 
})(this);

Alcuni punti chiave da notare sul codice sopra -

• 'npm:': 'node_modules /' indica la posizione nel nostro progetto in cui si trovano tutti i moduli npm.

• La mappatura dell'app: "app" indica la cartella in cui vengono caricati tutti i file delle nostre applicazioni.

Angular 2 ti consente di lavorare con qualsiasi controllo di terze parti. Una volta deciso il controllo da implementare, è necessario eseguire i seguenti passaggi:

Step 1 - Installa il componente utilizzando il comando npm.

Ad esempio, installeremo il controllo di terze parti ng2-pagination tramite il seguente comando.

npm install ng2-pagination --save

Una volta terminato, vedrai che il componente è stato installato con successo.

Step 2 - Includere il componente nel file app.module.ts.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import {Ng2PaginationModule} from 'ng2-pagination';

@NgModule ({
   imports:      [ BrowserModule,Ng2PaginationModule],
   declarations: [ AppComponent],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

Step 3 - Infine, implementa il componente nel tuo file app.component.ts.

import { Component } from '@angular/core';
import {PaginatePipe, PaginationService} from 'ng2-pagination';

@Component ({
   selector: 'my-app',
   template: '
      <ul>
         <li *ngFor = "let item of collection | paginate: {
            itemsPerPage: 5, currentPage: p }"> ... </li>
      </ul>
      <pagination-controls (pageChange) = "p = $event"></pagination-controls>
   '
})
export class AppComponent { }

Step 4 - Salva tutte le modifiche al codice e aggiorna il browser, otterrai il seguente output.

Nell'immagine sopra, puoi vedere che le immagini sono state memorizzate come One.jpg e two.jpg nella cartella Immagini.

Step 5 - Cambia il codice del file app.component.ts come segue.

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   
   appList: any[] = [{
      "ID": "1",
      "Name": "One",
      "url": 'app/Images/One.jpg'
   },
   {
      "ID": "2",
      "Name": "Two",
      "url": 'app/Images/two.jpg'
   } ];
}

I seguenti punti devono essere annotati sul codice di cui sopra.

• Stiamo definendo un array chiamato appList che è del tipo any. In questo modo può memorizzare qualsiasi tipo di elemento.

• Stiamo definendo 2 elementi. Ogni elemento ha 3 proprietà, ID, Nome e URL.

• L'URL di ogni elemento è il percorso relativo alle 2 immagini.

Step 6 - Apporta le seguenti modifiche al file app / app.component.html che è il tuo file modello.

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
      <img [src] = 'lst.url'> 
   </ul> 
</div>

I seguenti punti devono essere annotati sul programma di cui sopra:

• La direttiva ngFor viene utilizzata per scorrere tutti gli elementi della proprietà appList.

• Per ogni proprietà, utilizza l'elemento dell'elenco per visualizzare un'immagine.

• La proprietà src del tag img è quindi limitata alla proprietà url di appList nella nostra classe.

Step 7- Salva tutte le modifiche al codice e aggiorna il browser, otterrai il seguente output. Dall'output, puoi vedere chiaramente che le immagini sono state raccolte e mostrate nell'output.

In Angular JS, è molto facile visualizzare il valore delle proprietà della classe nel modulo HTML.

Facciamo un esempio e capiamo di più sulla visualizzazione dei dati. Nel nostro esempio, vedremo come visualizzare i valori delle varie proprietà nella nostra classe in una pagina HTML.

Step 1 - Cambia il codice del file app.component.ts come segue.

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

I seguenti punti devono essere annotati sul codice di cui sopra.

• Stiamo definendo un array chiamato appList che del tipo string.

• Stiamo definendo 3 elementi stringa come parte dell'array che è Binding, Display e Services.

• Abbiamo anche definito una proprietà chiamata TutorialName che ha un valore di Angular 2.

Step 2 - Apporta le seguenti modifiche al file app / app.component.html che è il tuo file modello.

<div>
   The name of this Tutorial is {{TutorialName}}<br>
   The first Topic is {{appList[0]}}<br>
   The second Topic is {{appList[1]}}<br>
   The third Topic is {{appList[2]}}<br>
</div>

I seguenti punti devono essere annotati sul codice di cui sopra.

• Stiamo facendo riferimento alla proprietà TutorialName per dire "qual è il nome del tutorial nella nostra pagina HTML".

• Stiamo usando il valore di indice per l'array per visualizzare ciascuno dei 3 argomenti nel nostro array.

Step 3- Salva tutte le modifiche al codice e aggiorna il browser, otterrai l'output seguente. Dall'output, puoi vedere chiaramente che i dati vengono visualizzati secondo i valori delle proprietà nella classe.

Un altro semplice esempio, che è vincolante al volo, è l'uso del tag html di input. Visualizza solo i dati mentre i dati vengono digitati nel tag html.

Apporta le seguenti modifiche al file app / app.component.html che è il tuo file modello.

<div>
   <input [value] = "name" (input) = "name = $event.target.value">
   {{name}}
</div>

I seguenti punti devono essere annotati sul codice di cui sopra.

• [value] = ”username” - Viene utilizzato per associare il nome utente dell'espressione alla proprietà value dell'elemento di input.

• (input) = ”expression” - Questo è un modo dichiarativo per associare un'espressione all'evento di input dell'elemento di input.

• username = $event.target.value - L'espressione che viene eseguita quando viene attivato l'evento di input.

• $event - Un'espressione esposta nelle associazioni di eventi da Angular, che ha il valore del payload dell'evento.

Quando salvi tutte le modifiche al codice e aggiorni il browser, otterrai il seguente output.

Ora, digita qualcosa nella casella di input come "Tutorialspoint". L'output cambierà di conseguenza.

In Angular 2, anche eventi come il clic del pulsante o qualsiasi altro tipo di evento possono essere gestiti molto facilmente. Gli eventi vengono attivati ​​dalla pagina html e vengono inviati alla classe JS Angular per ulteriori elaborazioni.

Diamo un'occhiata a un esempio di come possiamo ottenere la gestione degli eventi. Nel nostro esempio, esamineremo la visualizzazione di un pulsante di clic e una proprietà di stato. Inizialmente, la proprietà status sarà true. Quando si fa clic sul pulsante, la proprietà status diventerà falsa.

Step 1 - Cambia il codice del file app.component.ts come segue.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   Status: boolean = true; 
   clicked(event) { 
      this.Status = false; 
   } 
}

I seguenti punti devono essere annotati sul codice di cui sopra.

• Stiamo definendo una variabile chiamata status di tipo Boolean che inizialmente è vera.

• Successivamente, stiamo definendo la funzione cliccata che verrà chiamata ogni volta che il nostro pulsante viene cliccato sulla nostra pagina html. Nella funzione, cambiamo il valore della proprietà Status da true a false.

Step 2 - Apporta le seguenti modifiche al file app / app.component.html, che è il file modello.

<div> 
   {{Status}} 
   <button (click) = "clicked()">Click</button> 
</div>

I seguenti punti devono essere annotati sul codice di cui sopra.

• Per prima cosa stiamo solo visualizzando il valore della proprietà Status della nostra classe.

• Quindi stanno definendo il tag html del pulsante con il valore di Click. Ci assicuriamo quindi che l'evento clic del pulsante venga attivato sull'evento selezionato nella nostra classe.

Step 3 - Salva tutte le modifiche al codice e aggiorna il browser, otterrai il seguente output.

Step 4 - Fare clic sul pulsante Fare clic, si otterrà il seguente output.

Angular 2 ha molti filtri e pipe che possono essere utilizzati per trasformare i dati.

minuscolo

Viene utilizzato per convertire l'input in tutto minuscolo.

Sintassi

Propertyvalue | lowercase

Parametri

Nessuna

Risultato

Il valore della proprietà verrà convertito in minuscolo.

Esempio

Innanzitutto assicurati che il seguente codice sia presente nel file app.component.ts.

import { 
   Component 
} from '@angular/core'; 

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

Successivamente, assicurati che il seguente codice sia presente nel file app / app.component.html.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | lowercase}}<br> 
   The second Topic is {{appList[1] | lowercase}}<br> 
   The third Topic is {{appList[2]| lowercase}}<br> 
</div>

Produzione

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

maiuscolo

Viene utilizzato per convertire l'input in tutto maiuscolo.

Sintassi

Propertyvalue | uppercase

Parametri

Nessuna.

Risultato

Il valore della proprietà verrà convertito in maiuscolo.

Esempio

Innanzitutto assicurati che il seguente codice sia presente nel file app.component.ts.

import { 
   Component 
} from '@angular/core';

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

Successivamente, assicurati che il seguente codice sia presente nel file app / app.component.html.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | uppercase }}<br> 
   The second Topic is {{appList[1] | uppercase }}<br> 
   The third Topic is {{appList[2]| uppercase }}<br> 
</div>

Produzione

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

fetta

Viene utilizzato per tagliare un pezzo di dati dalla stringa di input.

Sintassi

Propertyvalue | slice:start:end

Parametri

• start - Questa è la posizione di partenza da cui dovrebbe iniziare la fetta.

• end - Questa è la posizione di partenza da dove dovrebbe finire la fetta.

Risultato

Il valore della proprietà verrà suddiviso in base alle posizioni iniziale e finale.

Esempio

Innanzitutto assicurati che il seguente codice sia presente nel file app.component.ts

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

Successivamente, assicurati che il seguente codice sia presente nel file app / app.component.html.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | slice:1:2}}<br> 
   The second Topic is {{appList[1] | slice:1:3}}<br> 
   The third Topic is {{appList[2]| slice:2:3}}<br> 
</div>

Produzione

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

Data

Viene utilizzato per convertire la stringa di input in formato data.

Sintassi

Propertyvalue | date:”dateformat”

Parametri

dateformat - Questo è il formato della data in cui la stringa di input deve essere convertita.

Risultato

Il valore della proprietà verrà convertito nel formato della data.

Esempio

Innanzitutto assicurati che il seguente codice sia presente nel file app.component.ts.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newdate = new Date(2016, 3, 15);
}

Successivamente, assicurati che il seguente codice sia presente nel file app / app.component.html.

<div> 
   The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br>  
</div>

Produzione

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

moneta

Viene utilizzato per convertire la stringa di input in formato valuta.

Sintassi

Propertyvalue | currency

Parametri

Nessuna.

Risultato

Il valore della proprietà verrà convertito nel formato valuta.

Esempio

Innanzitutto assicurati che il seguente codice sia presente nel file app.component.ts.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 123; 
}

Successivamente, assicurati che il seguente codice sia presente nel file app / app.component.html.

<div> 
   The currency of this Tutorial is {{newValue | currency}}<br>      
</div>

Produzione

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

percentuale

Viene utilizzato per convertire la stringa di input in formato percentuale.

Sintassi

Propertyvalue | percent

Parametri

Nessuna

Risultato

Il valore della proprietà verrà convertito in formato percentuale.

Esempio

Innanzitutto assicurati che il seguente codice sia presente nel file app.component.ts.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 30; 
}

Successivamente, assicurati che il seguente codice sia presente nel file app / app.component.html.

<div>
   The percentage is {{newValue | percent}}<br> 
</div>

Produzione

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

C'è un'altra variazione del tubo percentuale come segue.

Sintassi

Propertyvalue | percent: ‘{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}’

Parametri

• minIntegerDigits - Questo è il numero minimo di cifre intere.

• minFractionDigits - Questo è il numero minimo di cifre frazionarie.

• maxFractionDigits - Questo è il numero massimo di cifre frazionarie.

Risultato

Il valore della proprietà verrà convertito in formato percentuale

Esempio

Innanzitutto assicurati che il seguente codice sia presente nel file app.component.ts.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 0.3; 
}

Successivamente, assicurati che il seguente codice sia presente nel file app / app.component.html.

<div> 
   The percentage is {{newValue | percent:'2.2-5'}}<br>  
</div>

Produzione

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

Angular 2 ha anche la possibilità di creare tubi personalizzati. Il modo generale per definire una pipe personalizzata è il seguente.

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({name: 'Pipename'}) 

export class Pipeclass implements PipeTransform { 
   transform(parameters): returntype { } 
}

Dove,

• 'Pipename' - Questo è il nome della pipa.

• Pipeclass - Questo è il nome della classe assegnata alla pipe personalizzata.

• Transform - Questa è la funzione per lavorare con il tubo.

• Parameters - Questi sono i parametri che vengono passati alla pipe.

• Returntype - Questo è il tipo di ritorno della pipe.

Creiamo una pipe personalizzata che moltiplica 2 numeri. Useremo quindi quel tubo nella nostra classe di componenti.

Step 1 - Innanzitutto, crea un file chiamato multiplier.pipe.ts.

Step 2 - Inserisci il seguente codice nel file creato sopra.

import { 
   Pipe, 
   PipeTransform 
} from '@angular/core';  

@Pipe ({ 
   name: 'Multiplier' 
}) 

export class MultiplierPipe implements PipeTransform { 
   transform(value: number, multiply: string): number { 
      let mul = parseFloat(multiply); 
      return mul * value 
   } 
}

I seguenti punti devono essere annotati sul codice di cui sopra.

• Per prima cosa importiamo i moduli Pipe e PipeTransform.

• Quindi, stiamo creando un tubo con il nome "Moltiplicatore".

• Creazione di una classe denominata MultiplierPipe che implementa il modulo PipeTransform.

• La funzione di trasformazione prenderà quindi il valore e il parametro multiplo e produrrà la moltiplicazione di entrambi i numeri.

Step 3 - Nel file app.component.ts, inserisci il seguente codice.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>' 
}) 
export class AppComponent {  }

Note - Nel nostro modello, usiamo la nostra nuova pipe personalizzata.

Step 4 - Assicurati che il codice seguente sia inserito nel file app.module.ts.

import {
   NgModule
} from '@angular/core';

import {
   BrowserModule
} from '@angular/platform-browser';

import {
   AppComponent
} from './app.component';

import {
   MultiplierPipe
} from './multiplier.pipe'

@NgModule ({
   imports: [BrowserModule],
   declarations: [AppComponent, MultiplierPipe],
   bootstrap: [AppComponent]
})

export class AppModule {}

Le seguenti cose devono essere annotate sul codice sopra.

• Dobbiamo assicurarci di includere il nostro modulo MultiplierPipe.

• Dobbiamo anche assicurarci che sia incluso nella sezione delle dichiarazioni.

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

In Angular 2, puoi utilizzare la struttura degli elementi DOM dell'HTML per modificare i valori degli elementi in fase di esecuzione. Vediamone alcuni in dettaglio.

Il tag di input

Nel file app.component.ts inserire il codice seguente.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: ' 
      <div> 
         <input [value] = "name" (input) = "name = $event.target.value"> 
         {{name}} 
      </div> 
   ' 
}) 
export class AppComponent { }

Le seguenti cose devono essere annotate sul codice sopra.

• [value] = ”username” - Viene utilizzato per associare il nome utente dell'espressione alla proprietà value dell'elemento di input.

• (input) = ”expression” - Questo è un modo dichiarativo per associare un'espressione all'evento di input dell'elemento di input.

• username = $event.target.value - L'espressione che viene eseguita quando viene attivato l'evento di input.

• $event - È un'espressione esposta nelle associazioni di eventi da Angular, che ha il valore del payload dell'evento.

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

Ora puoi digitare qualsiasi cosa e lo stesso input si rifletterà nel testo accanto al controllo Input.

Fare clic su Input

Nel file app.component.ts inserire il codice seguente.

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   template: '<button (click) = "onClickMe()"> Click Me </button> {{clickMessage}}'
})

export class AppComponent {
   clickMessage = 'Hello';
   onClickMe() {
      this.clickMessage = 'This tutorial!';
   }
}

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

Quando premi il pulsante Click Me, otterrai il seguente output.

L'applicazione Angular 2 passa attraverso un intero set di processi o ha un ciclo di vita dal suo inizio alla fine dell'applicazione.

Il diagramma seguente mostra gli interi processi nel ciclo di vita dell'applicazione Angular 2.

Di seguito è riportata una descrizione di ogni hook del ciclo di vita.

• ngOnChanges - Quando il valore di una proprietà associata a dati cambia, viene chiamato questo metodo.

• ngOnInit - Questo viene chiamato ogni volta che si verifica l'inizializzazione della direttiva / componente dopo che Angular ha visualizzato per la prima volta le proprietà associate ai dati.

• ngDoCheck - Questo serve per il rilevamento e per agire sui cambiamenti che Angular non può o non rileva da solo.

• ngAfterContentInit - Questo viene chiamato in risposta dopo che Angular proietta il contenuto esterno nella vista del componente.

• ngAfterContentChecked - Questo viene chiamato in risposta dopo che Angular ha verificato il contenuto proiettato nel componente.

• ngAfterViewInit - Questo viene chiamato in risposta dopo che Angular ha inizializzato le viste del componente e le viste figlio.

• ngAfterViewChecked - Questo viene chiamato in risposta dopo che Angular ha verificato le visualizzazioni del componente e le visualizzazioni figlio.

• ngOnDestroy - Questa è la fase di pulizia appena prima che Angular distrugga la direttiva / componente.

Di seguito è riportato un esempio di implementazione di un hook del ciclo di vita. Nelapp.component.ts file, inserire il codice seguente.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class AppComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

Nel programma sopra, chiamiamo il file ngOnInit lifecycle hook per menzionare specificamente che il valore di this.values il parametro dovrebbe essere impostato su "Hello".

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

In Angular JS, è possibile annidare i contenitori uno dentro l'altro. Il contenitore esterno è noto come contenitore padre e quello interno è noto come contenitore figlio. Diamo un'occhiata a un esempio su come ottenere ciò. Di seguito sono riportati i passaggi.

Step 1 - Crea un file ts file per il contenitore figlio chiamato child.component.ts.

Step 2 - Nel file creato nel passaggio precedente, inserisci il codice seguente.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'child-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class ChildComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

Il codice precedente imposta il valore del parametro this.values ​​su "Hello".

Step 3 - Nel file app.component.ts, inserisci il seguente codice.

import { 
   Component 
} from '@angular/core'; 

import { 
   ChildComponent 
} from './child.component'; 

@Component ({ 
   selector: 'my-app', 
   template: '<child-app></child-app> ' 
}) 

export class AppComponent { }

Nel codice sopra, si noti che ora stiamo chiamando l'istruzione import per importare il file child.componentmodulo. Inoltre stiamo chiamando il selettore <child-app> dal componente figlio al nostro componente principale.

Step 4 - Successivamente, dobbiamo assicurarci che anche il componente figlio sia incluso nel file app.module.ts.

import { 
   NgModule 
} from '@angular/core'; 

import { 
   BrowserModule 
} from '@angular/platform-browser';  

import { 
   AppComponent 
} from './app.component';  

import { 
   MultiplierPipe 
} from './multiplier.pipe' 

import { 
   ChildComponent 
} from './child.component';  

@NgModule ({ 
   imports: [BrowserModule], 
   declarations: [AppComponent, MultiplierPipe, ChildComponent], 
   bootstrap: [AppComponent] 
}) 

export class AppModule {}

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

Un servizio viene utilizzato quando una funzionalità comune deve essere fornita a vari moduli. Ad esempio, potremmo avere una funzionalità di database che potrebbe essere riutilizzata tra vari moduli. E quindi potresti creare un servizio che potrebbe avere la funzionalità del database.

I seguenti passaggi chiave devono essere eseguiti durante la creazione di un servizio.

Step 1- Creare una classe separata che abbia il decoratore iniettabile. Il decoratore iniettabile consente di iniettare e utilizzare le funzionalità di questa classe in qualsiasi modulo JS angolare.

@Injectable() 
   export class classname {  
}

Step 2 - Successivamente nel modulo appComponent o nel modulo in cui desideri utilizzare il servizio, devi definirlo come provider nel decoratore @Component.

@Component ({  
   providers : [classname] 
})

Diamo un'occhiata a un esempio su come ottenere ciò. Di seguito sono riportati i passaggi coinvolti.

Step 1 - Crea un file ts file per il servizio denominato app.service.ts.

Step 2 - Inserisci il seguente codice nel file creato sopra.

import { 
   Injectable 
} from '@angular/core';  

@Injectable()
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

I seguenti punti devono essere annotati sul programma di cui sopra.

• Il decoratore iniettabile viene importato dal modulo angolare / centrale.

• Stiamo creando una classe chiamata appService decorata con il decoratore iniettabile.

• Stiamo creando una semplice funzione chiamata getApp, che restituisce una semplice stringa chiamata "Hello world".

Step 3 - Nel file app.component.ts, inserisci il seguente codice.

import { 
   Component 
} from '@angular/core';  

import { 
   appService 
} from './app.service';  

@Component ({ 
   selector: 'demo-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService] 
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { }  

   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   } 
}

I seguenti punti devono essere annotati sul programma di cui sopra.

• Per prima cosa, importiamo il nostro modulo appService nel modulo appComponent.

• Quindi, registriamo il servizio come provider in questo modulo.

• Nel costruttore definiamo una variabile chiamata _appService del tipo appService in modo che possa essere chiamata ovunque nel modulo appComponent.

• Ad esempio, nel lifecyclehook ngOnInit, abbiamo chiamato la funzione getApp del servizio e abbiamo assegnato l'output alla proprietà value della classe AppComponent.

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.