Angular 4 - Ejemplos

En este capítulo, discutiremos algunos ejemplos relacionados con Angular 4.

Para empezar, hemos creado un ejemplo que muestra un formulario de inicio de sesión con la entrada como username y password. Al ingresar los valores correctos, ingresará al interior y mostrará otro formulario en el que podrá ingresar los datos del cliente. Además, hemos creado cuatro componentes: encabezado, pie de página, inicio de sesión de usuario y página principal.

Los componentes se crean usando el siguiente comando:

encabezado del componente 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

pie de página del componente 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

ng g componente 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

página principal 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

En el app.module.ts, el módulo principal tiene todos los componentes agregados cuando se crea. El archivo tiene el siguiente aspecto:

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

Se agregan los componentes creados anteriormente:

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

Los componentes también se agregan en las declaraciones:

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

En el padre app.component.html, hemos agregado la estructura principal del archivo que verá el usuario.

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

Hemos creado un div y agregado <app-header></app-header>, <router-outlet></router-outlet> y <app-footer></app-footer>.

los <router-outlet></router-outlet>se utiliza para navegar de una página a otra. Aquí, las páginas tienen un formulario de inicio de sesión y una vez que se realiza correctamente, se redirigirá a la página principal, es decir, al formulario del cliente.

Para obtener el formulario de inicio de sesión primero y luego obtener mainpage.component.html, los cambios se realizan en app.module.ts como se muestra a continuación -

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

Nosotros hemos importado RouterModule y Routes desde @anuglar/router. En las importaciones, RouterModules toma appRoutes como el parámetro que se define arriba como -

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

Las rutas toman la matriz de componentes y, de forma predeterminada, se llama al userloginComponent.

En userlogin.component.ts, hemos importado el enrutador y navegamos a mainpage.component.html según la condición que se muestra a continuación:

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

A continuación se muestra el archivo .ts para app.component.ts. Solo los detalles predeterminados están presentes en él.

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

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

Veamos ahora los detalles de cada uno de los archivos de componentes. Para empezar, primero tomaremos el componente de encabezado. Para el nuevo componente, se crean cuatro archivosheader.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>

No hemos agregado ningún css. Esto hace que el archivo header.component.css esté vacío. También elheader.compoent.spec.ts El archivo está vacío ya que los casos de prueba no se consideran aquí.

Para el encabezado, trazaremos una línea horizontal. Se puede agregar un logotipo o cualquier otro detalle para que el encabezado se vea más creativo.

Consideremos ahora la creación de un componente de pie de página.

Para el componente de pie de página, footer.component.ts, footer.component.html, footer.component.spec.ts and footer.component.css se crean archivos.

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

Como no hemos agregado ningún CSS, el footer.component.cssel archivo está vacío. También elfooter.compoent.spec.ts El archivo está vacío ya que los casos de prueba no se consideran aquí.

Para el pie de página, simplemente dibujaremos una línea horizontal como se muestra en el archivo .html.

Veamos ahora cómo funciona el componente userlogin. Los siguientes archivos para el componente de inicio de sesión de usuario creado sonuserlogin.component.css, userlogin.component.html, userlogin.component.ts, y userlogin.component.spec.ts.

Los detalles de los archivos son los siguientes:

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>

Aquí, hemos creado un formulario con dos controles de entrada. Username y Password. Este es un enfoque de formulario basado en modelos y los detalles del mismo se explican en el Capítulo 14 - Formularios.

Consideramos que el nombre de usuario y la contraseña son obligatorios, por lo que la validación del mismo se agrega en el ts. Al hacer clic en el botón enviar, el control se pasa alonClickSubmit, que se define en el archivo 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'])
      }
   }
}

Para el control de formulario y la validación, los módulos se importan como se muestra a continuación

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

Necesitamos un enrutador para navegar a un componente diferente cuando el usuario y la contraseña son correctos. Para esto, el enrutador se importa como se muestra a continuación:

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

En ngOnInit, se realiza la validación del formulario. Necesitamos que el nombre de usuario tenga más de seis caracteres y el campo es obligatorio. La misma condición se aplica también a la contraseña.

Al hacer clic en enviar, podemos verificar si el nombre de usuario es systemadmin y la contraseña es admin123. Si es así, aparece un cuadro de diálogo que muestraLogin Successful y el enrutador navega a la página principal de la aplicación, que es el selector del componente de la página principal.

Hay css agregado para el formulario en userlogin.component.css archivo -

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

los userlogin.component.spec.ts El archivo está vacío ya que no hay casos de prueba en este momento.

Analicemos ahora cómo funciona el componente de la página principal. Los archivos creados para el componente de la página principal sonmainpage.component.ts, mainpage.component.html, mainpage.component.css, y 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);
   }
}

Hemos creado un formulario de cliente con nombre, apellido, dirección y número de teléfono. La validación de la misma se realiza con elngOnInitfunción. Al hacer clic en enviar, el control llega a la funciónonClickSubmit. Aquí, la tabla que se usa para mostrar los detalles ingresados ​​se hace visible.

Los datos del cliente se convierten de json a una matriz para que podamos usar lo mismo en ngFor en la tabla, que se realiza en el archivo .html como se muestra a continuación.

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>

Aquí, el primer div tiene los detalles del cliente y el segundo div tiene la tabla, que mostrará los detalles ingresados. La visualización del inicio de sesión del usuario y los detalles del cliente es como se muestra a continuación. Esta es la página con formulario de inicio de sesión y encabezado y pie de página.

Una vez que ingrese los detalles, la pantalla es como se muestra a continuación

Al hacer clic en enviar, aparece un cuadro de diálogo que muestra Inicio de sesión exitoso.

Si los detalles no son válidos, aparece un cuadro de diálogo que muestra Inicio de sesión no válido como se muestra a continuación:

Si el inicio de sesión es exitoso, pasará al siguiente formulario de Detalles del cliente como se muestra a continuación:

Una vez que se ingresan y envían los detalles, aparece un cuadro de diálogo que muestra que los Detalles del cliente se agregan como se muestra en la captura de pantalla a continuación:

Cuando hacemos clic en Aceptar en la captura de pantalla anterior, los detalles aparecerán como se muestra en la captura de pantalla a continuación: