Angular 6 - Guida rapida
Sono disponibili cinque versioni principali di Angular. La prima versione rilasciata è Angular 1, chiamata anche AngularJS. Angular 1 è stato seguito da Angular 2, che ha subito molti cambiamenti rispetto ad Angular 1.
La struttura di Angular è basata sull'architettura dei componenti / servizi. AngularJS era basato sul controller di visualizzazione del modello.Angular 6 rilasciato a maggio 2018 si rivela un importante passo avanti ed è l'ultima versione del team Angular dopo Angular 5.
Angular 6 è quasi uguale ad Angular 5. Ha una retrocompatibilità con Angular 5. I progetti sviluppati in Angular 5 funzioneranno senza problemi con Angular 5.
Vediamo ora le nuove funzionalità e le modifiche apportate in Angular 5.
Angular 5 e le sue caratteristiche
Angular 5 è stato rilasciato nel novembre 2017. In base al suo obiettivo di velocità e dimensioni, era molto più veloce e di dimensioni inferiori rispetto a Angular 4. Di seguito sono riportate le funzionalità introdotte in Angular 5.
HTTPClient API- L'API HTTPClient è stata introdotta per deprecare la libreria HTTP. L'API HTTPClient è molto più veloce, sicura ed efficiente della libreria HTTP.
Multiple export aliases - Un componente può essere esportato utilizzando più alias per facilitare il processo di migrazione.
Internationalized Pipes for Number, Date, and Currency - Vengono introdotti nuovi tubi per una migliore standardizzazione.
Lambda support - È possibile utilizzare espressioni lambda con nomi propri al posto delle funzioni.
Build Optimizer- Introduzione di Build Optimizer. Ottimizza le dimensioni della build e migliora la velocità dell'applicazione. La CLI angolare utilizza automaticamente Build Optimizer.
Improved Compiler- Il compilatore da Angular 5 in poi supporta la compilazione incrementale che porta per una compilazione più veloce. Il compilatore utilizza le trasformazioni TypeScript, una nuova funzionalità di TypeScript 2.3 disponibile in poi.
Vediamo ora le nuove funzionalità aggiunte ad Angular 6:
Updated Angular CLI, Command Line interface- Aggiunti nuovi comandi, come ng-update per migrare dalla versione precedente alla versione corrente. ng-add per aggiungere rapidamente funzionalità dell'applicazione per rendere l'applicazione un'app Web progressiva.
Updated CDK, Component Development Kit- Supporta la creazione di elementi dell'interfaccia utente personalizzati senza bisogno di libreria di materiali angolari. Supporta layout di web design reattivi. Supporta pacchetti overlay per creare pop-up.
Updated Angular Material - Aggiunto nuovo componente Tree, mat-tree, una versione con stile e cdk-tree, una versione senza stile, per rappresentare una struttura gerarchica come albero.
Usage of RxJS, a reactive JS library
Angular Element- Consente la pubblicazione di componenti angolari come componenti Web che possono quindi essere utilizzati in qualsiasi pagina HTML. Utilizzando il pacchetto Angular Element, è possibile creare facilmente elementi personalizzati nativi.
Validatori multipli: consente l'applicazione di più validatori su un generatore di moduli.
Scuotimento degli alberi sui servizi - Ora lo scuotimento degli alberi può essere applicato anche ai servizi per rimuovere il codice morto.
In questo capitolo, discuteremo la configurazione dell'ambiente richiesta per Angular 6. Per installare Angular 6, abbiamo bisogno di quanto segue:
- Nodejs
- Npm
- CLI angolare
- IDE per scrivere il tuo codice
Nodejs deve essere maggiore di 8.11 e npm deve essere maggiore di 5.6.
Nodejs
Per verificare se nodejs è installato sul tuo sistema, digita node -vnel terminale. Questo ti aiuterà a vedere la versione di nodejs attualmente installata sul tuo sistema.
C:\>node -v
v8.11.3Se non stampa nulla, installa nodejs sul tuo sistema. Per installare nodejs, vai alla homepagehttps://nodejs.org/en/download/ di nodejs e installa il pacchetto in base al tuo sistema operativo.
La homepage di nodejs sarà simile alla seguente:
In base al tuo sistema operativo, installa il pacchetto richiesto. Una volta installato nodejs, anche npm verrà installato insieme ad esso. Per verificare se npm è installato o meno, digita npm -v nel terminale. Dovrebbe visualizzare la versione di npm.
C:\>npm -v
5.6.0Le installazioni di Angular 4 sono molto semplici con l'aiuto di angular CLI. Visita la home pagehttps://cli.angular.io/ di angolare per ottenere il riferimento del comando.
genere npm install -g @angular/cli, per installare la cli angolare sul tuo sistema.
Otterrai l'installazione di cui sopra nel tuo terminale, una volta installato Angular CLI. Puoi utilizzare qualsiasi IDE di tua scelta, ad esempio WebStorm, Atom, Visual Studio Code, ecc.
I dettagli della configurazione del progetto sono spiegati nel prossimo capitolo.
AngularJS si basa sul controller della vista del modello, mentre Angular 4 si basa sulla struttura dei componenti. Angular 6 funziona sulla stessa struttura di Angular4 ma è più veloce rispetto ad Angular4.
Angular6 utilizza la versione TypeScript 2.9 mentre Angular 4 utilizza TypeScript versione 2.2. Questo porta molta differenza nelle prestazioni.
Per installare Angular 6, il team di Angular ha creato Angular CLI che semplifica l'installazione. È necessario eseguire alcuni comandi per installare Angular 6.
Vai a questo sito https://cli.angular.io per installare Angular CLI.
Per iniziare con l'installazione, dobbiamo prima assicurarci di avere nodejs e npm installati con l'ultima versione. Il pacchetto npm viene installato insieme a nodejs.
Vai al sito di nodejs https://nodejs.org/en/.
L'ultima versione di Nodejs v8.11.3 è consigliata agli utenti. Gli utenti che hanno già nodejs maggiore di 8.11 possono saltare il processo precedente. Una volta installato nodejs, puoi controllare la versione di node nella riga di comando utilizzando il comando, node-v, come mostrato di seguito -
node -v
v8.11.3Il prompt dei comandi mostra v8.11.3. Una volta installato nodejs, anche npm verrà installato insieme ad esso.
Per verificare la versione di npm, digita comando npm -vnel terminale. Verrà visualizzata la versione di npm come mostrato di seguito.
npm -v
v5.6.0La versione di npm è 5.6.0. Ora che abbiamo installato nodejs e npm, eseguiamo i comandi angular cli per installare Angular 6. Vedrai i seguenti comandi sulla pagina web:
npm install -g @angular/cli //command to install angular 6
ng new Angular 6-app // name of the project
cd my-dream-app
ng serveCominciamo con il primo comando nella riga di comando e vediamo come funziona.
Per cominciare, creeremo una directory vuota in cui eseguiremo il comando Angular CLI.
npm install -g @angular/cli //command to install angular 6Abbiamo creato una cartella vuota ProjectA4e installato il comando Angular CLI. Abbiamo anche usato-gper installare Angular CLI a livello globale. Ora puoi creare il tuo progetto Angular 4 in qualsiasi directory o cartella e non devi installare il progetto Angular CLI, poiché è installato sul tuo sistema a livello globale e puoi utilizzarlo da qualsiasi directory.
Controlliamo ora se Angular CLI è installato o meno. Per verificare l'installazione, eseguire il seguente comando nel terminale:
ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ ? \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 6.1.3
Node: 8.11.3
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.7.3
@angular-devkit/core 0.7.3
@angular-devkit/schematics 0.7.3
@schematics/angular 0.7.3
@schematics/update 0.7.3
rxjs 6.2.2
typescript 2.9.2Otteniamo la versione @ angular / cli, che è attualmente 6.1.3. La versione del nodo in esecuzione è 8.11.3 e anche i dettagli del sistema operativo. I dettagli di cui sopra ci dicono che abbiamo installato con successo cli angolare e ora siamo pronti per iniziare il nostro progetto.
Ora abbiamo installato Angular 6. Creiamo ora il nostro primo progetto in Angular 6. Per creare un progetto in Angular 6, useremo il seguente comando:
ng new projectnameDaremo un nome al progetto ng new Angular6App.
Eseguiamo ora il comando precedente nella riga di comando.
ng new Angular6App
CREATE Angular6App/angular.json (3593 bytes)
CREATE Angular6App/package.json (1317 bytes)
CREATE Angular6App/README.md (1028 bytes)
CREATE Angular6App/tsconfig.json (408 bytes)
CREATE Angular6App/tslint.json (2805 bytes)
CREATE Angular6App/.editorconfig (245 bytes)
CREATE Angular6App/.gitignore (503 bytes)
CREATE Angular6App/src/favicon.ico (5430 bytes)
CREATE Angular6App/src/index.html (298 bytes)
CREATE Angular6App/src/main.ts (370 bytes)
CREATE Angular6App/src/polyfills.ts (3194 bytes)
CREATE Angular6App/src/test.ts (642 bytes)
CREATE Angular6App/src/styles.css (80 bytes)
CREATE Angular6App/src/browserslist (375 bytes)
CREATE Angular6App/src/karma.conf.js (964 bytes)
CREATE Angular6App/src/tsconfig.app.json (170 bytes)
CREATE Angular6App/src/tsconfig.spec.json (256 bytes)
CREATE Angular6App/src/tslint.json (314 bytes)
CREATE Angular6App/src/assets/.gitkeep (0 bytes)
CREATE Angular6App/src/environments/environment.prod.ts (51 bytes)
CREATE Angular6App/src/environments/environment.ts (642 bytes)
CREATE Angular6App/src/app/app.module.ts (314 bytes)
CREATE Angular6App/src/app/app.component.html (1141 bytes)
CREATE Angular6App/src/app/app.component.spec.ts (1010 bytes)
CREATE Angular6App/src/app/app.component.ts (215 bytes)
CREATE Angular6App/src/app/app.component.css (0 bytes)
CREATE Angular6App/e2e/protractor.conf.js (752 bytes)
CREATE Angular6App/e2e/tsconfig.e2e.json (213 bytes)
CREATE Angular6App/e2e/src/app.e2e-spec.ts (307 bytes)
CREATE Angular6App/e2e/src/app.po.ts (208 bytes)Il progetto Angular6Appviene creato con successo. Installa tutti i pacchetti necessari per l'esecuzione del nostro progetto in Angular 6. Passiamo ora al progetto creato, che si trova nella directoryAngular6App. Cambia la directory nella riga di comando -cd Angular 6-app.
Useremo l'IDE di Visual Studio Code per lavorare con Angular 6; puoi usare qualsiasi IDE, ad esempio Atom, WebStorm, ecc.
Per scaricare Visual Studio Code, vai a https://code.visualstudio.com/ e fare clic Download for Windows.
Clic Download for Windows per installare l'IDE ed eseguire il setup per iniziare a usare l'IDE.
L'editor ha il seguente aspetto:
Non abbiamo avviato alcun progetto al suo interno. Prendiamo ora il progetto che abbiamo creato utilizzando angular-cli.
Ora che abbiamo la struttura dei file per il nostro progetto, compiliamo il nostro progetto con il seguente comando:
ng serveIl ng serve Il comando crea l'applicazione e avvia il server web.
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
...
Date: 2018-08-18T11:17:54.745Z
Hash: 0ace6c8a055c58d1734c
Time: 20490ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.27 MB [initial] [rendered]
i ?wdm?: Compiled successfully.Il server web si avvia sulla porta 4200. Digitare l'URL http://localhost:4200/nel browser e vedere l'output. Verrai indirizzato alla seguente schermata:
Apportiamo ora alcune modifiche per visualizzare il seguente contenuto:
"Welcome to Angular 6 project"
Abbiamo apportato modifiche ai file: app.component.html e app.component.ts. Discuteremo di più su questo nei nostri capitoli successivi.
Cerchiamo di completare la configurazione del progetto. Se vedi che abbiamo usato la porta 4200, che è la porta predefinita che angular-cli utilizza durante la compilazione. È possibile modificare la porta se lo si desidera utilizzando il seguente comando:
ng serve --host 0.0.0.0 -port 4205La cartella dell'app Angular 6 ha quanto segue folder structure -
e2e- cartella di test end to end. Principalmente e2e viene utilizzato per i test di integrazione e aiuta a garantire che l'applicazione funzioni correttamente.
node_modules- Il pacchetto npm installato è node_modules. Puoi aprire la cartella e vedere i pacchetti disponibili.
src - Questa è la cartella in cui lavoreremo al progetto utilizzando Angular 4.
La cartella dell'app Angular 6 ha quanto segue file structure -
.angular-cli.json - Fondamentalmente contiene il nome del progetto, la versione di cli, ecc.
.editorconfig - Questo è il file di configurazione per l'editor.
.gitignore - Un file .gitignore dovrebbe essere inserito nel repository, in modo da condividere le regole di ignora con tutti gli altri utenti che clonano il repository.
karma.conf.js- Viene utilizzato per il test dell'unità tramite il goniometro. Tutte le informazioni necessarie per il progetto sono fornite nel file karma.conf.js.
package.json - Il file package.json dice quali librerie verranno installate in node_modules quando si esegue npm install.
Al momento, se apri il file nell'editor, otterrai i seguenti moduli aggiunti al suo interno.
"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "~0.8.26"Nel caso in cui sia necessario aggiungere più librerie, è possibile aggiungerle qui ed eseguire il comando npm install.
protractor.conf.js - Questa è la configurazione di test richiesta per l'applicazione.
tsconfig.json - Questo fondamentalmente contiene le opzioni del compilatore richieste durante la compilazione.
tslint.json - Questo è il file di configurazione con le regole da considerare durante la compilazione.
Il src folder è la cartella principale, che internally has a different file structure.
app
Contiene i file descritti di seguito. Questi file vengono installati da angular-cli per impostazione predefinita.
app.module.ts- Se apri il file, vedrai che il codice ha riferimenti a diverse librerie, che vengono importate. Angular-cli ha utilizzato queste librerie predefinite per l'importazione: angular / core, platform-browser. I nomi stessi spiegano l'uso delle librerie.
Vengono importati e salvati in variabili come declarations, imports, providers, e bootstrap.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }declarations- Nelle dichiarazioni viene memorizzato il riferimento ai componenti. L'Appcomponent è il componente predefinito che viene creato ogni volta che viene avviato un nuovo progetto. Impareremo a creare nuovi componenti in una sezione diversa.
imports- Questo avrà i moduli importati come mostrato sopra. Al momento, BrowserModule fa parte delle importazioni che viene importato da @ angular / platform-browser.
providers- Questo farà riferimento ai servizi creati. Il servizio verrà discusso in un capitolo successivo.
bootstrap - Fa riferimento al componente predefinito creato, ovvero AppComponent.
app.component.css- Puoi scrivere la tua struttura css qui. In questo momento, abbiamo aggiunto il colore di sfondo al div come mostrato di seguito.
.divdetails{
background-color: #ccc;
}app.component.html - Il codice html sarà disponibile in questo file.
<!--The content below is only a placeholder and can be replaced.-->
<div class = "divdetails">
<div style = "text-align:center">
<h1>
Welcome to {{title}}!
</h1>
<img width = "300" src = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNv
ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3Ry
YXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9
uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i
TGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4b
Wxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB
4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hY
mxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmV
zZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojR
EQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZ
GRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBva
W50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjM
gMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMi
AJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1L
DUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwy
MzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGN
sYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLj
ctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuM
UwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4b
DE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2>
<a target = "_blank" href="https://angular.io/tutorial">Tour of Heroes</a>
</h2>
</li>
<li>
<h2>
<a target = "_blank" href = "https://github.com/angular/angular-cli/wiki">
CLI Documentation
</a>
</h2>
</li>
<li>
<h2>
<a target = "_blank" href="http://angularjs.blogspot.ca/">Angular blog</a>
</h2>
</li>
</ul>
</div>Questo è il codice html predefinito attualmente disponibile con la creazione del progetto.
app.component.spec.ts - Questi sono file generati automaticamente che contengono unit test per il componente di origine.
app.component.ts- La classe per il componente è definita qui. Puoi eseguire l'elaborazione della struttura html nel file .ts. Il trattamento includerà attività come la connessione al database, l'interazione con altri componenti, il routing, i servizi, ecc.
La struttura del file è la seguente:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}Risorse
Puoi salvare le tue immagini, i file js in questa cartella.
Ambiente
Questa cartella contiene i dettagli per l'ambiente di produzione o di sviluppo. La cartella contiene due file.
- environment.prod.ts
- environment.ts
Entrambi i file contengono dettagli che indicano se il file finale deve essere compilato nell'ambiente di produzione o nell'ambiente dev.
La struttura di file aggiuntiva della cartella dell'app Angular 4 include quanto segue:
favicon.ico
Questo è un file che di solito si trova nella directory principale di un sito web.
index.html
Questo è il file che viene visualizzato nel browser.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>HTTP Search Param</title>
<base href = "/">
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<link href = "https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel = "stylesheet">
<link href = "styles.c7c7b8bf22964ff954d3.bundle.css" rel = "stylesheet">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "icon" type = "image/x-icon" href = "favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>Il corpo ha <app-root></app-root>. Questo è il selettore utilizzato inapp.component.ts file e visualizzerà i dettagli dal file app.component.html.
main.ts
main.ts è il file da cui iniziamo lo sviluppo del nostro progetto. Inizia con l'importazione del modulo di base di cui abbiamo bisogno. In questo momento, se vedi angular / core, angular / platform-browser-dynamic, app.module e environment vengono importati per impostazione predefinita durante l'installazione angular-cli e la configurazione del progetto.
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);Il platformBrowserDynamic().bootstrapModule(AppModule) ha il riferimento al modulo genitore AppModule. Quindi, quando viene eseguito nel browser, il file che viene chiamato è index.html. Index.html si riferisce internamente a main.ts che chiama il modulo genitore, ovvero AppModule quando viene eseguito il codice seguente:
platformBrowserDynamic().bootstrapModule(AppModule);Quando viene chiamato AppModule, chiama app.module.ts che chiama ulteriormente AppComponent in base al boostrap come segue:
bootstrap: [AppComponent]In app.component.ts è presente un file selector: app-rootche viene utilizzato nel file index.html. Questo mostrerà i contenuti presenti in app.component.html.
Nel browser verrà visualizzato quanto segue:
polyfill.ts
Viene utilizzato principalmente per la compatibilità con le versioni precedenti.
styles.css
Questo è il file di stile richiesto per il progetto.
test.ts
Qui verranno gestiti i casi di unit test per testare il progetto.
tsconfig.app.json
Viene utilizzato durante la compilazione, ha i dettagli di configurazione che devono essere utilizzati per eseguire l'applicazione.
tsconfig.spec.json
Questo aiuta a mantenere i dettagli per il test.
typings.d.ts
Viene utilizzato per gestire la definizione TypeScript.
La maggior parte dello sviluppo con Angular 6 viene eseguita nei componenti. I componenti sono fondamentalmente classi che interagiscono con il file .html del componente, che viene visualizzato nel browser. Abbiamo visto la struttura dei file in uno dei nostri capitoli precedenti. La struttura del file ha il componente dell'app ed è composta dai seguenti file:
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
I file sopra sono stati creati per impostazione predefinita quando abbiamo creato un nuovo progetto utilizzando il comando angular-cli.
Se apri il file app.module.ts file, ha alcune librerie che vengono importate e anche un dichiarativo a cui viene assegnato l'appcomponent come segue:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Le dichiarazioni includono la variabile AppComponent, che abbiamo già importato. Questo diventa il componente principale.
Ora, angular-cli ha un comando per creare il tuo componente. Tuttavia, il componente dell'app creato per impostazione predefinita rimarrà sempre il genitore e i componenti successivi creati formeranno i componenti figli.
Eseguiamo ora il comando per creare il componente.
ng generate component new-cmpQuando esegui il comando precedente nella riga di comando, riceverai il seguente output:
D:\Node\Angular6App>ng generate component new-cmp
CREATE src/app/new-cmp/new-cmp.component.html (26 bytes)
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes)
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes)
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes)
UPDATE src/app/app.module.ts (398 bytes)Ora, se andiamo a controllare la struttura del file, otterremo la nuova cartella new-cmp creata nella cartella src / app.
I seguenti file vengono creati nella cartella new-cmp:
new-cmp.component.css: viene creato il file css per il nuovo componente.
new-cmp.component.html: il file html viene creato.
new-cmp.component.spec.ts: può essere utilizzato per i test di unità.
new-cmp.component.ts - qui possiamo definire il modulo, le proprietà, ecc.
Le modifiche vengono aggiunte al file app.module.ts come segue:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
// includes the new-cmp component we created
@NgModule({
declarations: [
AppComponent,
NewCmpComponent // here it is added in declarations and will behave as a child component
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given.
})
export class AppModule { }Il new-cmp.component.ts file viene generato come segue:
import { Component, OnInit } from '@angular/core'; // here angular/core is imported .
@Component({
// this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.
selector: 'app-new-cmp', //
templateUrl: './new-cmp.component.html',
// reference to the html file created in the new component.
styleUrls: ['./new-cmp.component.css'] // reference to the style file.
})
export class NewCmpComponent implements OnInit {
constructor() { }
ngOnInit() {}
}Se vedi il file new-cmp.component.ts sopra, crea una nuova classe chiamata NewCmpComponent, che implementa OnInit.In, che ha un costruttore e un metodo chiamato ngOnInit (). ngOnInit viene chiamato per impostazione predefinita quando viene eseguita la classe.
Controlliamo come funziona il flusso. Ora, il componente dell'app, creato per impostazione predefinita, diventa il componente principale. Qualsiasi componente aggiunto in seguito diventa il componente figlio.
Quando premiamo l'URL nel file http://localhost:4200/ browser, esegue prima il file index.html mostrato di seguito -
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Angular 6 Application</title>
<base href = "/">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "icon" type = "image/x-icon" href = "favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>Quanto sopra è il normale file html e non vediamo nulla che viene stampato nel browser. Dai un'occhiata al tag nella sezione del corpo.
<app-root></app-root>Questo è il tag radice creato da Angular per impostazione predefinita. Questo tag ha il riferimento inmain.ts file.
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);AppModule viene importato dall'app del modulo genitore principale e lo stesso viene assegnato al modulo bootstrap, che fa caricare l'appmodule.
Vediamo ora il file app.module.ts file -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
@NgModule({
declarations: [
AppComponent,
NewCmpComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Qui, AppComponent è il nome dato, ovvero la variabile per memorizzare il riferimento del file app. Component.tse lo stesso è dato al bootstrap. Vediamo ora il fileapp.component.ts file.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 Project!';
}Il nucleo angolare viene importato e indicato come Componente e lo stesso viene utilizzato nel dichiaratore come:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})Nel riferimento del dichiaratore al selettore, templateUrl e styleUrlsono dati. Il selettore qui non è altro che il tag che si trova nel file index.html che abbiamo visto sopra.
La classe AppComponent ha una variabile chiamata title, che viene visualizzata nel browser.
Il @Component utilizza templateUrl chiamato app.component.html che è il seguente:
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>Ha solo il codice html e il titolo della variabile tra parentesi graffe. Viene sostituito con il valore, che è presente nel fileapp.component.tsfile. Questo si chiama associazione. Discuteremo il concetto di associazione in un capitolo successivo.
Ora che abbiamo creato un nuovo componente chiamato new-cmp. Lo stesso viene incluso nelapp.module.ts file, quando viene eseguito il comando per creare un nuovo componente.
app.module.ts ha un riferimento al nuovo componente creato.
Controlliamo ora i nuovi file creati in new-cmp.
new-cmp.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-new-cmp',
templateUrl: './new-cmp.component.html',
styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
constructor() { }
ngOnInit() {}
}Qui dobbiamo importare anche il core. Il riferimento del componente viene utilizzato nel dichiaratore.
Il dichiaratore ha il selettore chiamato app-new-cmp e il templateUrl e styleUrl.
Il .html chiamato new-cmp.component.html è il seguente -
<p>
new-cmp works!
</p>Come visto sopra, abbiamo il codice html, cioè il tag p. Il file di stile è vuoto poiché al momento non è necessario alcuno stile. Ma quando eseguiamo il progetto, non vediamo nulla relativo al nuovo componente che viene visualizzato nel browser. Aggiungiamo ora qualcosa e lo stesso può essere visto nel browser in seguito.
Il selettore, cioè app-new-cmp deve essere aggiunto nel file app.component .html file come segue -
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<app-new-cmp></app-new-cmp>Quando il <app-new-cmp></app-new-cmp> viene aggiunto il tag, tutto ciò che è presente nel file .html del nuovo componente creato verrà visualizzato nel browser insieme ai dati del componente genitore.
Vediamo il file new component .html file e il file new-cmp.component.ts file.
new-cmp.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-new-cmp',
templateUrl: './new-cmp.component.html',
styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
newcomponent = "Entered in new component created";
constructor() {}
ngOnInit() { }
}Nella classe, abbiamo aggiunto una variabile chiamata nuovo componente e il valore è "Entered in new component created".
La variabile di cui sopra è vincolata in .new-cmp.component.html file come segue -
<p>
{{newcomponent}}
</p>
<p>
new-cmp works!
</p>Da quando abbiamo incluso il file <app-new-cmp></app-new-cmp> selettore nel file app. component .html che è il .html del componente genitore, il contenuto presente nel file .html del nuovo componente (new-cmp.component.html) viene visualizzato nel browser come segue:
Allo stesso modo, possiamo creare componenti e collegare gli stessi utilizzando il selettore nel file app.component.html file secondo i nostri requisiti.
Module in Angular si riferisce a un luogo in cui è possibile raggruppare i componenti, le direttive, i tubi e i servizi correlati all'applicazione.
Nel caso in cui si stia sviluppando un sito Web, le sezioni intestazione, piè di pagina, sinistra, centro e destra diventano parte di un modulo.
Per definire il modulo, possiamo usare il NgModule. Quando crei un nuovo progetto utilizzando il comando Angular -cli, il ngmodule viene creato nel file app.module.ts per impostazione predefinita e ha il seguente aspetto:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Il NgModule deve essere importato come segue:
import { NgModule } from '@angular/core';La struttura per il modulo ng è come mostrato di seguito:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})Inizia con @NgModule e contiene un oggetto che ha dichiarazioni, import s, provider e bootstrap.
Dichiarazione
È una serie di componenti creati. Se viene creato un nuovo componente, verrà prima importato e il riferimento verrà incluso nelle dichiarazioni come mostrato di seguito -
declarations: [
AppComponent,
NewCmpComponent
]Importare
È un array di moduli necessari per essere utilizzati nell'applicazione. Può essere utilizzato anche dai componenti nell'array di dichiarazione. Ad esempio, in questo momento nel @NgModule vediamo il modulo del browser importato. Nel caso in cui la tua domanda abbia bisogno di moduli, puoi includere il modulo come segue:
import { FormsModule } from '@angular/forms';L'importazione in @NgModule sarà come il seguente -
imports: [
BrowserModule,
FormsModule
]Fornitori
Ciò includerà i servizi creati.
Bootstrap
Ciò include il componente principale dell'app per l'avvio dell'esecuzione.
Il Data Binding è disponibile direttamente da AngularJS, Angular 2,4 ed è ora disponibile anche in Angular 6. Usiamo le parentesi graffe per l'associazione dei dati - {{}}; questo processo è chiamato interpolazione. Abbiamo già visto nei nostri esempi precedenti come abbiamo dichiarato il valore alla variabile title e lo stesso viene stampato nel browser.
La variabile in app.component.html il file è indicato come {{titolo}} e il valore del titolo è inizializzato nel file app.component.ts file e in app.component.html, viene visualizzato il valore.
Creiamo ora un menu a discesa di mesi nel browser. Per farlo, abbiamo creato una serie di mesi inapp.component.ts come segue -
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 Project!';
// declared array of months.
months = ["January", "Feburary", "March", "April", "May",
"June", "July", "August", "September",
"October", "November", "December"];
}L'array del mese mostrato sopra deve essere visualizzato in un menu a discesa nel browser. Per questo, useremo la seguente riga di codice:
<!--The content below is only a placeholder and can be replaced. -->
<div style = "text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select>
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>Abbiamo creato il normale tag di selezione con opzione. In opzione, abbiamo utilizzato ilfor loop. Ilfor loop viene utilizzato per iterare nell'array dei mesi, che a sua volta creerà il tag di opzione con il valore presente nei mesi.
La sintassi for in angolare è *ngFor = "let I of months" e per ottenere il valore dei mesi lo stiamo visualizzando in {{i}}.
Le due parentesi graffe aiutano con l'associazione dei dati. Dichiari le variabili nel tuo fileapp.component.ts file e lo stesso verrà sostituito utilizzando le parentesi graffe.
Vediamo l'output dell'array del mese precedente nel browser
La variabile impostata in app.component.ts può essere associato con il file app.component.htmlusando le parentesi graffe; per esempio,{{}}.
Vediamo ora di visualizzare i dati nel browser in base alla condizione. Qui abbiamo aggiunto una variabile e assegnato il valore come vero. Usando l'istruzione if, possiamo nascondere / mostrare il contenuto da visualizzare.
Esempio
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
//array of months.
months = ["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"];
isavailable = true; //variable is set to true
}<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select>
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf = "isavailable">Condition is valid.</span>
<!--over here based on if condition the text condition is valid is displayed.
If the value of isavailable is set to false it will not display the text.-->
</div>Produzione
Proviamo l'esempio sopra usando il IF THEN ELSE condizione.
Esempio
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
//array of months.
months = ["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"];
isavailable = false;
}In questo caso, abbiamo creato il file isavailablevariabile come false. Per stampare il fileelse condizione, dovremo creare il file ng-template come segue -
<ng-template #condition1>Condition is invalid</ng-template>Il codice completo ha questo aspetto:
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select>
<option *ngFor="let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf = "isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>
</div>If viene utilizzato con la condizione else e la variabile utilizzata è condition1. Lo stesso è assegnato come fileid al ng-templatee quando la variabile disponibile è impostata su false il testo Condition is invalid È visualizzato.
La seguente schermata mostra la visualizzazione nel browser.
Usiamo ora il file if then else condizione.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
//array of months.
months = ["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"];
isavailable = true;
}Ora creeremo la variabile isavailablecome vero. In html, la condizione è scritta nel modo seguente:
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select>
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf = "isavailable; then condition1 else condition2">Condition is valid.</span>
<ng-template #condition1>Condition is valid</ng-template>
<ng-template #condition2>Condition is invalid</ng-template>
</div>Se la variabile è vera, allora condition1, altro condition2. Ora vengono creati due modelli con id#condition1 e #condition2.
La visualizzazione nel browser è la seguente:
In questo capitolo, discuteremo come funziona Event Binding in Angular 6. Quando un utente interagisce con un'applicazione sotto forma di un movimento della tastiera, un clic del mouse o un passaggio del mouse, genera un evento. Questi eventi devono essere gestiti per eseguire un qualche tipo di azione. È qui che entra in gioco l'associazione degli eventi.
Consideriamo un esempio per capirlo meglio.
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select>
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf = "isavailable; then condition1 else condition2">
Condition is valid.
</span>
<ng-template #condition1>Condition is valid</ng-template>
<ng-template #condition2>Condition is invalid</ng-template>
</div>
<button (click)="myClickFunction($event)">
Click Me
</button>Nel app.component.html file, abbiamo definito un pulsante e aggiunto una funzione utilizzando l'evento click.
La seguente è la sintassi per definire un pulsante e aggiungervi una funzione.
(click)="myClickFunction($event)"La funzione è definita in .ts file: app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 Project!';
//array of months.
months = ["January", "Feburary", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"];
isavailable = true;
myClickFunction(event) {
//just added console.log which will display the event details in browser on click of the button.
alert("Button is clicked");
console.log(event);
}
}Facendo clic sul pulsante, il controllo passerà alla funzione myClickFunction e apparirà una finestra di dialogo che mostra the Button is clicked come mostrato nello screenshot seguente -
Aggiungiamo ora l'evento di modifica al menu a discesa.
La seguente riga di codice ti aiuterà ad aggiungere l'evento di modifica al menu a discesa:
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select (change) = "changemonths($event)">
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf = "isavailable; then condition1 else condition2">
Condition is valid.
</span>
<ng-template #condition1>Condition is valid</ng-template>
<ng-template #condition2>Condition is invalid</ng-template>
</div>
<button (click) = "myClickFunction($event)">Click Me</button>La funzione è dichiarata in app.component.ts file -
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 Project!';
//array of months.
months = ["January", "Feburary", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"];
isavailable = true;
myClickFunction(event) {
alert("Button is clicked");
console.log(event);
}
changemonths(event) {
console.log("Changed month from the Dropdown");
console.log(event);
}
}Il messaggio della console "Changed month from the Dropdown"viene visualizzato nella console insieme all'evento.
Aggiungiamo un messaggio di avviso in app.component.ts quando il valore dal menu a discesa viene modificato come mostrato di seguito -
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 Project!';
//array of months.
months = ["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"];
isavailable = true;
myClickFunction(event) {
//just added console.log which will display the event details in browser
on click of the button.
alert("Button is clicked");
console.log(event);
}
changemonths(event) {
alert("Changed month from the Dropdown");
}
}Quando il valore nell'elenco a discesa viene modificato, verrà visualizzata una finestra di dialogo e verrà visualizzato il seguente messaggio: "Changed month from the Dropdown".
Angular 6 usa il <ng-template> come tag simile a Angular 4 invece di <template>che viene utilizzato in Angular2. Il motivo per cui Angular 4 è cambiato<template> per <ng-template> è perché c'è un conflitto di nomi tra i file <template> tag e il file html <template>tag standard. Sarà deprecato completamente andare avanti.
Usiamo ora il modello insieme al file if else condizione e vedere l'output.
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select (change) = "changemonths($event)" name = "month">
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf = "isavailable;then condition1 else condition2">Condition is valid.</span>
<ng-template #condition1>Condition is valid from template</ng-template>
<ng-template #condition2>Condition is invalid from template</ng-template>
</div>
<button (click) = "myClickFunction($event)">Click Me</button>Per il tag Span, abbiamo aggiunto il if dichiarazione con l'estensione else condition e chiamerà il template condition1, altrimenti condition2.
I modelli devono essere chiamati come segue:
<ng-template #condition1>Condition is valid from template</ng-template>
<ng-template #condition2>Condition is invalid from template</ng-template>Se la condizione è vera, viene chiamato il modello condition1, altrimenti condition2.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 Project!';
//array of months.
months = ["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"];
isavailable = false;
myClickFunction(event) {
this.isavailable = false;
}
changemonths(event) {
alert("Changed month from the Dropdown");
console.log(event);
}
}L'output nel browser è il seguente:
La variabile isavailableè falso, quindi viene stampato il modello condition2. Se fai clic sul pulsante, verrà chiamato il rispettivo modello. Se controlli il browser, vedrai che non ottieni mai il tag span nel dominio. Il seguente esempio ti aiuterà a capire lo stesso.
Se controlli il browser, vedrai che il dom non ha il tag span. Ha ilCondition is invalid from template nel dom.
La seguente riga di codice in html ci aiuterà a ottenere il tag span nel dominio.
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select (change) = "changemonths($event)" name = "month">
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf = "isavailable; else condition2">Condition is valid.</span>
<ng-template #condition1>Condition is valid from template</ng-template>
<ng-template #condition2>Condition is invalid from template</ng-template>
</div>
<button (click)="myClickFunction($event)">Click Me</button>Se rimuoviamo la condizione then, otteniamo l'estensione "Condition is valid"messaggio nel browser e il tag span è disponibile anche nel dom. Ad esempio, inapp.component.ts, abbiamo creato il file isavailable variabile come vero.
Directives in Angular è un js class, che è dichiarato come @directive. Abbiamo 3 direttive in Angular. Le direttive sono elencate di seguito:
Direttive sui componenti
Questi formano la classe principale con i dettagli su come il componente dovrebbe essere elaborato, istanziato e utilizzato in fase di esecuzione.
Direttive strutturali
Una direttiva di struttura si occupa fondamentalmente di manipolare gli elementi dom. Le direttive strutturali hanno un segno * prima della direttiva. Per esempio,*ngIf e *ngFor.
Direttive sugli attributi
Le direttive sugli attributi riguardano la modifica dell'aspetto e del comportamento dell'elemento dom. È possibile creare le proprie direttive come mostrato di seguito.
Come creare direttive personalizzate?
In questa sezione, discuteremo delle direttive personalizzate da utilizzare nei componenti. Le direttive personalizzate vengono create da noi e non sono standard.
Vediamo come creare la direttiva personalizzata. Creeremo la direttiva utilizzando la riga di comando. Il comando per creare la direttiva utilizzando la riga di comando è:
ng g directive nameofthedirective
e.g
ng g directive changeTextEcco come appare nella riga di comando
C:\projectA6\Angular6App>ng g directive changeText
CREATE src/app/change-text.directive.spec.ts (241 bytes)
CREATE src/app/change-text.directive.ts (149 bytes)
UPDATE src/app/app.module.ts (486 bytes)I file di cui sopra, ovvero change-text.directive.spec.ts e change-text.directive.ts vengono creati e il file app.module.ts il file viene aggiornato.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
@NgModule({
declarations: [
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Il ChangeTextDirectiveclass è inclusa nelle dichiarazioni nel file sopra. La classe viene importata anche dal file fornito di seguito.
cambio di testo. direttiva
import { Directive } from '@angular/core';
@Directive({
selector: '[appChangeText]'
})
export class ChangeTextDirective {
constructor() { }
}Il file sopra ha una direttiva e ha anche una proprietà selector. Qualunque cosa definiamo nel selettore, la stessa deve corrispondere nella vista, dove assegniamo la direttiva personalizzata.
Nel app.component.html vista, aggiungiamo la direttiva come segue:
<div style = "text-align:center">
<span appChangeText >Welcome to {{title}}.</span>
</div>Scriveremo le modifiche in change-text.directive.ts file come segue -
change-text.directive.ts
import { Directive, ElementRef} from '@angular/core';
@Directive({
selector: '[appChangeText]'
})
export class ChangeTextDirective {
constructor(Element: ElementRef) {
console.log(Element);
Element.nativeElement.innerText = "Text is changed by changeText Directive. ";
}
}Nel file sopra, c'è una classe chiamata ChangeTextDirective e un costruttore, che accetta l'elemento di tipo ElementRef, che è obbligatorio. L'elemento ha tutti i dettagli a cui ilChange Text viene applicata la direttiva.
Abbiamo aggiunto il file console.logelemento. L'output dello stesso può essere visualizzato nella console del browser. Anche il testo dell'elemento viene modificato come mostrato sopra.
Ora, il browser mostrerà quanto segue.
In questo capitolo, discuteremo cosa sono i tubi in Angular 6. I tubi erano precedentemente chiamati filtri in Angular1 e chiamati pipe in Angular 2 in poi.
Il | Il carattere viene utilizzato per trasformare i dati. Di seguito è riportata la sintassi per lo stesso
{{ Welcome to Angular 6 | lowercase}}Richiede numeri interi, stringhe, array e date come input separati da | da convertire nel formato richiesto e visualizzare lo stesso nel browser.
Consideriamo alcuni esempi di utilizzo di pipe.
Qui, vogliamo visualizzare il testo dato in maiuscolo. Questo può essere fatto usando i tubi come segue:
Nel app.component.ts file, abbiamo definito la variabile del titolo -
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 Project!';
}La seguente riga di codice va nel file app.component.html file.
<b>{{title | uppercase}}</b><br/>
<b>{{title | lowercase}}</b>Il browser viene visualizzato come mostrato nella seguente schermata:
Angular 6 fornisce alcuni tubi integrati. I tubi sono elencati di seguito:
- Lowercasepipe
- Uppercasepipe
- Datepipe
- Currencypipe
- Jsonpipe
- Percentpipe
- Decimalpipe
- Slicepipe
Abbiamo già visto le pipe minuscole e maiuscole. Vediamo ora come funzionano gli altri tubi.
La seguente riga di codice ci aiuterà a definire le variabili richieste in app.component.ts file -
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 Project!';
todaydate = new Date();
jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};
months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
"July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}Useremo i tubi in app.component.html file.
<!--The content below is only a placeholder and can be replaced.-->
<div style = "width:100%;">
<div style = "width:40%;float:left;border:solid 1px black;">
<h1>Uppercase Pipe</h1>
<b>{{title | uppercase}}</b><br/>
<h1>Lowercase Pipe</h1>
<b>{{title | lowercase}}</b>
<h1>Currency Pipe</h1>
<b>{{6589.23 | currency:"USD"}}</b><br/>
<b>{{6589.23 | currency:"USD":true}}</b> //Boolean true is used to get the sign of the currency.
<h1>Date pipe</h1>
<b>{{todaydate | date:'d/M/y'}}</b><br/>
<b>{{todaydate | date:'shortTime'}}</b>
<h1>Decimal Pipe</h1>
<b>{{ 454.78787814 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed.
</div>
<div style = "width:40%;float:left;border:solid 1px black;">
<h1>Json Pipe</h1>
<b>{{ jsonval | json }}</b>
<h1>Percent Pipe</h1>
<b>{{00.54565 | percent}}</b>
<h1>Slice Pipe</h1>
<b>{{months | slice:2:6}}</b>
// here 2 and 6 refers to the start and the end index
</div>
</div>Le schermate seguenti mostrano l'output per ogni pipe:
Come creare un tubo personalizzato?
Per creare un pipe personalizzato, abbiamo creato un nuovo tsfile. Qui vogliamo creare il filesqrttubo personalizzato. Abbiamo dato lo stesso nome al file e appare come segue:
app.sqrt.ts
import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
transform(val : number) : number {
return Math.sqrt(val);
}
}Per creare una pipe personalizzata, dobbiamo importare Pipe and Pipe Transform da Angular / core. Nella direttiva @Pipe, dobbiamo dare il nome alla nostra pipe, che verrà usata nel nostro file .html. Dato che stiamo creando la pipe sqrt, la chiameremo sqrt.
Man mano che procediamo oltre, dobbiamo creare la classe e il nome della classe è SqrtPipe. Questa classe implementerà ilPipeTransform.
Il metodo di trasformazione definito nella classe prenderà l'argomento come numero e restituirà il numero dopo aver preso la radice quadrata.
Dato che abbiamo creato un nuovo file, dobbiamo aggiungere lo stesso in app.module.ts. Questo viene fatto come segue:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Abbiamo creato il file app.sqrt.tsclasse. Dobbiamo importare lo stesso inapp.module.tse specificare il percorso del file. Deve anche essere incluso nelle dichiarazioni come mostrato sopra.
Vediamo ora la chiamata effettuata alla pipe sqrt nel file app.component.html file.
<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b>
<br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>L'output è il seguente:
Routing significa fondamentalmente navigare tra le pagine. Hai visto molti siti con link che ti indirizzano a una nuova pagina. Ciò può essere ottenuto utilizzando il routing. Qui le pagine a cui ci riferiamo saranno sotto forma di componenti. Abbiamo già visto come creare un componente. Creiamo ora un componente e vediamo come utilizzarlo con il routing.
Nel componente genitore principale app.module.ts, ora dobbiamo includere il modulo router come mostrato di seguito -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'new-cmp',
component: NewCmpComponent
}
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }importa {RouterModule} da "@ angular / router"
Qui, il RouterModule viene importato da angular / router. Il modulo è incluso nelle importazioni come mostrato di seguito:
RouterModule.forRoot([
{
path: 'new-cmp',
component: NewCmpComponent
}
])RouterModule si riferisce al file forRootche accetta un input come un array, che a sua volta ha l'oggetto del percorso e del componente. Path è il nome del router e component è il nome della classe, cioè il componente creato.
Vediamo ora il file creato dal componente -
New-cmp.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-new-cmp',
templateUrl: './new-cmp.component.html',
styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
newcomponent = "Entered in new component created";
constructor() {}
ngOnInit() { }
}La classe evidenziata è menzionata nelle importazioni del modulo principale.
New-cmp.component.html
<p>
{{newcomponent}}
</p>
<p>
new-cmp works!
</p>Ora, abbiamo bisogno che il contenuto di cui sopra dal file html venga visualizzato ogni volta che richiesto o cliccato dal modulo principale. Per questo, dobbiamo aggiungere i dettagli del router nel fileapp.component.html.
<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>
<br />
<br />
<br />
<a routerLink = "new-cmp">New component</a>
<br />
<br/>
<router-outlet></router-outlet>Nel codice sopra, abbiamo creato il tag anchor link e assegnato routerLink come "new-cmp". Questo è indicatoapp.module.ts come il sentiero.
Quando un utente fa clic new component, la pagina dovrebbe visualizzare il contenuto. Per questo, abbiamo bisogno del seguente tag:<router-outlet> </router-outlet>.
Il tag precedente garantisce che il contenuto nel file new-cmp.component.html verrà visualizzato sulla pagina quando un utente fa clic new component.
Vediamo ora come viene visualizzato l'output sul browser.
Quando un utente fa clic su Nuovo componente, vedrai quanto segue nel browser.
L'URL contiene http://localhost:4200/new-cmp. Qui, il new-cmp viene aggiunto all'URL originale, che è il percorso fornito nel fileapp.module.ts e il collegamento al router in app.component.html.
Quando un utente fa clic su Nuovo componente, la pagina non viene aggiornata e il contenuto viene mostrato all'utente senza dover ricaricare. Solo una parte particolare del codice del sito verrà ricaricata quando si fa clic. Questa funzione aiuta quando abbiamo contenuti pesanti sulla pagina e deve essere caricata in base all'interazione dell'utente. La funzione offre anche una buona esperienza utente poiché la pagina non viene ricaricata.
In questo capitolo, discuteremo i servizi in Angular 6.
Potremmo imbatterci in una situazione in cui abbiamo bisogno di un codice da utilizzare ovunque nella pagina. Può essere per la connessione dati che deve essere condivisa tra i componenti, ecc. I servizi ci aiutano a raggiungere questo obiettivo. Con i servizi, possiamo accedere a metodi e proprietà su altri componenti dell'intero progetto.
Per creare un servizio, dobbiamo utilizzare la riga di comando. Il comando per lo stesso è -
C:\projectA6\Angular6App>ng g service myservice
CREATE src/app/myservice.service.spec.ts (392 bytes)
CREATE src/app/myservice.service.ts (138 bytes)I file vengono creati nella cartella dell'app come segue:
Di seguito sono riportati i file creati in basso: myservice.service.specs.ts e myservice.service.ts.
myservice.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class MyserviceService {
constructor() { }
}Qui, il modulo Injectable viene importato dal file @angular/core. Contiene il file@Injectable metodo e una classe chiamata MyserviceService. Creeremo la nostra funzione di servizio in questa classe.
Prima di creare un nuovo servizio, dobbiamo includere il servizio creato nel genitore principale app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'new-cmp',
component: NewCmpComponent
}
])
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }Abbiamo importato il servizio con il nome della classe e la stessa classe viene utilizzata nei provider. Torniamo ora alla classe di servizio e creiamo una funzione di servizio.
Nella classe di servizio creeremo una funzione che mostrerà la data odierna. Possiamo usare la stessa funzione nel componente genitore principaleapp.component.ts e anche nel nuovo componente new-cmp.component.ts che abbiamo creato nel capitolo precedente.
Vediamo ora come appare la funzione nel servizio e come usarla nei componenti.
import { Injectable } from '@angular/core';
@Injectable()
export class MyserviceService {
constructor() { }
showTodayDate() {
let ndate = new Date();
return ndate;
}
}Nel file di servizio sopra, abbiamo creato una funzione showTodayDate. Ora restituiremo la nuova Date () creata. Vediamo come possiamo accedere a questa funzione nella classe dei componenti.
app.component.ts
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 Project!';
todaydate;
constructor(private myservice: MyserviceService) {}
ngOnInit() {
this.todaydate = this.myservice.showTodayDate();
}
}Il ngOnInitla funzione viene chiamata per impostazione predefinita in qualsiasi componente creato. La data viene recuperata dal servizio come mostrato sopra. Per recuperare più dettagli del servizio, dobbiamo prima includere il servizio nel componentets file.
Visualizzeremo la data nel file .html file come mostrato di seguito -
{{todaydate}}
<app-new-cmp></app-new-cmp>
// data to be displayed to user from the new component class.Vediamo ora come utilizzare il servizio nel nuovo componente creato.
import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';
@Component({
selector: 'app-new-cmp',
templateUrl: './new-cmp.component.html',
styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
todaydate;
newcomponent = "Entered in new component created";
constructor(private myservice: MyserviceService) {}
ngOnInit() {
this.todaydate = this.myservice.showTodayDate();
}
}Nel nuovo componente che abbiamo creato, dobbiamo prima importare il servizio che vogliamo e accedere ai metodi e alle proprietà dello stesso. Si prega di vedere il codice evidenziato. La data odierna viene visualizzata nel componente html come segue:
<p>
{{newcomponent}}
</p>
<p>
Today's Date : {{todaydate}}
</p>Il selettore del nuovo componente viene utilizzato in app.component.htmlfile. Il contenuto del file html di cui sopra verrà visualizzato nel browser come mostrato di seguito -
Se si modifica la proprietà del servizio in qualsiasi componente, la stessa viene modificata anche in altri componenti. Vediamo ora come funziona.
Definiremo una variabile nel servizio e la useremo nel genitore e nel nuovo componente. Modificheremo nuovamente la proprietà nel componente genitore e vedremo se la stessa è cambiata o meno nel nuovo componente.
In myservice.service.ts, abbiamo creato una proprietà e abbiamo utilizzato la stessa in un altro componente padre e nuovo.
import { Injectable } from '@angular/core';
@Injectable()
export class MyserviceService {
serviceproperty = "Service Created";
constructor() { }
showTodayDate() {
let ndate = new Date();
return ndate;
}
}Usiamo ora il file servicepropertyvariabile in altre componenti. Inapp.component.ts, stiamo accedendo alla variabile come segue:
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
todaydate;
componentproperty;
constructor(private myservice: MyserviceService) {}
ngOnInit() {
this.todaydate = this.myservice.showTodayDate();
console.log(this.myservice.serviceproperty);
this.myservice.serviceproperty = "component created"; // value is changed.
this.componentproperty = this.myservice.serviceproperty;
}
}Ora recupereremo la variabile e lavoreremo su console.log. Nella riga successiva, cambieremo il valore della variabile in"component created". Faremo lo stesso innew-cmp.component.ts.
import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';
@Component({
selector: 'app-new-cmp',
templateUrl: './new-cmp.component.html',
styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
todaydate;
newcomponentproperty;
newcomponent = "Entered in newcomponent";
constructor(private myservice: MyserviceService) {}
ngOnInit() {
this.todaydate = this.myservice.showTodayDate();
this.newcomponentproperty = this.myservice.serviceproperty;
}
}Nel componente precedente, non stiamo cambiando nulla ma assegnando direttamente la proprietà alla proprietà del componente.
Ora, quando lo esegui nel browser, la proprietà del servizio verrà modificata poiché il suo valore viene modificato in app.component.ts e lo stesso verrà visualizzato per new-cmp.component.ts.
Controllare anche il valore nella console prima che venga modificato.
Il servizio HTTP ci aiuterà a recuperare i dati esterni, a postarvi, ecc. Dobbiamo importare il modulo http per utilizzare il servizio http. Facciamo un esempio per capire come utilizzare il servizio http.
Per iniziare a utilizzare il servizio http, dobbiamo importare il modulo in app.module.ts come mostrato di seguito -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Se vedi il codice evidenziato, abbiamo importato HttpModule da @ angular / http e lo stesso viene aggiunto anche nell'array delle importazioni.
Utilizziamo ora il servizio http in app.component.ts.
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private http: Http) { }
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users").
map((response) ⇒ response.json()).
subscribe((data) ⇒ console.log(data))
}
}Cerchiamo di capire il codice evidenziato sopra. Dobbiamo importare http per utilizzare il servizio, che viene eseguito come segue:
import { Http } from '@angular/http';In classe AppComponent, viene creato un costruttore e la variabile privata http di tipo Http. Per recuperare i dati, dobbiamo utilizzare il fileget API disponibile con http come segue
this.http.get();Richiede l'URL da recuperare come parametro come mostrato nel codice.
Useremo l'URL di prova - https://jsonplaceholder.typicode.com/usersper recuperare i dati json. Vengono eseguite due operazioni sulla mappa dei dati dell'URL recuperata e si sottoscrive. Il metodo Map aiuta a convertire i dati in formato json. Per utilizzare la mappa, dobbiamo importare come mostrato di seguito:
import {map} from 'rxjs/operators';Una volta completata la mappa, l'iscrizione registrerà l'output nella console come mostrato nel browser -
Se vedi, gli oggetti json vengono visualizzati nella console. Gli oggetti possono essere visualizzati anche nel browser.
Per gli oggetti da visualizzare nel browser, aggiornare i codici in app.component.html e app.component.ts come segue -
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { map} from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private http: Http) { }
httpdata;
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users")
.pipe(map((response) => response.json()))
.subscribe((data) => this.displaydata(data));
}
displaydata(data) {this.httpdata = data;}
}In app.component.ts, utilizzando il metodo di sottoscrizione chiameremo il metodo di visualizzazione dei dati e gli passeremo i dati recuperati come parametro.
Nel metodo di visualizzazione dei dati, memorizzeremo i dati in una variabile httpdata. I dati vengono visualizzati nel browser utilizzandofor su questa variabile httpdata, che viene eseguita in app.component.html file.
<ul *ngFor = "let data of httpdata">
<li>Name : {{data.name}} Address: {{data.address.city}}</li>
</ul>L'oggetto json è il seguente:
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "[email protected]",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
}L'oggetto ha proprietà come ID, nome, nome utente, e-mail e indirizzo che ha internamente via, città, ecc. E altri dettagli relativi a telefono, sito Web e azienda. Usando ilfor loop, visualizzeremo il nome ei dettagli della città nel browser come mostrato nel file app.component.html file.
Ecco come viene mostrato il display nel browser:
Aggiungiamo ora il parametro di ricerca, che filtrerà in base a dati specifici. Dobbiamo recuperare i dati in base al parametro di ricerca passato.
Di seguito sono riportate le modifiche apportate in app.component.html e app.component.ts file -
app.component.ts
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { map} from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private http: Http) { }
httpdata;
name;
searchparam = 2;
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam)
.pipe(map((response) => response.json()))
.subscribe((data) => this.displaydata(data));
}
displaydata(data) {this.httpdata = data;}
}Per il get api, aggiungeremo il parametro di ricerca id = this.searchparam. Il parametro di ricerca è uguale a 2. Abbiamo bisogno dei dettagli diid = 2 dal file json.
Ecco come viene visualizzato il browser:
Abbiamo consolato i dati nel browser, che viene ricevuto dall'http. Lo stesso viene visualizzato nella console del browser. Il nome dal json conid = 2 viene visualizzato nel browser.
HttpClient è stato introdotto in Angular 6 e ci aiuterà a recuperare dati esterni, postarvi, ecc. Dobbiamo importare il modulo http per utilizzare il servizio http. Facciamo un esempio per capire come utilizzare il servizio http.
Per iniziare a utilizzare il servizio http, dobbiamo importare il modulo in app.module.ts come mostrato di seguito -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Se vedi il codice evidenziato, abbiamo importato HttpClientModule da @ angular / common / http e lo stesso viene aggiunto anche nell'array delle importazioni.
Usiamo ora il client http in app.component.ts.
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users").
subscribe((data) ⇒ console.log(data))
}
}Cerchiamo di capire il codice evidenziato sopra. Dobbiamo importare http per utilizzare il servizio, che viene eseguito come segue:
import { HttpClient } from '@angular/common/http';In classe AppComponent, viene creato un costruttore e la variabile privata http di tipo Http. Per recuperare i dati, dobbiamo utilizzare il fileget API disponibile con http come segue
this.http.get();Richiede l'URL da recuperare come parametro come mostrato nel codice.
Useremo l'URL di prova - https://jsonplaceholder.typicode.com/usersper recuperare i dati json. La sottoscrizione registrerà l'output nella console come mostrato nel browser -
Se vedi, gli oggetti json vengono visualizzati nella console. Gli oggetti possono essere visualizzati anche nel browser.
Per gli oggetti da visualizzare nel browser, aggiornare i codici in app.component.html e app.component.ts come segue -
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private http: HttpClient) { }
httpdata;
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users")
.subscribe((data) => this.displaydata(data));
}
displaydata(data) {this.httpdata = data;}
}In app.component.ts, utilizzando il metodo di sottoscrizione chiameremo il metodo di visualizzazione dei dati e gli passeremo i dati recuperati come parametro.
Nel metodo di visualizzazione dei dati, memorizzeremo i dati in una variabile httpdata. I dati vengono visualizzati nel browser utilizzandofor su questa variabile httpdata, che viene eseguita in app.component.html file.
<ul *ngFor = "let data of httpdata">
<li>Name : {{data.name}} Address: {{data.address.city}}</li>
</ul>L'oggetto json è il seguente:
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "[email protected]",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
}L'oggetto ha proprietà come ID, nome, nome utente, e-mail e indirizzo che ha internamente via, città, ecc. E altri dettagli relativi a telefono, sito Web e azienda. Usando ilfor loop, visualizzeremo il nome ei dettagli della città nel browser come mostrato nel file app.component.html file.
Ecco come viene mostrato il display nel browser:
Aggiungiamo ora il parametro di ricerca, che filtrerà in base a dati specifici. Dobbiamo recuperare i dati in base al parametro di ricerca passato.
Di seguito sono riportate le modifiche apportate in app.component.html e app.component.ts file -
app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private http: HttpClient) { }
httpdata;
name;
searchparam = 2;
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam)
.subscribe((data) => this.displaydata(data));
}
displaydata(data) {this.httpdata = data;}
}Per il get api, aggiungeremo il parametro di ricerca id = this.searchparam. Il parametro di ricerca è uguale a 2. Abbiamo bisogno dei dettagli diid = 2 dal file json.
Ecco come viene visualizzato il browser:
Abbiamo consolato i dati nel browser, che viene ricevuto dall'http. Lo stesso viene visualizzato nella console del browser. Il nome dal json conid = 2 viene visualizzato nel browser.
In questo capitolo, vedremo come vengono utilizzati i moduli in Angular 6. Discuteremo due modi di lavorare con i moduli: modulo basato su modelli e moduli basati su modello.
Modulo basato su modello
Con un modulo basato su modello, la maggior parte del lavoro viene svolto nel modello; e con il modulo basato sul modello, la maggior parte del lavoro viene svolto nella classe dei componenti.
Consideriamo ora di lavorare sul modulo basato su modelli. Creeremo un semplice modulo di accesso e aggiungeremo l'ID e-mail, la password e invieremo il pulsante nel modulo. Per cominciare, dobbiamo importare in FormsModule da@angular/core che viene fatto in app.module.ts come segue -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{path: 'new-cmp',component: NewCmpComponent}
])
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }Quindi dentro app.module.ts, abbiamo importato il FormsModule e lo stesso viene aggiunto nell'array delle importazioni come mostrato nel codice evidenziato.
Creiamo ora il nostro modulo nel file app.component.html file.
<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)" >
<input type = "text" name = "emailid" placeholder = "emailid" ngModel>
<br/>
<input type = "password" name = "passwd" placeholder = "passwd" ngModel>
<br/>
<input type = "submit" value = "submit">
</form>Abbiamo creato un semplice modulo con tag di input con ID e-mail, password e pulsante di invio. Gli abbiamo assegnato tipo, nome e segnaposto.
Nei moduli basati su modelli, dobbiamo creare i controlli del modulo modello aggiungendo l'estensione ngModel direttiva e il nameattributo. Pertanto, ovunque vogliamo che Angular acceda ai nostri dati dai moduli, aggiungi ngModel a quel tag come mostrato sopra. Ora, se dobbiamo leggere emailid e passwd, dobbiamo aggiungere ngModel attraverso di esso.
Se vedi, abbiamo anche aggiunto ngForm al file #userlogin. IlngFormla direttiva deve essere aggiunta al modello di modulo che abbiamo creato. Abbiamo anche aggiunto la funzioneonClickSubmit e assegnato userlogin.value ad esso.
Creiamo ora la funzione nel file app.component.ts e recupera i valori inseriti nel modulo.
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 Project!';
todaydate;
componentproperty;
constructor(private myservice: MyserviceService) { }
ngOnInit() {
this.todaydate = this.myservice.showTodayDate();
}
onClickSubmit(data) {
alert("Entered Email id : " + data.emailid);
}
}In quanto sopra app.component.tsfile, abbiamo definito la funzione suClickSubmit. Quando fai clic sul pulsante di invio del modulo, il controllo arriverà alla funzione sopra.
Ecco come viene visualizzato il browser:
Il modulo ha l'aspetto mostrato di seguito. Inseriamo i dati in esso e nella funzione di invio, l'ID e-mail è già inserito.
L'ID e-mail viene visualizzato in basso come mostrato nello screenshot qui sopra.
Forma guidata dal modello
Nel modulo basato sul modello, dobbiamo importare ReactiveFormsModule da @ angular / forms e utilizzare lo stesso nell'array imports.
C'è un cambiamento in atto app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule,
HttpModule,
ReactiveFormsModule,
RouterModule.forRoot([
{
path: 'new-cmp',
component: NewCmpComponent
}
])
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }In app.component.ts, dobbiamo importare alcuni moduli per il modulo basato su modello. Per esempio,import { FormGroup, FormControl } from '@angular/forms'.
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 Project!';
todaydate;
componentproperty;
emailid;
formdata;
constructor(private myservice: MyserviceService) { }
ngOnInit() {
this.todaydate = this.myservice.showTodayDate();
this.formdata = new FormGroup({
emailid: new FormControl("[email protected]"),
passwd: new FormControl("abcd1234")
});
}
onClickSubmit(data) {this.emailid = data.emailid;}
}La variabile formdata viene inizializzata all'inizio della classe e la stessa viene inizializzata con FormGroup come mostrato sopra. Le variabili emailid e passwd vengono inizializzate con valori predefiniti da visualizzare nel modulo. Puoi tenerlo vuoto nel caso lo desideri.
Questo è il modo in cui i valori saranno visualizzati nell'interfaccia utente del modulo.
Abbiamo usato formdata per inizializzare i valori del form; dobbiamo usare lo stesso nella UI del moduloapp.component.html.
<div>
<form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
<input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid"
formControlName="emailid">
<br/>
<input type = "password" class = "fortextbox" name="passwd"
placeholder = "passwd" formControlName = "passwd">
<br/>
<input type = "submit" class = "forsubmit" value = "Log In">
</form>
</div>
<p>
Email entered is : {{emailid}}
</p>Nel file .html, abbiamo usato formGroup tra parentesi quadre per il form; ad esempio, [formGroup] = "formdata". Al momento dell'invio, viene chiamata la funzioneonClickSubmit per cui formdata.value è passato.
Il tag di input formControlNamesi usa. Viene assegnato un valore che abbiamo utilizzato inapp.component.ts file.
Facendo clic su Invia, il controllo passerà alla funzione onClickSubmit, che è definito in app.component.ts file.
Facendo clic su Accedi, il valore verrà visualizzato come mostrato nella schermata sopra.
Convalida del modulo
Parliamo ora della convalida del modulo utilizzando il modulo basato su modello. È possibile utilizzare la convalida del modulo incorporata o anche l'approccio di convalida personalizzato. Useremo entrambi gli approcci nella forma. Continueremo con lo stesso esempio che abbiamo creato in una delle nostre sezioni precedenti. Con Angular 4, dobbiamo importare i validatori da@angular/forms come mostrato di seguito -
import { FormGroup, FormControl, Validators} from '@angular/forms'Angular ha validatori integrati come mandatory field, minlength, maxlength, e pattern. È possibile accedervi utilizzando il modulo Validators.
Puoi semplicemente aggiungere validatori o un array di validatori richiesti per dire ad Angular se un particolare campo è obbligatorio.
Proviamo ora lo stesso su una delle caselle di testo di input, ad esempio, l'ID email. Per l'ID e-mail, abbiamo aggiunto i seguenti parametri di convalida:
- Required
- Corrispondenza del modello
Questo è il modo in cui un codice viene convalidato in app.component.ts.
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 Project!';
todaydate;
componentproperty;
emailid;
formdata;
ngOnInit() {
this.formdata = new FormGroup({
emailid: new FormControl("", Validators.compose([
Validators.required,
Validators.pattern("[^ @]*@[^ @]*")
])),
passwd: new FormControl("")
});
}
onClickSubmit(data) {this.emailid = data.emailid;}
}In Validators.compose, puoi aggiungere l'elenco delle cose che desideri convalidare nel campo di input. In questo momento, abbiamo aggiunto il filerequired e il pattern matching parametri per accettare solo email valide.
Nel app.component.html, il pulsante di invio è disabilitato se uno qualsiasi degli input del modulo non è valido. Questo viene fatto come segue:
<div>
<form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
<input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid"
formControlName = "emailid">
<br/>
<input type = "password" class = "fortextbox" name = "passwd"
placeholder = "passwd" formControlName = "passwd">
<br/>
<input type = "submit" [disabled] = "!formdata.valid" class = "forsubmit"
value = "Log In">
</form>
</div>
<p>
Email entered is : {{emailid}}
</p>Per il pulsante di invio, abbiamo aggiunto disabilitato nella parentesi quadra, a cui viene assegnato il valore: !formdata.valid. Pertanto, se formdata.valid non è valido, il pulsante rimarrà disabilitato e l'utente non sarà in grado di inviarlo.
Vediamo come funziona nel browser -
Nel caso precedente, l'ID e-mail inserito non è valido, quindi il pulsante di accesso è disabilitato. Proviamo ora a inserire l'ID e-mail valido e vediamo la differenza.
Ora, l'ID e-mail inserito è valido. Quindi, possiamo vedere che il pulsante di accesso è abilitato e l'utente sarà in grado di inviarlo. Con questo, l'ID e-mail inserito viene visualizzato in basso.
Proviamo ora la convalida personalizzata con lo stesso modulo. Per la convalida personalizzata, possiamo definire la nostra funzione personalizzata e aggiungere i dettagli richiesti in essa. Vedremo ora un esempio per lo stesso.
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 Project!';
todaydate;
componentproperty;
emailid;
formdata;
ngOnInit() {
this.formdata = new FormGroup({
emailid: new FormControl("", Validators.compose([
Validators.required,
Validators.pattern("[^ @]*@[^ @]*")
])),
passwd: new FormControl("", this.passwordvalidation)
});
}
passwordvalidation(formcontrol) {
if (formcontrol.value.length < 5) {
return {"passwd" : true};
}
}
onClickSubmit(data) {this.emailid = data.emailid;}
}Nell'esempio sopra, abbiamo creato una funzione password validation e lo stesso è usato in una sezione precedente nel formcontrol - passwd: new FormControl("", this.passwordvalidation).
Nella funzione che abbiamo creato, controlleremo se la lunghezza dei caratteri inseriti è adeguata. Se i caratteri sono inferiori a cinque, tornerà con il passwd true come mostrato sopra -return {"passwd" : true};. Se i caratteri sono più di cinque, verrà considerato valido e verrà abilitato il login.
Vediamo ora come viene visualizzato nel browser -
Abbiamo inserito solo tre caratteri nella password e il login è disabilitato. Per abilitare il login, abbiamo bisogno di più di cinque caratteri. Inseriamo ora una lunghezza di caratteri valida e controlliamo.
L'accesso è abilitato poiché sia l'ID e-mail che la password sono validi. L'e-mail viene visualizzata in basso al momento del login.
Le animazioni aggiungono molta interazione tra gli elementi html. L'animazione era disponibile anche con Angular2. La differenza con Angular 6 è che l'animazione non fa più parte di@angular/core libreria, ma è un pacchetto separato che deve essere importato in app.module.ts.
Per cominciare, dobbiamo importare la libreria come segue:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';Il BrowserAnimationsModule deve essere aggiunto all'array di importazione in app.module.ts come mostrato di seguito -
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }In app.component.html, abbiamo aggiunto gli elementi html, che devono essere animati.
<div>
<button (click) = "animate()">Click Me</button>
<div [@myanimation] = "state" class = "rotate">
<img src = "assets/images/img.png" width = "100" height = "100">
</div>
</div>Per il div principale, abbiamo aggiunto un pulsante e un div con un'immagine. C'è un evento click per il quale viene chiamata la funzione animate. E per il div, il@myanimation viene aggiunta la direttiva e gli viene assegnato il valore come stato.
Vediamo ora il file app.component.ts dove è definita l'animazione.
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
styles:[`
div{
margin: 0 auto;
text-align: center;
width:200px;
}
.rotate{
width:100px;
height:100px;
border:solid 1px red;
}
`],
animations: [
trigger('myanimation',[
state('smaller',style({
transform : 'translateY(100px)'
})),
state('larger',style({
transform : 'translateY(0px)'
})),
transition('smaller <=> larger',animate('300ms ease-in'))
])
]
})
export class AppComponent {
state: string = "smaller";
animate() {
this.state= this.state == 'larger' ? 'smaller' : 'larger';
}
}Dobbiamo importare la funzione di animazione che deve essere utilizzata nel file .ts come mostrato sopra.
import { trigger, state, style, transition, animate } from '@angular/animations';Qui abbiamo importato trigger, stato, stile, transizione e animazione da @ angular / animations.
Ora aggiungeremo la proprietà animations al decoratore @Component () -
animations: [
trigger('myanimation',[
state('smaller',style({
transform : 'translateY(100px)'
})),
state('larger',style({
transform : 'translateY(0px)'
})),
transition('smaller <=> larger',animate('300ms ease-in'))
])
]Trigger definisce l'inizio dell'animazione. Il primo parametro ad esso è il nome dell'animazione da dare al tag html a cui l'animazione deve essere applicata. Il secondo parametro sono le funzioni che abbiamo importato: stato, transizione, ecc.
Il statefunzione coinvolge i passaggi dell'animazione, tra i quali l'elemento passerà. In questo momento abbiamo definito due stati, più piccolo e più grande. Per stati più piccoli, abbiamo dato lo stiletransform:translateY(100px) e transform:translateY(100px).
La funzione di transizione aggiunge l'animazione all'elemento html. Il primo argomento prende gli stati, cioè inizio e fine; il secondo argomento accetta la funzione animate. La funzione di animazione consente di definire la lunghezza, il ritardo e l'andamento di una transizione.
Vediamo ora il file .html per vedere come funziona la funzione di transizione
<div>
<button (click) = "animate()">Click Me</button>
<div [@myanimation] = "state" class="rotate">
<img src = "assets/images/img.png" width = "100" height = "100">
</div>
</div>È stata aggiunta una proprietà di stile nel file @componentdirettiva, che allinea centralmente il div. Consideriamo il seguente esempio per capire lo stesso:
styles:[`
div{
margin: 0 auto;
text-align: center;
width:200px;
}
.rotate{
width:100px;
height:100px;
border:solid 1px red;
}
`],Qui, un carattere speciale [``] viene utilizzato per aggiungere stili all'elemento html, se presente. Per il div, abbiamo assegnato il nome dell'animazione definito nel file app.component.ts.
Con un clic di un pulsante chiama la funzione di animazione, che è definita nel file app.component.ts come segue:
export class AppComponent {
state: string = "smaller";
animate() {
this.state= this.state == ‘larger’? 'smaller' : 'larger';
}
}La variabile di stato è definita e riceve il valore predefinito più piccolo. La funzione di animazione cambia lo stato al clic. Se lo stato è maggiore, verrà convertito in minore; e se è più piccolo, verrà convertito in più grande.
Ecco come l'output nel browser (http://localhost:4200/) sarà simile a -
Facendo clic su Click Me pulsante, la posizione dell'immagine viene modificata come mostrato nella seguente schermata:
La funzione di trasformazione viene applicata in ydirezione, che viene modificata da 0 a 100 px quando si fa clic sul pulsante Cliccami. L'immagine viene memorizzata nel fileassets/images cartella.
Materialsoffrire molti moduli integrati per il tuo progetto. Funzionalità come completamento automatico, selezione data, dispositivo di scorrimento, menu, griglie e barra degli strumenti sono disponibili per l'uso con i materiali in Angular 6.
Per utilizzare i materiali, dobbiamo importare il pacchetto. Anche Angular 2 ha tutte le funzionalità di cui sopra, ma sono disponibili come parte del modulo @ angular / core. Angular 6 ha messo a punto un modulo separato@angular/materials.. Questo aiuta l'utente a importare i materiali richiesti.
Per iniziare a utilizzare i materiali, è necessario installare due pacchetti: materiali e cdk. I componenti del materiale dipendono dal modulo di animazione per le funzionalità avanzate, quindi è necessario il pacchetto di animazione per lo stesso, cioè, @ angular / animations. Il pacchetto è già stato aggiornato nel capitolo precedente.
npm install --save @angular/material @angular/cdkVediamo ora il file package.json. @angular/material e @angular/cdk sono installati.
{
"name": "angular6-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true, "dependencies": {
"@angular/animations": "^6.1.0",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.7.0",
"@angular/cli": "~6.1.3",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
}Abbiamo evidenziato i pacchetti installati per lavorare con i materiali.
Ora importeremo i moduli nel modulo genitore - app.module.ts come mostrato di seguito.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,
MatMenuModule,
FormsModule,
MatSidenavModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Nel file sopra, abbiamo importato i seguenti moduli da @ angular / materials.
import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';E lo stesso viene utilizzato nell'array delle importazioni come mostrato di seguito -
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,
MatMenuModule,
FormsModule,
MatSidenavModule
]Il app.component.ts è come mostrato di seguito -
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myData: Array<any>;
constructor() {}
}Aggiungiamo ora il supporto material-css in styles.css.
@import "[email protected]/material/prebuilt-themes/indigo-pink.css";Aggiungiamo ora il materiale app.component.html.
<button mat-button [matMenuTriggerFor] = "menu">Menu</button>
<mat-menu #menu = "matMenu">
<button mat-menu-item>
File
</button>
<button mat-menu-item>
Save As
</button>
</mat-menu>
<mat-sidenav-container class = "example-container">
<mat-sidenav #sidenav class = "example-sidenav">
Angular 6
</mat-sidenav>
<div class = "example-sidenav-content">
<button type = "button" mat-button (click) = "sidenav.open()">
Open sidenav
</button>
</div>
</mat-sidenav-container>Nel file sopra, abbiamo aggiunto Menu e SideNav.
Menù
Per aggiungere un menu, <mat-menu></mat-menu>si usa. Ilfile e Save As gli elementi vengono aggiunti al pulsante sotto mat-menu. C'è un pulsante principale aggiuntoMenu. Il riferimento allo stesso è dato dal <mat-menu> utilizzando[matMenuTriggerFor]="menu" e utilizzando il menu con # in <mat-menu>.
SideNav
Per aggiungere sidenav, abbiamo bisogno di <mat-sidenav-container></mat-sidenav-container>. <mat-sidenav></mat-sidenav>viene aggiunto come figlio al contenitore. È stato aggiunto un altro div, che attiva il sidenav utilizzando(click)="sidenav.open()". Di seguito è riportata la visualizzazione del menu e del sidenav nel browser:
Facendo clic opensidenav, mostra la barra laterale come mostrato di seguito -
Facendo clic su Menu, otterrai due elementi File e Save As come mostrato di seguito -
Aggiungiamo ora un datepicker utilizzando i materiali. Per aggiungere un datepicker, dobbiamo importare i moduli richiesti per mostrare il datepicker.
In app.module.ts, abbiamo importato il seguente modulo come mostrato di seguito per datepicker.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule, MatInputModule, MatNativeDateModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
MatDatepickerModule,
MatInputModule,
MatNativeDateModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Qui abbiamo importato moduli come MatDatepickerModule, MatInputModule, e MatNativeDateModule.
Ora il app.component.ts è come mostrato di seguito -
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myData: Array<any>;
constructor() {}
}Il app.component.html è come mostrato di seguito -
<mat-form-field>
<input matInput [matDatepicker] = "picker" placeholder = "Choose a date">
<mat-datepicker-toggle matSuffix [for] = "picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>Ecco come viene visualizzato il datepicker nel browser.
Angular CLI rende facile iniziare con qualsiasi progetto Angular. Angular CLI viene fornito con comandi che ci aiutano a creare e iniziare il nostro progetto molto velocemente. Passiamo ora ai comandi disponibili per creare un progetto, un componente e servizi, cambiare la porta, ecc.
Per lavorare con Angular CLI, dobbiamo averlo installato sul nostro sistema. Usiamo il seguente comando per lo stesso:
npm install -g @angular/cliPer creare un nuovo progetto, possiamo eseguire il seguente comando nella riga di comando e il progetto verrà creato.
ng new PROJECT-NAME
cd PROJECT-NAME
ng serve //ng serve // verrà compilato e puoi vedere l'output del tuo progetto nel browser -
http://localhost:4200/4200 è la porta predefinita utilizzata quando viene creato un nuovo progetto. Puoi cambiare la porta con il seguente comando:
ng serve --host 0.0.0.0 --port 4201La tabella seguente elenca alcuni comandi importanti richiesti mentre si lavora con i progetti Angular 4.
| Componente | ng g component new-component |
| Direttiva | ng g direttiva nuova direttiva |
| Tubo | ng g pipe new-pipe |
| Servizio | ng g service new-service |
| Modulo | ng g module my-module |
Ogni volta che viene creato un nuovo modulo, un componente o un servizio, il riferimento dello stesso viene aggiornato nel modulo padre app.module.ts.