Inicio de Presentacion para Front end

1. Asignatura:
Programación IV
Front-End
Tema:

2. Objetivo:
Al Finalizar la clase el estudiante será capaz de:
• Iniciar la creación del Front-End
Contenido conceptual:
• Front-End

3. Creando un Modelo de Usuario
• Crear una carpeta dentro del app llamada “models”
Seguido dentro de la carpeta models crear un archive
llamado “usuario.model.ts”

4. Continua…
Seguido dentro de la carpeta models crear un archive
llamado “usuario.model.ts” y el modelo debera contener
lo siguiente:
export class Usuario{
constructor(
public nombre: string,
public email: string,
public password: string,
public img?: string,
public role?: string,
public _id?: string
) { }
}

5. Crear interfaz de Acceso (Login)
Crear un componente en el app llamado “login”. Ejemplo:
ng g c login --spec=false

6. Continua…
• Dentro del archivo login.component.css agregar
lo siguiente:
/*******************
Login register and recover
password Page
******************/
.login-register {
background-size: cover;
background-repeat: no-repeat;
background-position: center
center;
height: 100%;
width: 100%;
padding: 10% 0;
position: fixed;
}

7. Continua…
.login-box {
width: 400px;
margin: 0 auto;
}
.login-box .footer {
width: 100%;
left: 0px;
right: 0px;
}
.login-box .social {
display: block;
margin-bottom: 30px;
}
#recoverform {
display: none;
}
.login-sidebar {
padding: 0px;
margin-top: 0px;
}
.login-sidebar .login-box {
right: 0px;
position: absolute;
height: 100%;
}

8. • En el archivo login.component.html deberá
contener lo siguiente:
<section id="wrapper" class="login-register login-sidebar"
style="background-image:url(../assets/images/background/login-
register.jpg);">
<div class="login-box card">
<div class="card-body">
<form class="form-horizontal form-material"
(ngSubmit)="ingresar()">
<a href="javascript:void(0)" class="text-center db"><img
src="../assets/images/logo-icon.png" alt="Home" /><br/><img
src="../assets/images/logo-text.png" alt="Home" /></a>
<div class="form-group m-t-40">
<div class="col-xs-12">
<input class="form-control" type="text" required=""
placeholder="Usuario">
</div>
</div>

9. Continua…
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="password" required=""
placeholder="Contraseña">
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<div class="checkbox checkbox-primary pull-left p-t-0">
<input id="checkbox-signup" type="checkbox" class="filled-in
chk-col-light-blue">
<label for="checkbox-signup"> Recuérdame </label>
</div>
<a href="javascript:void(0)" id="to-recover" class="text-dark
pull-right"><i class="fa fa-lock m-r-5"></i> Olvide
contraseña?</a> </div>
</div>

10. Continua…
<div class="form-group text-center m-t-20">
<div class="col-xs-12">
<button class="btn btn-info btn-lg btn-block text-uppercase btn-rounded"
type="submit">Ingresar</button>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 m-t-10 text-center">
<div class="social">
<a href="javascript:void(0)" class="btn btn-facebook" data-toggle="tooltip"
title="Login with Facebook"> <i aria-hidden="true" class="fa fa-facebook"></i> </a>
<a href="javascript:void(0)" class="btn btn-googleplus" data-toggle="tooltip"
title="Login with Google"> <i aria-hidden="true" class="fa fa-google-plus"></i>
</a>
</div>
</div>
</div>
<div class="form-group m-b-0">
<div class="col-sm-12 text-center">
No tienes cuenta? <a href="pages-register2.html" class="text-primary m-l-
5"><b>Crear cuenta</b></a>
</div>
</div>

11. Continua…
</form>
<form class="form-horizontal" id="recoverform" action="index.html">
<div class="form-group ">
<div class="col-xs-12">
<h3>Recuperar contraseña</h3>
<p class="text-muted">Escriba su correo electrónico y siga los pasos </p>
</div>
</div>
<div class="form-group ">
<div class="col-xs-12">
<input class="form-control" type="text" required="" placeholder="Email">
</div>
</div>
<div class="form-group text-center m-t-20">
<div class="col-xs-12">
<button class="btn btn-primary btn-lg btn-block text-uppercase waves-effect waves-light"
type="submit">Reset</button>
</div>
</div>
</form>
</div>
</div>
</section>

12. • En el archivo login.component.ts deberá
contener lo siguiente:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
declare function init_plugins();
@Component({
selector: 'app-acceso',
templateUrl: './acceso.component.html',
styleUrls: ['./acceso.component.css']
})
export class AccesoComponent implements OnInit {
constructor( public router: Router ) { }
ngOnInit() {
init_plugins();
}
ingresar() {
this.router.navigate([ '/dashboard' ]);
}
}

13. Continua…
• En el archivo app.routes.ts deberá crear la
importación de LoginComponent
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { LinkComponent } from './pages/link/link.component';
import { GraficoPastelComponent } from './components/grafico-pastel/grafico-
pastel.component';
import { GraficoComponent } from './graficos/grafico/grafico.component';
import { AccesoComponent } from './acceso/acceso.component';
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'Link', component: LinkComponent },
{ path: 'Grafico', component: GraficoComponent},
{ path: 'Acceso', component: AccesoComponent},
{ path: '', redirectTo: '/home', pathMatch: 'full'}
// tslint:disable-next-line: no-trailing-whitespace
];
export const APP_ROUTES = RouterModule.forRoot (appRoutes, { useHash: true } );

14. Continua…
• En el archivo app.module.ts debe asegurarse que
este importado el componente.
// Componentes
import { AppComponent } from './app.component';
import { NavbarComponent } from './shared/navbar/navbar.component';
import { HomeComponent } from './pages/home/home.component';
import { LinkComponent } from './pages/link/link.component';
import { IncrementadorComponent } from
'./components/incrementador/incrementador.component';
import { GraficoPastelComponent } from './components/grafico-
pastel/grafico-pastel.component';
import { GraficoComponent } from './graficos/grafico/grafico.component';
import { AccesoComponent } from './acceso/acceso.component';

15. • En en el navbar.component.html deberá
agregar la ruta del acceso al login.
<li class="nav-item">
<a class="nav-link" [routerLink]="['/Acceso']"
queryParamsHandling instead preserveFragment>Acceso</a>
</li>

16. • En una ventana de comandos deberá ejecutar ng serve
–o para ejecutar el proyecto de angular se vera de la
siguiente manera:

17. Crear un Interfaz de Registro de
Usuario
• Crear un nuevo componente llamado
“register” para el registro de usuarios de la
siguiente manera:
ng g c login/register –spec=false

18. • En el archivo register.component.html deberá
contener lo siguiente:
<section id="wrapper" class="login-register login-sidebar"
style="background-image:url(../assets/images/background/login-
register.jpg);">
<div class="login-box card">
<div class="card-body">
<form class="form-horizontal form-material" id="loginform"
action="index.html">
<a href="javascript:void(0)" class="text-center db"><img
src="../assets/images/logo-icon.png" alt="Home" /><br/><img
src="../assets/images/logo-text.png" alt="Home" /></a>
<h3 class="box-title m-t-40 m-b-0">Registrate ahora</h3><small>
Crea una cuenta y disfruta</small>
<div class="form-group m-t-20">
<div class="col-xs-12">
<input class="form-control" type="text" required=""
placeholder="Nombre">
</div>
</div>

19. Continua…
<div class="form-group ">
<div class="col-xs-12">
<input class="form-control" type="text" required=""
placeholder="Correo">
</div>
</div>
<div class="form-group ">
<div class="col-xs-12">
<input class="form-control" type="password" required=""
placeholder="Contraseña">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="password" required=""
placeholder="Confirma contraseña">
</div>
</div>

20. Continua…
<div class="form-group row">
<div class="col-md-12">
<div class="checkbox checkbox-primary p-t-0">
<input id="checkbox-signup" type="checkbox">
<label for="checkbox-signup"> Estoy de acuerdo con los <a
href="#">términos</a></label>
</div>
</div>
</div>
<div class="form-group text-center m-t-20">
<div class="col-xs-12">
<button class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-
light" type="submit">Registrarme</button>
</div>
</div>
<div class="form-group m-b-0">
<div class="col-sm-12 text-center">
<p>¿Tienes una cuenta? <a href="pages-login-2.html" class="text-info m-l-
5"><b>Ingresa ahora</b></a></p>
</div>
</div>
</form>
</div>
</div>
</section>

21. • En el app.routes.ts deberá realizar la
importación del register
import { HomeComponent } from './pages/home/home.component';
import { LinkComponent } from './pages/link/link.component';
import { GraficoPastelComponent } from './components/grafico-
pastel/grafico-pastel.component';
import { GraficoComponent } from
'./graficos/grafico/grafico.component';
import { AccesoComponent } from './acceso/acceso.component';
import { RegisterComponent } from './acceso/register.component';
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'Link', component: LinkComponent },
{ path: 'Grafico', component: GraficoComponent},
{ path: 'Acceso', component: AccesoComponent},
{ path: 'Register', component: RegisterComponent},
{ path: '', redirectTo: '/home', pathMatch: 'full'}
// tslint:disable-next-line: no-trailing-whitespace
];

22. Al Finalizar deberá verse lo siguiente al agregar la ruta del
register.

23. Conclusiones:
El estudiante:
• Iniciar el Front-End para el login y creación de usuarios.

24. Autoría
Nombre del Docente: Ing. Claudio Gutiérrez, MBA.
Cargo: Docente de Informática
Sede: Central SPS
Bibliografía: http://angular.io