Angular 4 - Esempi

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 appare come segue:

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. Questo è 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 -

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved