Angulaire 4 - Exemples

Dans ce chapitre, nous discuterons de quelques exemples liés à Angular 4.

Pour commencer, nous avons créé un exemple qui montre un formulaire de connexion avec l'entrée comme username et password. En entrant les valeurs correctes, il entrera à l'intérieur et affichera un autre formulaire dans lequel vous pourrez entrer les détails du client. De plus, nous avons créé quatre composants: en-tête, pied de page, connexion utilisateur et page principale.

Les composants sont créés à l'aide de la commande suivante -

en-tête de composant ng g

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

pied de page du composant ng 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

connexion utilisateur du composant ng g

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

page principale du composant 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

dans le app.module.ts, le module parent a tous les composants ajoutés lors de sa création. Le fichier ressemble à ceci -

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 { }

Les composants créés ci-dessus sont ajoutés -

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

Les composants sont également ajoutés dans les déclarations -

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

Chez le parent app.component.html, nous avons ajouté la structure principale du fichier qui sera vue par l'utilisateur.

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

Nous avons créé un div et ajouté <app-header></app-header>, <router-outlet></router-outlet> et <app-footer></app-footer>.

le <router-outlet></router-outlet>est utilisé pour la navigation d'une page à l'autre. Ici, les pages sont sous forme de connexion et une fois réussies, elles seront redirigées vers la page principale, c'est-à-dire le formulaire client.

Pour obtenir d'abord le formulaire de connexion et ensuite obtenir le mainpage.component.html, les modifications sont effectuées dans app.module.ts comme indiqué ci-dessous -

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 { }

Nous avons importé RouterModule et Routes de @anuglar/router. Dans les importations, les RouterModules prend appRoutes comme paramètre défini ci-dessus comme -

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

Les routes prennent le tableau de composants et par défaut le userloginComponent est appelé.

Dans userlogin.component.ts, nous avons importé le routeur et navigué vers mainpage.component.html en fonction de la condition indiquée ci-dessous -

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;
      }
   }
}

Voici le fichier .ts pour app.component.ts. Seuls les détails par défaut y sont présents.

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

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

Voyons maintenant les détails de chacun des fichiers de composants. Pour commencer, nous allons d'abord prendre le composant d'en-tête. Pour le nouveau composant, quatre fichiers sont créésheader.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>

Nous n'avons ajouté aucun css. Cela rend le fichier header.component.css vide. Égalementheader.compoent.spec.ts Le fichier est vide car les cas de test ne sont pas pris en compte ici.

Pour l'en-tête, nous allons tracer une ligne horizontale. Un logo ou tout autre détail peut être ajouté pour rendre l'en-tête plus créatif.

Considérons maintenant la création d'un composant de pied de page.

Pour le composant de pied de page, footer.component.ts, footer.component.html, footer.component.spec.ts and footer.component.css les fichiers sont créés.

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

Comme nous n'avons ajouté aucun css, le footer.component.cssle fichier est vide. Égalementfooter.compoent.spec.ts Le fichier est vide car les cas de test ne sont pas pris en compte ici.

Pour le pied de page, nous allons simplement dessiner une ligne horizontale comme indiqué dans le fichier .html.

Voyons maintenant comment fonctionne le composant userlogin. Les fichiers suivants pour le composant userlogin créés sontuserlogin.component.css, userlogin.component.html, userlogin.component.ts, et userlogin.component.spec.ts.

Les détails des fichiers sont les suivants -

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>

Ici, nous avons créé un formulaire avec deux contrôles d'entrée Username et Password. Il s'agit d'une approche basée sur un modèle et les détails de celle-ci sont expliqués au Chapitre 14 - Formulaires.

Nous considérons le nom d'utilisateur et le mot de passe obligatoires, par conséquent la validation de ceux-ci est ajoutée dans le ts. En cliquant sur le bouton Soumettre, le contrôle est passé auonClickSubmit, qui est défini dans le fichier 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'])
      }
   }
}

Pour le formcontrol et la validation, les modules sont importés comme indiqué ci-dessous

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

Nous avons besoin d'un routeur pour accéder à un composant différent lorsque l'utilisateur et le mot de passe sont corrects. Pour cela, le routeur est importé comme indiqué ci-dessous -

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

Dans ngOnInit, la validation du formulaire est effectuée. Le nom d'utilisateur doit comporter plus de six caractères et le champ est obligatoire. La même condition s'applique également au mot de passe.

En cliquant sur Soumettre, nous pouvons vérifier si le nom d'utilisateur est systemadmin et le mot de passe est admin123. Si oui, une boîte de dialogue apparaît qui montreLogin Successful et le routeur accède à la page principale de l'application, qui est le sélecteur du composant de la page principale.

Il y a un css ajouté pour le formulaire dans userlogin.component.css fichier -

.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;
}

le userlogin.component.spec.ts Le fichier est vide car il n'y a pas de cas de test pour le moment.

Voyons maintenant comment fonctionne le composant de la page principale. Les fichiers créés pour le composant de la page principale sontmainpage.component.ts, mainpage.component.html, mainpage.component.css, et 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);
   }
}

Nous avons créé un formulaire client avec prénom, nom, adresse et numéro de téléphone. La validation de la même chose se fait avec lengOnInitfonction. En cliquant sur Soumettre, le contrôle passe à la fonctiononClickSubmit. Ici, le tableau qui permet d'afficher les détails saisis est rendu visible.

Les données client sont converties de json en tableau afin que nous puissions les utiliser dans ngFor sur la table, ce qui est fait dans le fichier .html comme indiqué ci-dessous.

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>

Ici, le premier div contient les détails du client et le deuxième div a le tableau, qui montrera les détails saisis. L'affichage de la connexion utilisateur et des détails du client est comme indiqué ci-dessous. Ceci est la page avec formulaire de connexion et en-tête et pied de page.

Une fois que vous avez entré les détails, l'affichage est comme indiqué ci-dessous

Après avoir cliqué sur Soumettre, une boîte de dialogue apparaît qui indique Connexion réussie.

Si les détails ne sont pas valides, une boîte de dialogue apparaît qui affiche Connexion invalide comme indiqué ci-dessous -

Si la connexion réussit, il passera au formulaire suivant de détails du client comme indiqué ci-dessous -

Une fois les détails saisis et soumis, une boîte de dialogue apparaît qui montre que les détails du client sont ajoutés comme indiqué dans la capture d'écran ci-dessous -

Lorsque nous cliquons sur OK dans la capture d'écran ci-dessus, les détails apparaîtront comme indiqué dans la capture d'écran ci-dessous -