Angular

#angular

Sommario

Di 1

Capitolo 1: Iniziare con Angular 2

Osservazioni 2

Versioni 3

Examples 6

Installazione di Angular usando angular-cli 6

Prerequisiti: 6

Per impostare un nuovo progetto 6

Per aggiungere a un progetto esistente 6

Esecuzione del progetto a livello locale 7

Generazione di componenti, direttive, condotte e servizi 7

Programma angolare "Hello World" 8

Prerequisiti: 8

Passaggio 1: creazione di un nuovo progetto 9

Passaggio 2: servire l'applicazione 10

Passaggio 3: modifica del nostro primo componente angolare 11

Capitolo 2: Condivisione dei dati tra i componenti 14

introduzione 14

Osservazioni 14

Examples 14

Invio di dati dal componente principale al figlio tramite il servizio condiviso 14

Invia dati dal componente principale al componente figlio tramite associazione dati utiliz 15

Invio di dati da bambino a genitore tramite l'emettitore di eventi @Output 16

Invio di dati asincroni da padre a figlio utilizzando Observable e Subject 17

Capitolo 3: Emettitore di eventi 20

Examples 20

Cattura l'evento 20

Capitolo 4: Le forme 22

Examples 22

Forme reattive 22

app.module.ts 22

app.component.ts 22

app.component.html 23

validators.ts 24

Modelli guidati 24

Modello - signup.component.html 24

Componente - signup.component.ts 25

Modello - signup-request.model.ts 25

Modulo app - app.module.ts 26

Componente dell'app - app.component.html 26

Capitolo 5: Per Loop 27

Examples 27

NgFor - Markup For Loop 27

Capitolo 6: Pipes 28

introduzione 28

Examples 28

Tubi personalizzati 28

Più tubi personalizzati 29

Capitolo 7: Routing 31

Examples 31

Instradare con i bambini 31

Routing di base 32

Capitolo 8: RXJS e osservabili 35

Examples 35

Attendi più richieste 35

Richiesta di base 35

Titoli di coda 36

Di

You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: angular

It is an unofficial and free Angular ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official Angular.

The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners.

Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to info@zzzprojects.com

https://riptutorial.com/it/home 1

Capitolo 1: Iniziare con Angular

Osservazioni

Angolare (comunemente indicato come " Angular 2+ " o " Angular 2 ") è un framework web front-end open source basato su TypeScript guidato dal team angolare di Google e da una comunità di individui e aziende per affrontare tutte le parti del flusso di lavoro dello sviluppatore durante la creazione di complesse applicazioni Web. Angolare è una completa riscrittura dalla stessa squadra che ha costruito AngularJS . ¹

Il framework è composto da diverse librerie , alcune delle quali core ( @ angular / core per esempio) e alcune facoltative ( @ angular / animations ).

Si scrivono applicazioni angolari componendo modelli HTML con markup Angularized, scrivendo classi di componenti per gestire tali modelli, aggiungendo la logica dell'applicazione nei servizi e componenti e servizi di boxing nei moduli .

Quindi avvia l'app eseguendo il bootstrap del modulo root . Angular subentra, presenta il contenuto dell'applicazione in un browser e risponde alle interazioni dell'utente in base alle istruzioni fornite.

Probabilmente, la parte più fondamentale dello sviluppo di applicazioni angolari sono i componenti . Un componente è la combinazione di un modello HTML e una classe componente che controlla una parte dello schermo. Ecco un esempio di un componente che mostra una stringa semplice:

src / app / app.component.ts

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

Ogni componente inizia con una funzione decoratore @Component che accetta un oggetto metadati . L'oggetto metadati descrive in che modo il modello HTML e la classe del componente funzionano insieme.

La proprietà selector indica a Angular di visualizzare il componente all'interno di un <my-app> nel file index.html .

index.html (all'interno del tag body )

<my-app>Loading AppComponent content here ...</my-app>

https://riptutorial.com/it/home 2

La proprietà template definisce un messaggio all'interno di un'intestazione <h1> . Il messaggio inizia con "Ciao" e termina con {{name}} , che è un'espressione vincolante di interpolazione angolare. In fase di runtime, Angular sostituisce {{name}} con il valore della proprietà del name del componente. Il binding dell'interpolazione è una delle molte funzionalità angolari che troverai in questa documentazione. Nell'esempio, modificare la proprietà del name della classe del componente da 'Angular' a 'World' e vedere cosa succede.

Questo esempio è scritto in TypeScript , un superset di JavaScript. Angular utilizza TypeScript perché i suoi tipi semplificano il supporto della produttività degli sviluppatori con gli strumenti. Inoltre, quasi tutto il supporto è per TypeScript e quindi utilizzare JavaScript semplice per scrivere la tua applicazione sarà difficile . È tuttavia possibile scrivere codice angolare in JavaScript; questa guida spiega come.

Maggiori informazioni sull'architettura di Angular possono essere trovate qui

Versioni

Versione Data di rilascio

5.0.0-beta.1 (Più recente) 2017/07/27

4.3.2 2017/07/26

5.0.0-beta.0 2017/07/19

4.3.1 2017/07/19

4.3.0 2017/07/14

4.2.6 2017/07/08

4.2.5 2017/06/09

4.2.4 2017/06/21

4.2.3 2017/06/16

4.2.2 2017/06/12

4.2.1 2017/06/09

4.2.0 2017/06/08

4.2.0-rc.2 2017/06/01

4.2.0-rc.1 2017/05/26

4.2.0-rc.0 2017/05/19

4.1.3 2017/05/17

https://riptutorial.com/it/home 3

Versione Data di rilascio

4.1.2 2017/05/10

4.1.1 2017/05/04

4.1.0 2017/04/26

4.1.0-rc.0 2017/04/21

4.0.3 2017/04/21

4.0.2 2017/04/11

4.0.1 2017/03/29

4.0.0 2017/03/23

4.0.0-rc.6 2017/03/23

4.0.0-rc.5 2017/03/17

4.0.0-rc.4 2017/03/17

2.4.10 2017/03/17

4.0.0-rc.3 2017/03/10

2.4.9 2017/03/02

4.0.0-rc.2 2017/03/02

4.0.0-rc.1 2017/02/24

2.4.8 2017/02/18

2.4.7 2017/02/09

2.4.6 2017/02/03

2.4.5 2017/01/25

2.4.4 2017/01/19

2.4.3 2017/01/11

2.4.2 2017/01/06

2.4.1 2016/12/21

2.4.0 2016/12/20

https://riptutorial.com/it/home 4

Versione Data di rilascio

2.3.1 2016/12/15

2.3.0 2016/12/07

2.3.0-rc.0 2016/11/30

2.2.4 2016/11/30

2.2.3 2016/11/23

2.2.2 2016/11/22

2.2.1 2016/11/17

2.2.0 2016/11/14

2.2.0-rc.0 2016/11/02

2.1.2 2016/10/27

2.1.1 2016/10/20

2.1.0 2016/10/12

2.1.0-rc.0 2016/10/05

2.0.2 2016/10/05

2.0.1 2016/09/23

2.0.0 2016/09/14

2.0.0-rc.7 2016/09/13

2.0.0-rc.6 2016/08/31

2.0.0-rc.5 2016/08/09

2.0.0-rc.4 2016/06/30

2.0.0-rc.3 2016/06/21

2.0.0-rc.2 2016/06/15

2.0.0-rc.1 2016/05/03

2.0.0-rc.0 2016/05/02

https://riptutorial.com/it/home 5

Examples

Installazione di Angular usando angular-cli

Questo esempio è una configurazione rapida di Angular e come generare un progetto di esempio rapido.

Prerequisiti:

Node.js 6.9.0 o successivo.•npm v3 o maggiore o filato .•Digitazioni v1 o successive.•

Apri un terminale ed esegui i comandi uno a uno:

npm install -g typings o yarn global add typings

npm install -g @angular/cli o yarn global add @angular/cli

Il primo comando installa la libreria di tipizzazioni globalmente (e aggiunge i typings eseguibili a PATH). Il secondo installa @ angular / cli globalmente, aggiungendo il file eseguibile ng a PATH.

Per impostare un nuovo progetto

Navigare con il terminale in una cartella in cui si desidera impostare il nuovo progetto.

Esegui i comandi:

ng new PROJECT_NAME cd PROJECT_NAME ng serve

Cioè, ora hai un semplice progetto di esempio realizzato con Angular. Ora puoi navigare al link visualizzato nel terminale e vedere cosa sta facendo.

Per aggiungere a un progetto esistente

Passa alla radice del tuo progetto attuale.

Esegui il comando:

ng init

Questo aggiungerà l'impalcatura necessaria al tuo progetto. I file verranno creati nella directory

https://riptutorial.com/it/home 6

corrente, quindi assicurati di eseguirlo in una directory vuota.

Esecuzione del progetto a livello locale

Per vedere e interagire con la tua applicazione mentre è in esecuzione nel browser, devi avviare un server di sviluppo locale che ospita i file per il tuo progetto.

ng serve

Se il server è stato avviato correttamente, dovrebbe visualizzare un indirizzo al quale è in esecuzione il server. Di solito è questo:

http://localhost:4200

Subito dopo questo server di sviluppo locale è collegato a Hot Module Reloading, quindi qualsiasi modifica a html, typescript o css attiverà il browser per essere ricaricato automaticamente (ma può essere disabilitato se lo si desidera).

Generazione di componenti, direttive, condotte e servizi

Il comando ng generate <scaffold-type> <name> (o semplicemente ng g <scaffold-type> <name> ) consente di generare automaticamente componenti angolari:

# The command below will generate a component in the folder you are currently at ng generate component my-generated-component # Using the alias (same outcome as above) ng g component my-generated-component # You can add --flat if you don't want to create new folder for a component ng g component my-generated-component --flat # You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts) ng g component my-generated-component --spec false

Esistono diversi tipi di scaffold che angular-cli può generare:

Tipo di impalcatura uso

Modulo ng g module my-new-module

Componente ng g component my-new-component

Direttiva ng g directive my-new-directive

Tubo ng g pipe my-new-pipe

https://riptutorial.com/it/home 7

Tipo di impalcatura uso

Servizio ng g service my-new-service

Classe ng g class my-new-class

Interfaccia ng g interface my-new-interface

enum ng g enum my-new-enum

Puoi anche sostituire il nome del tipo con la sua prima lettera. Per esempio:

ng gm my-new-module per generare un nuovo modulo o ng gc my-new-component per creare un componente.

Costruire / Bundling

Quando hai finito di costruire la tua app Web Angular e desideri installarla su un server Web come Apache Tomcat, tutto ciò che devi fare è eseguire il comando build con o senza il flag di produzione impostato. La produzione minimizza il codice e ottimizza per un ambiente di produzione.

ng build

o

ng build --prod

Quindi cerca nella directory root dei progetti una cartella /dist , che contiene la build.

Se desideri i vantaggi di un bundle di produzione più piccolo, puoi anche utilizzare la compilazione di modelli Ahead-of-Time, che rimuove il compilatore di modelli dalla build finale:

ng build --prod --aot

Test unitario

Angular fornisce test unitari integrati e ogni elemento creato da angular-cli genera un test unitario di base, che può essere speso. I test unitari sono scritti usando il gelsomino ed eseguiti attraverso Karma. Per iniziare il test, eseguire il seguente comando:

ng test

Questo comando eseguirà tutti i test nel progetto e li eseguirà di nuovo ogni volta che un file di origine cambia, sia che si tratti di un test o di un codice dell'applicazione.

Per maggiori informazioni visita anche: pagina github angular-cli

Programma angolare "Hello World"

https://riptutorial.com/it/home 8

Prerequisiti:

Impostazione dell'ambiente di sviluppo

Prima di iniziare, dobbiamo impostare il nostro ambiente.

Installa Node.js e npm se non sono già sul tuo computer.

Verificare di eseguire almeno il nodo 6.9.xe npm 3.xx eseguendo il nodo -v e npm -v in una finestra di terminale / console. Le versioni precedenti producono errori, ma le versioni più recenti vanno bene.

•

Installa la CLI Angolare globalmente usando npm install -g @angular/cli .•

Passaggio 1: creazione di un nuovo progetto

Aprire una finestra terminale (o il prompt dei comandi Node.js in Windows).

Creiamo un nuovo progetto e un'applicazione scheletro usando il comando:

ng new my-app

Qui il ng è per Angular. Otteniamo una struttura di file simile a questa.

https://riptutorial.com/it/home 9

Ci sono molti file Non dobbiamo preoccuparci di tutti loro ora.

Passaggio 2: servire l'applicazione

Lanciamo la nostra applicazione usando il seguente comando:

ng serve

Potremmo usare un flag -open (o semplicemente -o ) che aprirà automaticamente il nostro browser su http://localhost:4200/

https://riptutorial.com/it/home 10

ng serve --open

Spostare il browser all'indirizzo http://localhost:4200/ . Sembra qualcosa del genere:

Passaggio 3: modifica del nostro primo componente angolare

La CLI ha creato per noi il componente angolare predefinito. Questo è il componente root ed è chiamato app-root . Lo si può trovare in ./src/app/app.component.ts .

Apri il file del componente e modifica la proprietà del titolo da Welcome to app!! a Hello World . Il browser si ricarica automaticamente con il titolo rivisto.

Codice originale: notare il title = 'app';

https://riptutorial.com/it/home 11

Codice modificato: il valore del title è cambiato.

Allo stesso modo c'è una modifica in ./src/app/app.component.html .

HTML originale

HTML modificato

Si noti che verrà visualizzato il valore del title da ./src/app/app.component.ts . Il browser si ricarica automaticamente quando vengono apportate le modifiche. Sembra qualcosa del genere.

https://riptutorial.com/it/home 12

Per saperne di più sull'argomento, visita questo link qui .

Leggi Iniziare con Angular online: https://riptutorial.com/it/angular/topic/9754/iniziare-con-angular

https://riptutorial.com/it/home 13

Capitolo 2: Condivisione dei dati tra i componenti

introduzione

L'obiettivo di questo argomento è creare semplici esempi di diversi modi in cui i dati possono essere condivisi tra componenti tramite associazione dati e servizio condiviso.

Osservazioni

Ci sono sempre molti modi per realizzare un compito in programmazione. Sentiti libero di modificare esempi attuali o aggiungerne di tuoi.

Examples

Invio di dati dal componente principale al figlio tramite il servizio condiviso

service.ts:

import { Injectable } from '@angular/core'; @Injectable() export class AppState { public mylist = []; }

parent.component.ts:

import {Component} from '@angular/core'; import { AppState } from './shared.service'; @Component({ selector: 'parent-example', templateUrl: 'parent.component.html', }) export class ParentComponent { mylistFromParent = []; constructor(private appState: AppState){ this.appState.mylist; } add() { this.appState.mylist.push({"itemName":"Something"}); } }

https://riptutorial.com/it/home 14

parent.component.html:

<p> Parent </p> <button (click)="add()">Add</button> <div> <child-component></child-component> </div>

child.component.ts:

import {Component, Input } from '@angular/core'; import { AppState } from './shared.service'; @Component({ selector: 'child-component', template: ` <h3>Child powered by shared service</h3> {{mylist | json}} `, }) export class ChildComponent { mylist: any; constructor(private appState: AppState){ this.mylist = this.appState.mylist; } }

Invia dati dal componente principale al componente figlio tramite associazione dati utilizzando @Input

parent.component.ts:

import {Component} from '@angular/core'; @Component({ selector: 'parent-example', templateUrl: 'parent.component.html', }) export class ParentComponent { mylistFromParent = []; add() { this.mylistFromParent.push({"itemName":"Something"}); } }

parent.component.html:

<p> Parent </p> <button (click)="add()">Add</button>

https://riptutorial.com/it/home 15

<div> <child-component [mylistFromParent]="mylistFromParent"></child-component> </div>

child.component.ts:

import {Component, Input } from '@angular/core'; @Component({ selector: 'child-component', template: ` <h3>Child powered by parent</h3> {{mylistFromParent | json}} `, }) export class ChildComponent { @Input() mylistFromParent = []; }

Invio di dati da bambino a genitore tramite l'emettitore di eventi @Output

eventi-emitter.component.ts

import { Component, OnInit, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'event-emitting-child-component', template: `<div *ngFor="let item of data"> <div (click)="select(item)"> {{item.id}} = {{ item.name}} </div> </div> ` }) export class EventEmitterChildComponent implements OnInit{ data; @Output() selected: EventEmitter<string> = new EventEmitter<string>(); ngOnInit(){ this.data = [ { "id": 1, "name": "Guy Fawkes", "rate": 25 }, { "id": 2, "name": "Jeremy Corbyn", "rate": 20 }, { "id": 3, "name": "Jamie James", "rate": 12 }, { "id": 4, "name": "Phillip Wilson", "rate": 13 }, { "id": 5, "name": "Andrew Wilson", "rate": 30 }, { "id": 6, "name": "Adrian Bowles", "rate": 21 }, { "id": 7, "name": "Martha Paul", "rate": 19 }, { "id": 8, "name": "Lydia James", "rate": 14 }, { "id": 9, "name": "Amy Pond", "rate": 22 }, { "id": 10, "name": "Anthony Wade", "rate": 22 } ] } select(item) { this.selected.emit(item);

https://riptutorial.com/it/home 16

} }

eventi-receiver.component.ts:

import { Component } from '@angular/core'; @Component({ selector: 'event-receiver-parent-component', template: `<event-emitting-child-component (selected)="itemSelected($event)"> </event-emitting-child-component> <p *ngIf="val">Value selected</p> <p style="background: skyblue">{{ val | json}}</p>` }) export class EventReceiverParentComponent{ val; itemSelected(e){ this.val = e; } }

Invio di dati asincroni da padre a figlio utilizzando Observable e Subject

shared.service.ts:

import { Injectable } from '@angular/core'; import { Headers, Http } from '@angular/http'; import 'rxjs/add/operator/toPromise'; import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Rx'; import {Subject} from 'rxjs/Subject'; @Injectable() export class AppState { private headers = new Headers({'Content-Type': 'application/json'}); private apiUrl = 'api/data'; // Observable string source private dataStringSource = new Subject<string>(); // Observable string stream dataString$ = this.dataStringSource.asObservable(); constructor(private http: Http) { } public setData(value) { this.dataStringSource.next(value); } fetchFilterFields() {

https://riptutorial.com/it/home 17

console.log(this.apiUrl); return this.http.get(this.apiUrl) .delay(2000) .toPromise() .then(response => response.json().data) .catch(this.handleError); } private handleError(error: any): Promise<any> { console.error('An error occurred', error); // for demo purposes only return Promise.reject(error.message || error); } }

parent.component.ts:

import {Component, OnInit} from '@angular/core'; import 'rxjs/add/operator/toPromise'; import { AppState } from './shared.service'; @Component({ selector: 'parent-component', template: ` <h2> Parent </h2> <h4>{{promiseMarker}}</h4> <div> <child-component></child-component> </div> ` }) export class ParentComponent implements OnInit { promiseMarker = ""; constructor(private appState: AppState){ } ngOnInit(){ this.getData(); } getData(): void { this.appState .fetchFilterFields() .then(data => { // console.log(data) this.appState.setData(data); this.promiseMarker = "Promise has sent Data!"; }); } }

child.component.ts:

import {Component, Input } from '@angular/core'; import { AppState } from './shared.service';

https://riptutorial.com/it/home 18

@Component({ selector: 'child-component', template: ` <h3>Child powered by shared service</h3> {{fields | json}} `, }) export class ChildComponent { fields: any; constructor(private appState: AppState){ // this.mylist = this.appState.get('mylist'); this.appState.dataString$.subscribe( data => { // console.log("Subs to child" + data); this.fields = data; }); } }

Leggi Condivisione dei dati tra i componenti online: https://riptutorial.com/it/angular/topic/10836/condivisione-dei-dati-tra-i-componenti

https://riptutorial.com/it/home 19

Capitolo 3: Emettitore di eventi

Examples

Cattura l'evento

Crea un servizio-

import {EventEmitter} from 'angular2/core'; export class NavService { navchange: EventEmitter<number> = new EventEmitter(); constructor() {} emitNavChangeEvent(number) { this.navchange.emit(number); } getNavChangeEmitter() { return this.navchange; } }

Creare un componente per utilizzare il servizio-

import {Component} from 'angular2/core'; import {NavService} from '../services/NavService'; @Component({ selector: 'obs-comp', template: `obs component, item: {{item}}` }) export class ObservingComponent { item: number = 0; subscription: any; constructor(private navService:NavService) {} ngOnInit() { this.subscription = this.navService.getNavChangeEmitter() .subscribe(item => this.selectedNavItem(item)); } selectedNavItem(item: number) { this.item = item; } ngOnDestroy() { this.subscription.unsubscribe(); } } @Component({ selector: 'my-nav', template:` <div class="nav-item" (click)="selectedNavItem(1)">nav 1 (click me)</div> <div class="nav-item" (click)="selectedNavItem(2)">nav 2 (click me)</div> `, }) export class Navigation { item = 1; constructor(private navService:NavService) {}

https://riptutorial.com/it/home 20

selectedNavItem(item: number) { console.log('selected nav item ' + item); this.navService.emitNavChangeEvent(item); } }

Leggi Emettitore di eventi online: https://riptutorial.com/it/angular/topic/9828/emettitore-di-eventi

https://riptutorial.com/it/home 21

Capitolo 4: Le forme

Examples

Forme reattive

app.module.ts

Aggiungi questi nel tuo file app.module.ts per utilizzare moduli reattivi

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule, ReactiveFormsModule, ], declarations: [ AppComponent ] providers: [], bootstrap: [ AppComponent ] }) export class AppModule {}

app.component.ts

import { Component,OnInit } from '@angular/core'; import template from './app.component.html'; import { FormGroup,FormBuilder,Validators } from '@angular/forms'; import { matchingPasswords } from './validators'; @Component({ selector: 'app', template }) export class AppComponent implements OnInit { addForm: FormGroup; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.addForm = this.formBuilder.group({ username: ['', Validators.required], email: ['', Validators.required], role: ['', Validators.required], password: ['', Validators.required], password2: ['', Validators.required] }, { validator: matchingPasswords('password', 'password2') });

https://riptutorial.com/it/home 22

}; addUser() { if (this.addForm.valid) { var adduser = { username: this.addForm.controls['username'].value, email: this.addForm.controls['email'].value, password: this.addForm.controls['password'].value, profile: { role: this.addForm.controls['role'].value, name: this.addForm.controls['username'].value, email: this.addForm.controls['email'].value } }; console.log(adduser);// adduser var contains all our form values. store it where you want this.addForm.reset();// this will reset our form values to null } } }

app.component.html

<div> <form [formGroup]="addForm"> <input type="text" placeholder="Enter username" formControlName="username" /> <input type="text" placeholder="Enter Email Address" formControlName="email"/> <input type="password" placeholder="Enter Password" formControlName="password" /> <input type="password" placeholder="Confirm Password" name="password2" formControlName="password2" /> <div class='error' *ngIf="addForm.controls.password2.touched"> <div class="alert-danger errormessageadduser" *ngIf="addForm.hasError('mismatchedPasswords')"> Passwords do not match </div> </div> <select name="Role" formControlName="role"> <option value="admin" >Admin</option> <option value="Accounts">Accounts</option> <option value="guest">Guest</option>

https://riptutorial.com/it/home 23

</select> <br/> <br/> <button type="submit" (click)="addUser()"> <span> <i class="fa fa-user-plus" aria-hidden="true"></i> </span> Add User </button> </form> </div>

validators.ts

export function matchingPasswords(passwordKey: string, confirmPasswordKey: string) { return (group: ControlGroup): { [key: string]: any } => { let password = group.controls[passwordKey]; let confirmPassword = group.controls[confirmPasswordKey]; if (password.value !== confirmPassword.value) { return { mismatchedPasswords: true }; } } }

Modelli guidati

Modello - signup.component.html

<form #signUpForm="ngForm" (ngSubmit)="onSubmit()"> <div class="title"> Sign Up </div> <div class="input-field"> <label for="username">username</label> <input type="text" pattern="\w{4,20}" name="username" required="required" [(ngModel)]="signUpRequest.username" /> </div> <div class="input-field"> <label for="email">email</label> <input type="email" pattern="^\S+@\S+$" name="email" required="required"

https://riptutorial.com/it/home 24

[(ngModel)]="signUpRequest.email" /> </div> <div class="input-field"> <label for="password">password</label> <input type="password" pattern=".{6,30}" required="required" name="password" [(ngModel)]="signUpRequest.password" /> </div> <div class="status"> {{ status }} </div> <button [disabled]="!signUpForm.form.valid" type="submit"> <span>Sign Up</span> </button> </form>

Componente - signup.component.ts

import { Component } from '@angular/core'; import { SignUpRequest } from './signup-request.model'; @Component({ selector: 'app-signup', templateUrl: './signup.component.html', styleUrls: ['./signup.component.css'] }) export class SignupComponent { status: string; signUpRequest: SignUpRequest; constructor() { this.signUpRequest = new SignUpRequest(); } onSubmit(value, valid) { this.status = `User ${this.signUpRequest.username} has successfully signed up`; } }

Modello - signup-request.model.ts

export class SignUpRequest { constructor( public username: string="", public email: string="",

https://riptutorial.com/it/home 25

public password: string="" ) {} }

Modulo app - app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { SignupComponent } from './signup/signup.component'; @NgModule({ declarations: [ AppComponent, SignupComponent ], imports: [ BrowserModule, FormsModule ], bootstrap: [AppComponent] }) export class AppModule { }

Componente dell'app - app.component.html

<app-signup></app-signup>

Leggi Le forme online: https://riptutorial.com/it/angular/topic/9825/le-forme

https://riptutorial.com/it/home 26

Capitolo 5: Per Loop

Examples

NgFor - Markup For Loop

La direttiva NgFor istanzia un modello una volta per elemento da un iterabile. Il contesto per ogni modello istanziato eredita dal contesto esterno con la variabile di ciclo specificata impostata sull'elemento corrente dal iterabile.

Per personalizzare l'algoritmo di tracciamento predefinito, NgFor supporta l' opzione trackBy . trackBy accetta una funzione che ha due argomenti: index e item. Se viene dato trackBy , le tracce angolari cambiano in base al valore di ritorno della funzione.

<li *ngFor="let item of items; let i = index; trackBy: trackByFn"> {{i}} - {{item.name}} </li>

Opzioni aggiuntive : NgFor fornisce diversi valori esportati che possono essere alterati in variabili locali:

l'indice verrà impostato sull'iterazione del ciclo corrente per ogni contesto del modello.•il primo sarà impostato su un valore booleano che indica se l'elemento è il primo nell'iterazione.

•

l'ultimo sarà impostato su un valore booleano che indica se l'elemento è l'ultimo nell'iterazione.

•

anche verrà impostato su un valore booleano che indica se questo elemento ha un indice pari.

•

dispari sarà impostato su un valore booleano che indica se questo elemento ha un indice dispari.

•

Leggi Per Loop online: https://riptutorial.com/it/angular/topic/9826/per-loop

https://riptutorial.com/it/home 27

Capitolo 6: Pipes

introduzione

I pipe sono molto simili ai filtri in AngularJS in quanto entrambi aiutano a trasformare i dati in un formato specificato. Il carattere pipe | è usato per applicare tubi in Angolare.

Examples

Tubi personalizzati

my.pipe.ts

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'myPipe'}) export class MyPipe implements PipeTransform { transform(value:any, args?: any):string { let transformedValue = value; // implement your transformation logic here return transformedValue; } }

my.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'my-component', template: `{{ value | myPipe }}` }) export class MyComponent { public value:any; }

my.module.ts

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { MyComponent } from './my.component'; import { MyPipe } from './my.pipe'; @NgModule({ imports: [ BrowserModule, ],

https://riptutorial.com/it/home 28

declarations: [ MyComponent, MyPipe ], }) export class MyModule { }

Più tubi personalizzati

Avere tubi diversi è un caso molto comune, in cui ogni tubo fa una cosa diversa. L'aggiunta di ciascun tubo a ciascun componente può diventare un codice ripetitivo.

È possibile raggruppare tutti i tubi usati di frequente in un Module e importare il nuovo modulo in qualsiasi componente che richiede i tubi.

breaklines.ts

import { Pipe } from '@angular/core'; /** * pipe to convert the \r\n into <br /> */ @Pipe({ name: 'br' }) export class BreakLine { transform(value: string): string { return value == undefined ? value : value.replace(new RegExp('\r\n', 'g'), '<br />') .replace(new RegExp('\n', 'g'), '<br />'); } }

uppercase.ts

import { Pipe } from '@angular/core'; /** * pipe to uppercase a string */ @Pipe({ name: 'upper' }) export class Uppercase{ transform(value: string): string { return value == undefined ? value : value.toUpperCase( ); } }

pipes.module.ts

import { NgModule } from '@angular/core'; import { BreakLine } from './breakLine'; import { Uppercase} from './uppercase'; @NgModule({ declarations: [ BreakLine, Uppercase ], imports: [

https://riptutorial.com/it/home 29

], exports: [ BreakLine, Uppercase ] , }) export class PipesModule {}

my.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'my-component', template: `{{ value | upper | br}}` }) export class MyComponent { public value: string; }

my.module.ts

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { MyComponent } from './my.component'; import { PipesModule} from './pipes.module'; @NgModule({ imports: [ BrowserModule, PipesModule, ], declarations: [ MyComponent, ], })

Leggi Pipes online: https://riptutorial.com/it/angular/topic/9824/pipes

https://riptutorial.com/it/home 30

Capitolo 7: Routing

Examples

Instradare con i bambini

Ho trovato questo modo di annidare correttamente le rotte dei bambini all'interno del file app.routing.ts o app.module.ts (a seconda delle preferenze). Questo approccio funziona quando si utilizza WebPack o SystemJS.

L'esempio seguente mostra i percorsi per casa, casa / contatore e home / contatore / fetch-data. Il primo e l'ultimo instradamento sono esempi di reindirizzamenti. Alla fine dell'esempio, infine, c'è un modo corretto per esportare il percorso da importare in un file separato. Per es. app.module.ts

Per spiegare ulteriormente, Angular richiede di avere un percorso senza percorsi nell'array per bambini che include il componente principale, per rappresentare la rotta principale. È un po 'confuso, ma se si pensa a un URL vuoto per un percorso figlio, equivarrebbe sostanzialmente allo stesso URL del percorso principale.

import { NgModule } from "@angular/core"; import { RouterModule, Routes } from "@angular/router"; import { HomeComponent } from "./components/home/home.component"; import { FetchDataComponent } from "./components/fetchdata/fetchdata.component"; import { CounterComponent } from "./components/counter/counter.component"; const appRoutes: Routes = [ { path: "", redirectTo: "home", pathMatch: "full" }, { path: "home", children: [ { path: "", component: HomeComponent }, { path: "counter", children: [ { path: "", component: CounterComponent }, { path: "fetch-data", component: FetchDataComponent } ] } ]

https://riptutorial.com/it/home 31

}, { path: "**", redirectTo: "home" } ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes) ], exports: [ RouterModule ] }) export class AppRoutingModule { }

Ottimo esempio e descrizione tramite Siraj

Routing di base

Il router abilita la navigazione da una vista all'altra in base alle interazioni dell'utente con l'applicazione.

Di seguito sono riportati i passaggi per implementare il routing di base in Angular -

NOTA : assicurati di avere questo tag:

<base href='/'>

come il primo figlio sotto il tag head nel file index.html. Questo elemento indica che la cartella dell'app è la root dell'applicazione. Angular saprebbe quindi come organizzare i tuoi collegamenti.

Controlla se stai indicando le dipendenze corrette / più recenti di routing in package.json (usando l'ultima versione di Angular) e che hai già fatto un'installazione di npm install -

"dependencies": { "@angular/router": "^4.2.5" }

1.

Definire il percorso come per la sua definizione di interfaccia:

interface Route { path?: string; pathMatch?: string; component?: Type<any>; }

2.

In un file di routing ( routes/app.routing.ts ), importa tutti i componenti che devi configurare per percorsi di routing diversi. Percorso vuoto significa che la vista è caricata di default. ":" nel percorso indica il parametro dinamico passato al componente caricato.

3.

https://riptutorial.com/it/home 32

import { Routes, RouterModule } from '@angular/router'; import { ModuleWithProviders } from '@angular/core'; import { BarDetailComponent } from '../components/bar-detail.component'; import { DashboardComponent } from '../components/dashboard.component'; import { LoginComponent } from '../components/login.component'; import { SignupComponent } from '../components/signup.component'; export const APP_ROUTES: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'login' }, { path: 'dashboard', component: DashboardComponent }, { path: 'bars/:id', component: BarDetailComponent }, { path: 'login', component: LoginComponent }, { path: 'signup', component: SignupComponent } ]; export const APP_ROUTING: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);

Nel tuo app.module.ts , app.module.ts sotto @NgModule([]) sotto le imports :

// Alternatively, just import 'APP_ROUTES import {APP_ROUTING} from '../routes/app.routing.ts'; @NgModule([ imports: [ APP_ROUTING // Or RouterModule.forRoot(APP_ROUTES) ] ])

4.

Carica / visualizza i componenti del router in base al percorso cui si accede. La direttiva <router-outlet> è usata per dire angolare dove caricare il componente.

import { Component } from '@angular/core'; @Component({ selector: 'demo-app', template: ` <div> <router-outlet></router-outlet> </div> ` }) export class AppComponent {}

5.

Collega gli altri percorsi. Per impostazione predefinita, RouterOutlet caricherà il componente per il quale è specificato il percorso vuoto nelle Routes . RouterLink direttiva RouterLink viene utilizzata con il tag di ancoraggio html per caricare i componenti collegati alle rotte. RouterLink genera l'attributo href che viene utilizzato per generare collegamenti. Per esempio:

import { Component } from '@angular/core'; @Component({ selector: 'demo-app', template: ` <a [routerLink]="['/login']">Login</a> <a [routerLink]="['/signup']">Signup</a>

6.

https://riptutorial.com/it/home 33

<a [routerLink]="['/dashboard']">Dashboard</a> <div> <router-outlet></router-outlet> </div> ` }) export class AnotherComponent { }

Ora, siamo bravi con il routing su percorsi statici. RouterLink supporta anche il percorso dinamico passando parametri aggiuntivi insieme al percorso.

import { Component } from '@angular/core'; @Component({ selector: 'demo-app', template: ` <ul> <li *ngFor="let bar of bars | async"> <a [routerLink]="['/bars', bar.id]"> {{bar.name}} </a> </li> </ul> <div> <router-outlet></router-outlet> </div> ` }) export class SecondComponent { }

RouterLink accetta un array in cui il primo parametro è il percorso per il routing e gli elementi successivi sono per i parametri di routing dinamico.

Leggi Routing online: https://riptutorial.com/it/angular/topic/9827/routing

https://riptutorial.com/it/home 34

Capitolo 8: RXJS e osservabili

Examples

Attendi più richieste

Uno scenario comune è quello di attendere il completamento di un certo numero di richieste prima di continuare. Questo può essere realizzato usando il metodo forkJoin .

Nell'esempio seguente, forkJoin viene utilizzato per chiamare due metodi che restituiscono Observables . Il callback specificato nel metodo .subscribe verrà chiamato quando entrambi gli osservabili sono completi. I parametri forniti da .subscribe corrispondono all'ordine dato nella chiamata a .forkJoin . In questo caso, i primi posts poi tags .

loadData() : void { Observable.forkJoin( this.blogApi.getPosts(), this.blogApi.getTags() ).subscribe((([posts, tags]: [Post[], Tag[]]) => { this.posts = posts; this.tags = tags; })); }

Richiesta di base

L'esempio seguente mostra una semplice richiesta HTTP GET. http.get() restituisce un Observable che ha il metodo subscribe . Questo accoda i dati restituiti alla matrice dei posts .

var posts = [] getPosts(http: Http): { this.http.get(`https://jsonplaceholder.typicode.com/posts`) .subscribe(response => { posts.push(response.json()); }); }

Leggi RXJS e osservabili online: https://riptutorial.com/it/angular/topic/9829/rxjs-e-osservabili

https://riptutorial.com/it/home 35

Titoli di coda

S. No

Capitoli Contributors

1 Iniziare con Angularaholtry, Anup Kumar Gupta, BogdanC, Community, daddycool, Edric, Fahad Nisar, Faisal, Hendrik Brummermann, Philipp Kief, Tom

2Condivisione dei dati tra i componenti

0mpurdy, BogdanC, JGFMK, Nehal

3 Emettitore di eventi aholtry

4 Le forme aholtry, Saka7

5 Per Loop aholtry

6 Pipes aholtry, Amr ElAdawy

7 Routing 0mpurdy, aholtry, Edric

8 RXJS e osservabili aholtry

https://riptutorial.com/it/home 36