Angular 4 - Guida rapida

Sono disponibili tre versioni principali di Angular. La prima versione rilasciata è Angular1, chiamata anche AngularJS. Angular1 è stato seguito da Angular2, che ha subito molti cambiamenti rispetto ad Angular1.

La struttura di Angular è basata sull'architettura dei componenti / servizi. AngularJS era basato sul controller di visualizzazione del modello.Angular 4 rilasciato a marzo 2017 si rivela un importante passo avanti ed è l'ultima versione del team Angular dopo Angular2.

Angular 4 è quasi uguale ad Angular 2. Ha una retrocompatibilità con Angular 2. I progetti sviluppati in Angular 2 funzioneranno senza problemi con Angular 4.

Vediamo ora le nuove funzionalità e le modifiche apportate in Angular 4.

Perché Angular4 e Not Angular3?

Il team di Angular ha affrontato alcuni problemi di controllo delle versioni internamente con i propri moduli e, a causa del conflitto, ha dovuto andare avanti e rilasciare la versione successiva di Angular: Angular4.

Vediamo ora le nuove funzionalità aggiunte ad Angular 4:

ngIf

Angular2 supportava solo il ifcondizione. Tuttavia, Angular 4 supporta l'estensioneif elsecondizione pure. Vediamo come funziona usando ng-template.

<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>

come parola chiave nel ciclo for

Con l'aiuto di as parola chiave è possibile memorizzare il valore come mostrato di seguito -

<div *ngFor="let i of months | slice:0:5 as total">
   Months: {{i}} Total: {{total.length}}
</div>

La variabile total memorizza l'output della slice utilizzando l'estensione as parola chiave.

Pacchetto animazione

L'animazione in Angular 4 è disponibile come pacchetto separato e deve essere importata da @ angular / animations. In Angular2, era disponibile con @angular/core. È ancora mantenuto lo stesso per il suo aspetto di compatibilità con le versioni precedenti.

Modello

Angular 4 usi <ng-template> come tag invece di <template>;quest'ultimo è stato utilizzato in Angular2. Il motivo per cui Angular 4 è cambiato<template> per <ng-template> è a causa del conflitto di nomi di <template> tag con il codice html <template>tag standard. Sarà deprecato completamente andare avanti. Questo è uno dei principali cambiamenti in Angular 4.

TypeScript 2.2

Angular 4 viene aggiornato a una versione recente di TypeScript, che è 2.2. Questo aiuta a migliorare la velocità e offre un migliore controllo del tipo nel progetto.

Caso titolo tubo

Angular 4 ha aggiunto una nuova maiuscola per il titolo del tubo, che cambia la prima lettera di ogni parola in maiuscolo.

<div>
   <h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>

La riga di codice precedente genera il seguente output: Angular 4 Titlecase.

Parametri di ricerca HTTP

I parametri di ricerca per http get api sono semplificati. Non abbiamo bisogno di chiamareURLSearchParams per lo stesso che è stato fatto in Angular2.

App più piccole e più veloci

Le applicazioni Angular 4 sono più piccole e più veloci rispetto ad Angular2. Utilizza la versione TypeScript 2.2, l'ultima versione che rende la compilazione finale di piccole dimensioni.

In questo capitolo, discuteremo la configurazione dell'ambiente richiesta per Angular 4. Per installare Angular 4, abbiamo bisogno di quanto segue:

  • Nodejs
  • Npm
  • CLI angolare
  • IDE per scrivere il tuo codice

Nodejs deve essere maggiore di 4 e npm deve essere maggiore di 3.

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
v6.11.0

Se 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, digitare npm –v nel terminale. Dovrebbe visualizzare la versione di npm.

C:\>npm –v
5.3.0

Le 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 2 si basa sulla struttura dei componenti. Angular 4 funziona sulla stessa struttura di Angular2 ma è più veloce rispetto ad Angular2.

Angular4 utilizza la versione TypeScript 2.2 mentre Angular 2 utilizza TypeScript versione 1.8. Questo porta molta differenza nelle prestazioni.

Per installare Angular 4, il team di Angular ha ideato Angular CLI che semplifica l'installazione. È necessario eseguire alcuni comandi per installare Angular 4.

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 v6.11.0 è consigliata agli utenti. Gli utenti che hanno già nodejs maggiore di 4 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 -

Il prompt dei comandi mostra v6.11.0. 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.

La versione di npm è 3.10.10. Ora che abbiamo installato nodejs e npm, eseguiamo i comandi angular cli per installare Angular 4. Vedrai i seguenti comandi sulla pagina web:

npm install -g @angular/cli //command to install angular 4

ng new Angular 4-app // name of the project

cd my-dream-app

ng serve

Cominciamo 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.

Immettere il comando precedente per installare Angular 4. Il processo di installazione verrà avviato e il completamento richiederà alcuni minuti.

Una volta completato il comando precedente per l'installazione, viene visualizzato il seguente prompt dei comandi:

Abbiamo 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

Otteniamo la versione @ angular / cli, che è attualmente 1.2.0. La versione del nodo in esecuzione è 6.11.0 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 4. Creiamo ora il nostro primo progetto in Angular 4. Per creare un progetto in Angular 4, useremo il seguente comando:

ng new projectname

Daremo un nome al progetto ng new Angular 4-app.

Eseguiamo ora il comando precedente nella riga di comando.

Il progetto Angular 4-appviene creato con successo. Installa tutti i pacchetti necessari per l'esecuzione del nostro progetto in Angular 4. Passiamo ora al progetto creato, che si trova nella directoryAngular 4-app. Cambia la directory nella riga di comando -cd Angular 4-app.

Useremo l'IDE di Visual Studio Code per lavorare con Angular 4; 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.

Considereremo il Angular 4-appprogetto. Apriamo l'app Angular 4 e vediamo come appare la struttura delle cartelle.

Ora che abbiamo la struttura dei file per il nostro progetto, compiliamo il nostro progetto con il seguente comando:

ng serve

Il ng serve Il comando crea l'applicazione e avvia il server web.

Il server web si avvia sulla porta 4200. Digitare l'URL http://localhost:4200/nel browser e vedere l'output. Una volta compilato il progetto, riceverai il seguente output:

Una volta che corri http://localhost:4200/ nel browser verrai indirizzato alla seguente schermata:

Apportiamo ora alcune modifiche per visualizzare il seguente contenuto:

“Welcome to Angular 4 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 usa durante la compilazione. È possibile modificare la porta se lo si desidera utilizzando il seguente comando:

ng serve --host 0.0.0.0 –port 4205

La cartella dell'app Angular 4 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 4 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": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",

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
      ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFe
      HBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4
      xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaH
      R0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAg
      MjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2
      ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0M
      zMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdD
      AiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMj
      MwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbn
      RzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMj
      AzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMU
      w2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMj
      UsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLD
      EzNS40eiIvPg0KPC9nPg0KPC9zdmc+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 struttura del file finale appare come segue:

La maggior parte dello sviluppo con Angular 4 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 g component new-cmp

Quando esegui il comando precedente nella riga di comando, riceverai il seguente output:

C:\projectA4\Angular 4-app>ng g component new-cmp
installing component
   create src\app\new-cmp\new-cmp.component.css
   create src\app\new-cmp\new-cmp.component.html
   create src\app\new-cmp\new-cmp.component.spec.ts
   create src\app\new-cmp\new-cmp.component.ts
   update src\app\app.module.ts

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 4App</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 4 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 ed è ora disponibile anche in Angular 4. 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 4 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 di come funziona Event Binding in Angular 4. Quando un utente interagisce con un'applicazione sotto forma di movimento della tastiera, clic del mouse o 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 4 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 4 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 4 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 4 usa il <ng-template> come tag 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. Questo è uno dei principali cambiamenti in Angular 4.

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 4 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 changeText

Ecco come appare nella riga di comando

C:\projectA4\Angular 4-app>ng g directive changeText
installing directive
   create src\app\change-text.directive.spec.ts
   create src\app\change-text.directive.ts
   update src\app\app.module.ts

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: '[changeText]'
})

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 changeText >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: '[changeText]'
})

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 4. I tubi erano precedentemente chiamati filtri in Angular1 e chiamati tubi in Angular 2 e 4.

Il | Il carattere viene utilizzato per trasformare i dati. Di seguito è riportata la sintassi per lo stesso

{{ Welcome to Angular 4 | 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 4 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 4 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 4 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 4.

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:\projectA4\Angular 4-app>ng g service myservice
installing service
   create src\app\myservice.service.spec.ts
   create src\app\myservice.service.ts
   WARNING Service is generated but not provided, it must be provided to be used

   C:\projectA4\Angular 4-app>

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 4 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 'rxjs/add/operator/map';

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 'rxjs/add/operator/map';

@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").
      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 'rxjs/add/operator/map';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'app';
   searchparam = 2;
   jsondata;
   name;
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam).
      map(
         (response) ⇒ response.json()
      ).
      subscribe((data) ⇒ this.converttoarray(data))
   }
   converttoarray(data) {
      console.log(data);
      this.name = data[0].name;
   }
}

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.

app.component.html

{{name}}

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 4. Discuteremo due modi di lavorare con i moduli: modulo basato su modello e modulo guidato da 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 4 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 4 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 4 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 4 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 4 è 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 4.

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 4 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/cdk

Vediamo ora il file package.json. @angular/material e @angular/cdk sono installati.

{
   "name": "angularstart",
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
   },
   
   "private": true,
   
   "dependencies": {
      "@angular/animations": "^4.0.0",
      "@angular/cdk": "^2.0.0-beta.8",
      "@angular/common": "^4.0.0",
      "@angular/compiler": "^4.0.0",
      "@angular/core": "^4.0.0",
      "@angular/forms": "^4.0.0",
      
      "@angular/http": "^4.0.0",
      "@angular/material": "^2.0.0-beta.8",
      "@angular/platform-browser": "^4.0.0",
      "@angular/platform-browser-dynamic": "^4.0.0",
      "@angular/router": "^4.0.0",
      "core-js": "^2.4.1",
      "rxjs": "^5.1.0",
      "zone.js": "^0.8.4"
   },
   
   "devDependencies": {
      "@angular/cli": "1.2.0",
      "@angular/compiler-cli": "^4.0.0",
      "@angular/language-service": "^4.0.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "~3.0.1",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",
      
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      
      "protractor": "~5.1.2",
      "ts-node": "~3.0.4",
      "tslint": "~5.3.2",
      "typescript": "~2.3.3"
   }
}

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 { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MdButtonModule,
      MdMenuModule,
      FormsModule,
      MdSidenavModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Nel file sopra, abbiamo importato i seguenti moduli da @ angular / materials.

import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

E lo stesso viene utilizzato nell'array delle importazioni come mostrato di seguito -

imports: [
   BrowserModule,
   BrowserAnimationsModule,
   MdButtonModule,
   MdMenuModule,
   FormsModule,
   MdSidenavModule
]

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 materiale app.component.html.

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu">
   <button md-menu-item>
      File
   </button>
   <button md-menu-item>
      Save As
   </button>
</md-menu>

<md-sidenav-container class="example-container">
   <md-sidenav #sidenav class="example-sidenav">
      Angular 4
   </md-sidenav>
      
   <div class="example-sidenav-content">
      <button type="button" md-button  (click)="sidenav.open()">
         Open sidenav
      </button>
   </div>
</md-sidenav-container>

Nel file sopra, abbiamo aggiunto Menu e SideNav.

Menù

Per aggiungere un menu, <md-menu></md-menu>si usa. Ilfile e Save As gli elementi vengono aggiunti al pulsante sotto md-menu. C'è un pulsante principale aggiuntoMenu. Il riferimento allo stesso è dato dal <md-menu> utilizzando[mdMenuTriggerFor]=”menu” e utilizzando il menu con # in <md-menu>.

SideNav

Per aggiungere sidenav, abbiamo bisogno di <md-sidenav-container></md-sidenav-container>. <md-sidenav></md-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 { MdDatepickerModule, MdInputModule, MdNativeDateModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FormsModule,
      MdDatepickerModule,
      MdInputModule,
      MdNativeDateModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Qui abbiamo importato moduli come MdDatepickerModule, MdInputModule, e MdNativeDateModule.

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 -

<md-input-container>
   <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
   <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>

<md-datepicker #picker></md-datepicker>

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/cli

Per 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 4201

La 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.

In questo capitolo, discuteremo alcuni esempi relativi ad Angular 4.

Per cominciare, abbiamo creato un esempio che mostra un form di login con input come username e password. Dopo aver inserito i valori corretti, entrerà all'interno e mostrerà un altro modulo in cui è possibile inserire i dettagli del cliente. Inoltre, abbiamo creato quattro componenti: intestazione, piè di pagina, login utente e pagina principale.

I componenti vengono creati utilizzando il seguente comando:

ng g component header

C:\ngexamples\aexamples>ng g component header
installing component
   create src\app\header\header.component.css
   create src\app\header\header.component.html
   create src\app\header\header.component.spec.ts
   create src\app\header\header.component.ts
   update src\app\app.module.ts

piè di pagina del componente g

C:\ngexamples\aexamples>ng g component footer
installing component
   create src\app\footer\footer.component.css
   create src\app\footer\footer.component.html
   create src\app\footer\footer.component.spec.ts
   create src\app\footer\footer.component.ts
   update src\app\app.module.ts

ng g component userlogin

C:\ngexamples\aexamples>ng g component userlogin
installing component
   create src\app\userlogin\userlogin.component.css
   create src\app\userlogin\userlogin.component.html
   create src\app\userlogin\userlogin.component.spec.ts
   create src\app\userlogin\userlogin.component.ts
   update src\app\app.module.ts

pagina principale del componente ng g

C:\ngexamples\aexamples>ng g component mainpage
installing component
   create src\app\mainpage\mainpage.component.css
   create src\app\mainpage\mainpage.component.html
   create src\app\mainpage\mainpage.component.spec.ts
   create src\app\mainpage\mainpage.component.ts
   update src\app\app.module.ts

Nel app.module.ts, il modulo genitore ha tutti i componenti aggiunti al momento della creazione. Il file ha il seguente aspetto:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { RouterModule, Routes} froms '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MdTableModule} from '@angular/material';

import {HttpModule} from "@angular/http";
import {MdInputModule} from '@angular/material';
import { AppComponent } from './app.component';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

@NgModule({
   declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      UserloginComponent,
      MainpageComponent
   ],
   
   imports: [
      BrowserModule,
      ReactiveFormsModule,
      RouterModule.forRoot(appRoutes),
      BrowserAnimationsModule,
      HttpModule,
      MdTableModule,
      MdInputModule
   ],
   
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Vengono aggiunti i componenti creati sopra:

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

Anche i componenti vengono aggiunti nelle dichiarazioni -

declarations: [
   AppComponent,
   HeaderComponent,
   FooterComponent,
   UserloginComponent,
   MainpageComponent
],

Nel genitore app.component.html, abbiamo aggiunto la struttura principale del file che verrà visto dall'utente.

<div class="mainpage">
   <app-header></app-header>
   <router-outlet></router-outlet>
   <app-footer></app-footer>
</div>

Abbiamo creato un div e aggiunto <app-header></app-header>, <router-outlet></router-outlet> e <app-footer></app-footer>.

Il <router-outlet></router-outlet>è utilizzato per la navigazione tra una pagina e l'altra. Qui, le pagine sono form di login e una volta che ha successo verrà reindirizzato alla pagina principale, cioè al modulo del cliente.

Per ottenere prima il modulo di accesso e successivamente il file mainpage.component.html, le modifiche vengono eseguite in app.module.ts come mostrato di seguito -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { RouterModule, Routes} from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MdTableModule} from '@angular/material';

import {HttpModule} from "@angular/http";
import {MdInputModule} from '@angular/material';
import { AppComponent } from './app.component';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

@NgModule({
   declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      UserloginComponent,
      MainpageComponent
   ],
   
   imports: [
      BrowserModule,
      ReactiveFormsModule,
      RouterModule.forRoot(appRoutes),
      BrowserAnimationsModule,
      HttpModule,
      MdTableModule,
      MdInputModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Abbiamo importato RouterModule e Routes a partire dal @anuglar/router. Nelle importazioni, RouterModules accetta appRoutes come parametro definito sopra come -

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

Le rotte accettano l'array di componenti e per impostazione predefinita viene chiamato userloginComponent.

In userlogin.component.ts, abbiamo importato il router e siamo passati a mainpage.component.html in base alle condizioni mostrate di seguito -

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';

@Component({
   selector: 'app-userlogin',
   templateUrl: './userlogin.component.html',
   styleUrls: ['./userlogin.component.css']
})

export class UserloginComponent implements OnInit {
   formdata;
   constructor(private router: Router) { }
   ngOnInit() {
      this.formdata = new FormGroup({
         uname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(6)
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   
   onClickSubmit(data) {
      console.log(data.uname);
      if (data.uname=="systemadmin" && data.passwd=="admin123") {
         alert("Login Successful");
         this.router.navigate(['app-mainpage'])
      } else {
         alert("Invalid Login");
         return false;
      }
   }
}

Di seguito è riportato il file .ts per app.component.ts. In esso sono presenti solo i dettagli predefiniti.

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'app';}

Vediamo ora visualizzare i dettagli di ciascuno dei file dei componenti. Per cominciare, prenderemo prima il componente header. Per il nuovo componente, vengono creati quattro fileheader.component.ts, header.component.html, header.component.css, and header.component.spec.ts.

header.component.ts

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

@Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.css']
})

export class HeaderComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

header.component.html

<div>
   <hr />
</div>

Non abbiamo aggiunto alcun css. Ciò rende vuoto il file header.component.css. Anche ilheader.compoent.spec.ts il file è vuoto poiché i casi di test non vengono considerati qui.

Per l'intestazione, disegneremo una linea orizzontale. È possibile aggiungere un logo o qualsiasi altro dettaglio per rendere l'intestazione più creativa.

Consideriamo ora la creazione di un componente piè di pagina.

Per il componente piè di pagina, footer.component.ts, footer.component.html, footer.component.spec.ts and footer.component.css vengono creati file.

footer.component.ts

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

@Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.css']
})

export class FooterComponent implements OnInit {
   constructor() { }
   ngOnInit() { }
}

footer.component.html

<hr/>

Poiché non abbiamo aggiunto alcun css, il file footer.component.cssil file è vuoto. Anche ilfooter.compoent.spec.ts il file è vuoto poiché i casi di test non vengono considerati qui.

Per il piè di pagina, disegneremo solo una linea orizzontale come mostrato nel file .html.

Vediamo ora come funziona il componente userlogin. I seguenti file per il componente userlogin creato sonouserlogin.component.css, userlogin.component.html, userlogin.component.ts, e userlogin.component.spec.ts.

I dettagli dei file sono i seguenti:

userlogin.component.html

<div class="form_container">
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <header>Login</header>
      <label>Username <span>*</span></label>
      <input type="text" name="uname" formControlName="uname"/>
      
      <div class="help">At least 6 character</div>
      <label>Password <span>*</span></label>
      <input type="password" class="fortextbox" name="passwd" formControlName="passwd"/>
      
      <div class="help">Use upper and lowercase lettes as well</div>
      <button [disabled]="!formdata.valid" value="Login">Login</button>
   </form>
</div>

Qui abbiamo creato un modulo con due controlli di input Username e Password. Si tratta di un approccio basato su un modulo i cui dettagli sono spiegati nel Capitolo 14 - Moduli.

Consideriamo il nome utente e la password obbligatori, quindi la convalida per gli stessi viene aggiunta in ts. Facendo clic sul pulsante di invio, il controllo viene passato al fileonClickSubmit, che è definito nel file ts.

userlogin.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';

@Component({
   selector: 'app-userlogin',
   templateUrl: './userlogin.component.html',
   styleUrls: ['./userlogin.component.css']
})

export class UserloginComponent implements OnInit {
   formdata;
   constructor(private router: Router) { }
   ngOnInit() {
      this.formdata = new FormGroup({
         uname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(6)
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {
      console.log(data.uname);
      if (data.uname == "systemadmin" && data.passwd == "admin123") {
         alert("Login Successful");
         this.router.navigate(['app-mainpage'])
      }
   }
}

Per il controllo e la convalida del modulo, i moduli vengono importati come mostrato di seguito

import { FormGroup, FormControl, Validators} from '@angular/forms';

Abbiamo bisogno di un router per passare a un componente diverso quando l'utente e la password sono corretti. Per questo, il router viene importato come mostrato di seguito:

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

In ngOnInit, viene eseguita la convalida del modulo. Abbiamo bisogno che il nome utente contenga più di sei caratteri e il campo è obbligatorio. La stessa condizione vale anche per la password.

Facendo clic su Invia, possiamo verificare se il nome utente è systemadmin e la password è admin123. In caso affermativo, viene visualizzata una finestra di dialogo che mostraLogin Successful e il router passa alla pagina principale dell'app, che è il selettore del componente della pagina principale.

C'è un CSS aggiunto per il modulo in userlogin.component.css file -

.form_container{
   margin : 0 auto;
   width:600px;
}

form {
   background: white;
   width: 500px;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
   font-family: lato;
   position: relative;
   color: #333;
   border-radius: 10px;
}

form header {
   background: #FF3838;
   padding: 30px 20px;
   color: white;
   font-size: 1.2em;
   font-weight: 600;
   border-radius: 10px 10px 0 0;
}

form label {
   margin-left: 20px;
   display: inline-block;
   margin-top: 30px;
   margin-bottom: 5px;
   position: relative;
}

form label span {
   color: #FF3838;
   font-size: 2em;
   position: absolute;
   left: 2.3em;
   top: -10px;
}
form input {
   display: block;
   width: 50%;
   margin-left: 20px;
   padding: 5px 20px;
   font-size: 1em;
   border-radius: 3px;
   outline: none;
   border: 1px solid #ccc;
}

form .help {
   margin-left: 20px;
   font-size: 0.8em;
   color: #777;
}

form button {
   position: relative;
   margin-top: 30px;
   margin-bottom: 30px;
   left: 50%;
   transform: translate(-50%, 0);
   font-family: inherit;
   color: white;
   background: #FF3838;
   outline: none;
   border: none;
   padding: 5px 15px;
   font-size: 1.3em;
   font-weight: 400;
   border-radius: 3px;
   box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
   cursor: pointer;
   transition: all 0.15s ease-in-out;
}
form button:hover {
   background: #ff5252;
}

Il userlogin.component.spec.ts Il file è vuoto perché non ci sono casi di test in questo momento.

Parliamo ora di come funziona il componente mainpage. I file creati per il componente mainpage sonomainpage.component.ts, mainpage.component.html, mainpage.component.css, e mainpage.component.spect.ts.

mainpage.component.ts

import { Component, OnInit, ViewChild} from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

import {Http, Response, Headers, RequestOptions } from "@angular/http";
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-mainpage',
   templateUrl: './mainpage.component.html',
   styleUrls: ['./mainpage.component.css']
})

export class MainpageComponent implements OnInit {
   formdata;
   cutomerdata;
   constructor(private http: Http) { }
   stateCtrl: FormControl;
   ngOnInit() {
      this.formdata = new FormGroup({
         fname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(3)
         ])),
         lname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(3)
         ])),
         address:new FormControl(""),
         phoneno:new FormControl("")
      });
   }
   onClickSubmit(data) {
      document.getElementById("custtable").style.display="";
      this.cutomerdata = [];
      for (var prop in data) {
         this.cutomerdata.push(data[prop]);
      }
      console.log(this.cutomerdata);
   }
}

Abbiamo creato un modulo cliente con nome, cognome, indirizzo e numero di telefono. La validazione dello stesso avviene con ilngOnInitfunzione. Facendo clic su Invia, il controllo passa alla funzioneonClickSubmit. Qui viene resa visibile la tabella utilizzata per visualizzare i dettagli inseriti.

I dati del cliente vengono convertiti da json in array in modo che possiamo usare lo stesso in ngFor sulla tabella, cosa che viene eseguita nel file .html come mostrato di seguito.

mainpage.component.html

<div class="form_container">
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <header>Customer Details</header>
      <label>FirstName <span>*</span></label>
      <input type="text" name="fname" formControlName="fname"/>
      <label>LastName <span>*</span></label>
      
      <input type="text" name="lname" formControlName="lname"/>
      <label>Address <span></span></label>
      <input type="text" name="address" formControlName="address"/>
      <label>Phone No <span></span></label>
      <input type="text" name="phoneno" formControlName="phoneno"/>
      <button [disabled]="!formdata.valid" value="Submit">Submit</button>
   </form>
</div>
<br/>

<div id="custtable" style="display:none;margin:0 auto;">
   <table>
      <tr>
         <td>FirstName</td>
         <td>LastName</td>
         <td>Address</td>
         <td>Phone No</td>
      </tr>
      <tr>
         <td *ngFor="let data of cutomerdata">
            <h5>{{data}}</h5>
         </td>
      </tr>
   </table>
</div>

Qui, il primo div ha i dettagli del cliente e il secondo ha la tabella, che mostrerà i dettagli inseriti. La visualizzazione del login utente e dei dettagli del cliente è come mostrato di seguito. Questa è la pagina con modulo di accesso, intestazione e piè di pagina.

Una volta inseriti i dettagli, il display è come mostrato di seguito

Facendo clic su Invia, viene visualizzata una finestra di dialogo che mostra Accesso riuscito.

Se i dettagli non sono validi, viene visualizzata una finestra di dialogo che mostra Accesso non valido come mostrato di seguito:

Se il login ha esito positivo, si procederà al modulo successivo di Dettagli cliente come mostrato di seguito:

Una volta inseriti e inviati i dettagli, viene visualizzata una finestra di dialogo che mostra che i dettagli del cliente sono stati aggiunti come mostrato nello screenshot qui sotto:

Quando facciamo clic su OK nello screenshot qui sopra, i dettagli appariranno come mostrato nello screenshot qui sotto -