Curso de angular
#Crear nuevo proyecto
Primero crearemos el directorio desde PowerShell
Yo lo tengo en la sigueinte ruta
PS C:\Users\linck> cd C:\Users\linck\OneDrive\Documentos\prueba
lo crearemos con mkdir angular
PS C:\Users\linck\OneDrive\Documentos\prueba> mkdir angular
ingresamos en la carpeta cd angular
PS C:\Users\linck\OneDrive\Documentos\prueba\angular> ng new clientes-app y nos preguntara si agregaremos el Angular routing le desimos que no luego cargamso yo lo tengo como pasteleria pero ustedes pueden ponerle cliente ya que estoy haciendo una practica diferente
entramos en nuestro proyecto y lo corremos
PS C:\Users\linck\OneDrive\Documentos\prueba\angular> cd pasteleria-app PS C:\Users\linck\OneDrive\Documentos\prueba\angular\pasteleria-app> ng serve -o
Si lo hacemos bien lo veremos de la siguiente manera
Borramos lo que tenemos en app.component.html y lo dejamos en h1
y lo dejamos asi se modifica el app-component.html
Verificamos nuestro app.components.ts vemos que en @Component tenemos el selctor, la url y el stilo
el selector lo mandaremos llamar al index.html para que se muestre
Hacemos un camgio en nuestro app.components.ts en nuestra class AppComponent creamos dos variables mas de tipo string curso y profesor que se veran reflejadas en nuestro app.component
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Bienveniso a Angular';
curso: string = 'Curso de Spring 5 con Angular ';
profesor: string = 'Joel Gerson Flores'
}
y las mandamos a llamar
<h1>{{title}}</h1>
<ul>
<li>{{curso}}</li>
<li>Profesor {{profesor}}</li>
</ul>
Ingrsamos a bootstrap en la siguiente liga
https://getbootstrap.com/docs/4.6/getting-started/introduction/
copiamos los linck de css y js esto es de la version BootStrap 4.6
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
Podemos sacar la plantilla completa de la mima pagina y se ve de la siguiente manera
Y en nuestro proyecto de la siguente manera
Buscanrenos un nav-bar en la pagina de BootStrap y copiaremos en nuestro app-component.html el nav mas completo
Recordemos que debemos de poner el popper antes del bootstrap.min
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
Crearemos una carpeta nueva que se llame header dentro de la carpeta crearemos un header.coponent.ts
Despues crearemos un comonente con @Component y le pondremos un selector y un template y importaremos el componenente de @angular/core aun no lo podemos pcupar ya que hay que llamarlo en el app.module.ts
import {Component} from '@angular/core';
@Component({
selector: 'app-header',
template: `
App Angular
`
})
export class HeaderComponent{
title: string = 'App Angular'
}
Abriremos nuestro app.module y lo importalemos como al header component y en declarations lo mandamos llamar
ya que lo tenemos declarado lo que teniamos en nuestro header component lo mandamos llamar en nuestro template y declaramos un en nuestro herader component una variablde de tipo string llamada title y le pondremos de esta manera title: string = 'App Angular'
import {Component} from '@angular/core';
@Component({
selector: 'app-header',
template: `
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">{{title}}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria- expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
`
})
export class HeaderComponent{
title: string = 'App Angular'
}
Levantamos nuestro proyecto con ng serve -o y listo se tiene que ver de la sigueinte manera
Lo que aremos es quitar el template y lo remplazaremos por el templateUrl, tendremos que crear un html que se llame header.component.html y lo que teniamos en el template de header component lo movemermos al html
y lo que teneiamo en el templa lo movemos al header.htmltcomponene.
y por ultimo lo mandamos a llamar con su selector que es app-header que esta en el header.component.ts que es este "selector: 'app-header'"
Abrimos nuestra consola y creamos noestro footer component
se creara la carpeta de footer en nuestro proyecto y se vera de la siguiente manera
Luego ingresamos a footer desde el footer component
abriremos el footercoponent.ts marcara un erro esto es por que al crearlo te toma el . solo hay que quitarlo
hay que crear el footer.component.html y ponenmos nuestras etiquestas de footer
<footer class="bg-dark rounded-top">
<div class="">
<p>
©{{autor.nombre + '' + autor.apellido}}
</p>
</div>
</footer>
y lo declaramos en el app.module.ts para que se pueda ver nuestro template
y lo pasamos a nuestra vista de app.component.html
<footer class="footer bg-dark rounded-top text-center">
<div class="container py-2">
<p class="text-white my-2">
©{{autor.nombre + '' + autor.apellido}}
</p>
</div>
</footer>
se crea css de footer y se agrega al app.component como un arreglo que agregara mas css
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Bienveniso a Angular';
curso: string = 'Curso de Spring 5 con Angular ';
profesor: string = 'Joel Gerson Flores'
}
.footer{
position: absolute;
bottom: 0px;
height: 60px;
width: 100%;
}
y el app component se debe de ver de la sigueinte manera
<app-header></app-header>
<div class="container">
<h1>{{title}}</h1>
<ul>
<li>{{curso}}</li>
<li>Profesor {{profesor}}</li>
</ul>
</div>
<app-footer></app-footer>
al desplegar tu proyecto se ve de la sigueitne manera
Para crear un nuevo componente dentro de nuestro proyecto crearemos con ng g c directiva y creara todoso los componentes y la carpeta
de igual forma ya no importara el Directivas component enapp.module
En nuetro directiva.component creamos un atributo y lo llamremos lista corsoy lo meteremos eun un arreglo
listaCurso: string[] = ['Type','JavaScript', 'Java SE', 'C#', 'PHP'];
En nuestro directiva.component.html lo mandaremos crearemos una una lista en la cual agregaremos el ngFor
<div class="card">
<div class="card-header">
Lista de cursos
</div>
<ul class="list-group">
<li class="list-group-item" *ngFor="let curso of listaCurso">{{ curso }}</li>
</ul>
</div>
Se despliega nuesrto produycto y ya debe de traer el arreglo
Primer o en nuetro html crearemos un booton arriba de nutro card
<button type="button" class="btn btn-primary my-3">Ocultar</button>
En nuetro directiva.component crearemos un atributo que sera boleano habilitar: boolean = true; despues en nuetro html no iremos a nuestra ulo que sera lo que queremos que muestre y mostraremos un *ngIf="habilitar == true" a qui indicamos que siempre esta en verdadero
y crearemos un metodo que no retornara nada sera void y trraeremos el atributo habilitar y le diremos que si es verdadero tretornaremos false de lo contrario sera verdadero
setHabilitar(): void{
this.habilitar = (this.habilitar==true)? false: true;
}
mandamos llamar con nuestra instruccion click al metodo habilitar y con las llaver le dieremos que si habilitar es verdadero lo oculete en caso contrario que lo muestre
<button type="button" (click)="setHabilitar()" class="btn btn-primary my-3">{{habilitar==true? 'Ocultar': 'Mostras'}}
Al desplegar nuestro proyecto se mostrara a si
y si damos click ocultara nuestra lista
Se ingresa a nuestra ruta mediante consola, yo lo estoy haciendo en atom y ya me trae la ruta de mi proyecto que es la sigueinte
PS C:\Users\linck\OneDrive\Documentos\GitHub\introAngular\clientes-app>
pondremos el siguiente comando que nos generar la carpeta
ng g c clientes no agregara los siguientes archivos
despues ingresasremos a
cd src cd app cd ..clientes\
y quedaremos en la sigueinte linea y ahi ingresaremos ng g class cleinte que nos generara la clase clientes
PS C:\Users\linck\OneDrive\Documentos\GitHub\introAngular\clientes-app\src\app\clientes>ng g class que nos aparecera de la siguiente manera
de clientes.components.ts eliminarems
clientes.component.spec.ts clientes.component.css
y quedara de la sigueitne manera
Quitamos ,styleUrls: ['./clientes.component.css'] ya que si no lo quitamos se quedara la congiruracion del css y marcara un error
En clientes component crearemos un atributo del tipo clientes y pasaremos en el arreblo Al cliente
clientes: Cliente[] =[];
y en nuestra clase cliente.ts ya deberemos de tener declarados los atributos que mandaremos a llamar del back en este caso
export class Cliente {
id: number;
nombre: string;
apellido: string;
createAt: string;
email: string;
}
Para poder llamarlo hay que hacerlo desde el clientes.compoent
y en clientes.component.htlm creamos una tabla y buscamos el componente que se va a mandar llamar que seria nuestro tr y ingresamos nuestro *ngFor="let cliente of clientes" que cliente es como lo llamamos en nuestro html y el clientes lo traemos de nuestro componente
<div class="card border-primary mb-3" >
<div class="card-header ">Clientes</div>
<div class="card-body">
<h5 class="card-title text-primary">Listado de clientes!</h5>
<table class="table table-bordered table-striped text-primary">
<thead>
<tr>
<th>id</th>
<th>nombre</th>
<th>apellido</th>
<th>e-mail</th>
<th>fecha</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let cliente of clientes" class="text-primary">
<td>{{cliente.id}}</td>
<td>{{cliente.nombre}}</td>
<td>{{cliente.apellido}}</td>
<td>{{cliente.email}}</td>
<td>{{cliente.createAt}}</td>
</tr>
</tbody>
</table>
</div>
</div>