Angular

[hidden]="condicion"

Si la condición da true se ocultará el elemento, si no se mostrará en la pantalla

<div *ngFor="let person of people" class="card" 
	[ngClass]="{'underage': person.age < 18}" 
	[hidden]="person.age > 49">
  
</div>

se muestran todos, menos......? (Pregunta)

Condiciones con Angular (*ngIf)

<div *ngIf="stack.length > 0">
  <ul>
    <li *ngFor="let word of stack">{{word}}</li>
  </ul>
</div>

<div *ngIf="stack.length == 0">
  <h2>No hay ningúna entrada!</h2>
</div>

export class AppComponent {
  public word : string = '';
  public stack : string[] = [];

  public addTask (task: string) {
    this.stack.push(task);
    this.word = '';
  }
}

*ngIf = "condición"

Aunque no tenga los [], el ngIf espera una condición booleana.
Que le diga si se muestra o no se muestra

Condiciones con Angular (*ngIf)

<div *ngIf="stack.length > 0">
  <ul>
    <li *ngFor="let word of stack">{{word}}</li>
  </ul>
</div>

<div *ngIf="stack.length == 0">
  <h2>No hay ningúna entrada!</h2>
</div>

*ngIf = "condición"

Se muestra solo si stack tiene algo.
Sino, sale el div de debajo.

*ngIf="condicion"

Si la condición da true se mostrará en el DOM, si no...,
SE BORRARÁ DEL DOM

*ngIf vs [hidden]

<button 
      *ngIf="hideCompleted" 
      (click)="hideCompleted = !hideCompleted"
      >Mostrar completados
</button>
<button 
      *ngIf="!hideCompleted" 
      (click)="hideCompleted = !hideCompleted"
      >Ocultar completados
</button>

<li 
  [hidden]="hideCompleted && item.completed" 
  *ngFor="let item of items" 
  [ngClass]="{'completed' : item.completed}">
    <span (click)="completeMe(item.title)">{{item.title}}</span>
    <button (click)="deleteMe(item.title)"> Borrar</button>
</li>

desaparecerá

se hace invisible

Ejemplos WebApps y SPA

Angular Components

Crear un componente de angular

ng generate component nombre_del_componente

Angular Components

ng generate component nombre_del_componente

Angular Components

@Component({
  selector: 'app-menu', // ¿Y esto? Magia (Lo explico un poquito más adelante),
  templateUrl: './menu.component.html', //EL html asociado este componente.
  styleUrls: ['./menu.component.css'] //El estilo asociado a este componente
})

menu.component.ts

El css estará encapsulado para cada componente, esto significa que todo lo que quieras maquetar de dicho componente lo debes hacer dentro su fichero css
Cada componente tienen su archivo de estilo.

Angular Components

¿Que más generó el ng component?

Al generar el componente a través del CLI, nos facilita algunas cosas y hace otras por nosotros.
Este directamente importa al module el componente menú.
Todos los componentes deben estar declarados ahí.

Angular Components

HORA DE TRABAJAR!

Consigue realizar la imagen de la izquierda, usando componentes.
Crea una componente por cada elemento que ves en la imagen.
ejemplo.
ng generate component header

Usa css para conseguir el estilo que se ve en la imagen. O algo mejor ;)

Inputs & Outputs

ANGULAR
COMPONENT

INPUTS

OUTPUTS

Inputs & Outputs

En algunos casos, un componente puede haber recibido o realizado un evento y quiere comunicar con su padre dicho evento. Para esto se usa los @Output()

Detallemos cada uno de ellos

Un componente puede recibir valores de su padre, para esto se usarán los @Input()

Inputs

¿Cómo enviamos el valor?

¿Pero también podemos pasar variables? 🤔

Inputs

Si, también podemos pasar una variable desde el app.component

https://stackblitz.com/edit/angular-wvtn3i

Inputs

Si, también podemos pasar una variable desde el app.component

https://stackblitz.com/edit/angular-wvtn3i

Inputs

¿Y si queremos pasar más inputs?

El padre

El hijo (componente)

Inputs

¿Y si queremos pasar más inputs?

resultado

https://stackblitz.com/edit/angular-jqv52c

Puedes pasar tantos como quieras o sean necesarios

Live coding

¡ Ejercicio para practicarlo !

Tenemos un array y pasamos cada objeto al hijo

Crea un componente llamado TEAM y haz que invoque a un componente
MEMBER y que dibuje a cada uno

Usa el JSON de usuarios

https://jsonplaceholder.typicode.com/users

Outputs

Estos componentes pueden realizar acciones o eventos que pueden ser realizados por el padre del mismo. En este caso son considerados datos de salida (@Output())

Si queremos activar un evento del padre, podremos usar el @output conjunto a un emitidor de evento (EventEmiter).

¿Cómo se usa esto en Angular?

Si queremos enviar un output y emitir un evento desde un componente hijo a un componente padre, debemos asegurarnos primero que se importe Output y el EventEmitter

Para avisar de un evento desde menu component a app.component.

Outputs

Al declarar un output de esta forma, estás declarando un nuevo emitidor de eventos.
Este avisará al componente padre de que se ha activado un evento.

¿Como usamos ese emitidor y como le asignamos un evento?

Supongamos que tenemos un boton en el componente menú y que queremos notificar al app component, que se ha pulsado ese botón haciendo que el app component muestre una alert.

Outputs

En el menu component ts, declaramos el metodo asociado al click.

En el usamos la variable antes declarada y le decimos que queremos emitir ese valor.

¿Cómo lo recibimos en el app component?

Outputs

El mismo nombre que hemos usado para declarar los outputs lo usaremos en el app component. Debido a que es un evento los pondremos entre parentesis.

<menu (notifyMyFather)="whatMyChildSay($event)"></menu>

Creamos una función que esté asociada al evento emitido en el componente menú.
Esta función se ejecutará, sí en el componente hijo emite un evento.
Puedes pasar variables desde el componente hijo al padre.
En $event estará el parámetro enviado desde menú.

menu.component.ts

app.component.html

Resultado

Outputs

https://stackblitz.com/edit/angular-c6ej8u

Live coding

Ejercicio ! Haz algo como lo siguiente

Outputs. Te toca a ti.

https://gyazo.com/1d415b1c6e6afd66cdc0a092f0ccea2c.gif

Usa el JSON de usuarios

https://jsonplaceholder.typicode.com/users

Añade los botones en cada user de:

- Borrar

- Marcar como favorito

- Indicar prioridad 1 - 2 - 3

Coloca afuera, un botón para, "Solo ver a los de prioridad 1, 2 ó 3" y otro botón para "ver solo favoritos"

¡ Será como una especie de Agenda de contactos !

¿ y si juntamos lo que hemos aprendido en la semana?

ngIf
ngFor
Components
Inputs
Outputs

Ejercicio

app.component

shopping-list.component

item.component

cart.component

Ejercicio

Crea un shopping-list.component.
Este tendrá 3 inputs:
- Producto : string
- Cantidad : number
- Precio : number (números enteros y positivos)
y un botón "add carrito". También usará al componente cart y le mantendrá el array de artículos introducidos guardado
Crea un cart.component, aquí se irán mostrando los productos recibidos por @input en forma de lista (*ngFor)

Crea un item.component, que recibe un objeto de tipo producto y lo renderiza en la pantalla. Además muestra un botón de eliminar
Finalmente, desde shopping-list.component se mostrará la suma de los productos comprados y habrá un botón de "pagar"

app.component

shopping-list.component

item.component

cart.component

Services

Servicios

Podemos crear un servicio a través del comando

ng generate service users

ng generate service services/users

Servicios

Podemos crear un servicio a través del comando

ng g service users

En stackblitz

Click derecho en app

Servicios

2 ficheros :

users.service.ts

users.service.spec.ts

El fichero spec es para realizar pruebas unitarias de nuestro servicio. En este caso se sale del alcance del curso.

Servicios

¿Por qué estamos creando un servicio?

Evitar código duplicado.
KISS - Keep It Simple Stupid.
Modularizar.
No importar axios en todos los componentes que necesiten hacer consultas.
Un solo fichero gestiona un solo recurso.

¿Por qué estamos creando un servicio?

NO AL SPAGETTI CODE

Como usamos nuestro servicio

¿Cómo usamos nuestro servicio?

En Angular, los constructores se usan para la inyección de dependencias. Así mantienen el código más desacoplado y más independiente.

Dependency Injection - Angular

¿Cómo usamos nuestro servicio?

En cualquier página, en cualquier componente, o en cualquier otro servicio incluso donde necesitemos cargar los usuarios de la api .... SOLO PONEMOS ESTA LÍNEA DE CÓOODIGOOOOO

¿Se dan cuenta de lo útil que es?

this.users = this.usersService.getAllUsers();

Como será nuestro getAllUsers()

export class UsersService { 


  constructor(){}

  public getAllUsers() : User[]{

   return [ 
      {
        name : "Luis",
        email : "luis@gmail.com"
      }
    ]
  }

}

Live coding

Utils services

Swal Alert Service

Ejemplo de servicio

https://sweetalert2.github.io/#download

Swal Alert Service

npm install sweetalert2

Swal Alert Service

import { Injectable } from '@angular/core';
import Swal from 'sweetalert2'

@Injectable({
  providedIn: 'root'
})
export class AlertService {

  constructor() {
  }

  public success() {
    return Swal.fire(
      'Good job!',
      'You clicked the button!',
      'success'
    )
  }

}

Swal Alert Service

import { Injectable } from '@angular/core';
import Swal from 'sweetalert2'

@Injectable({
  providedIn: 'root'
})
export class AlertService {

  constructor() {
  }

  public success() {
    return Swal.fire(
      'Good job!',
      'You clicked the button!',
      'success'
    )
  }

}

export class AppComponent implements OnInit {

  constructor(private alertService : AlertService) {
  }

  onClick() {
    this.alertService.success();
  }
  
}

Investiga sweet alert o toastr o angular material toast

Crea un servicio para gestionar y lanzar mensajes de alerta y de success llamándole a él desde cualquier componente

https://codeseven.github.io/toastr/demo.html

https://material.angular.io/components/snack-bar/overview

https://sweetalert2.github.io/#download

Un mundoooooo ideaaaaal

Bueno ... preparados

¿Para hacerte un adulto ya?

ASÍNCRONÍA

FRONTEND

BACKEND

FRONTEND

BACKEND

+

=

FULLSTACK

¿Why backend?

Cuando el usuario interactúa con nuestras webs o aplicaciones debemos guardar sus datos en algún servidor.

Si un usuario declara eventos en su calendario, tenemos dos opciones:

- O guardamos sus datos solo en local, y ese usuario si reinstala la app o si entra desde otro dispositivo no ve datos.

- O guardamos sus datos en una base de datos en "la nube" y podemos sincronizar sus diferentes dispositivos porque sabemos que vuelve a entrar con el mismo usuario

Bases de datos

Una base de datos es básicamente dónde se almacenan los datos de la aplicación.

Estos datos no son solo los que el usuario crea, edita, borra o ve, si no también los propios usuarios, otros datos de configuración de la web, otros datos de tablas que se relacionan con las que el usuario ve, etc etc

A grandes rasgos, porque no es parte del alcance de este curso, existen dos tipos de bases de datos

Relacionales y No Relacionales

Bases de datos. NO relacionales

La gran mayoría de bases de datos no relacionales están basadas en una estructura JSON

LO IMPORTANTE

LOS CHICOS DE BACKEND NOS VAN A GUARDAR DATOS EN LA NUBE, NOSOTROS VAMOS A APRENDER A MANDARLE LOS DATOS DESDE EL FRONT Y A PEDIRLES DATOS DESDE EL FRONT

API REST

COMUNICACIÓN CLIENTE - SERVIDOR

Ordenador usuario

Servidor facebook

== DAME EL HTML =>

<= TOMA EL HTML ==

== DAME LOS POSTS =>

<= TOMA LOS POSTS ==

Le he dado like a este post =>

<= ok, lo tengo en cuenta ==

== He subido un nuevo post =>

<= ok, lo tengo en cuenta ==

Ordenador usuario

Servidor facebook

== DAME EL HTML =>

<= TOMA EL HTML ==

== GET /POSTS =>

<= TOMA LOS POSTS ==

POST /POST/ID/LIKES/ =>

<= ok, lo tengo en cuenta ==

== POST: /ME/POSTS =>

<= ok, lo tengo en cuenta ==

users

posts

pages

messages

RECURSOS

Una buena api hoy en día, nos responde en JSON, por lo tanto, si le pedimos usuarios nos dará un array de usuarios

Si le pedimos un solo usuario nos dará un objeto

RECURSOS

GET ( URL )

var URL = 'https://jsonplaceholder.typicode.com/users'

GET ( URL + '/25' )

POST ( URL, DATA )

PUT ( URL + '/25', DATA )

DELETE ( URL + '/25' )

Para pedir datos

Para mandar datos

URL

Digamos, que es la forma de apuntar a un recurso en particular

Tiene dos partes claras, el host y el recurso

VERBO

Indica la acción que queremos hacer desde el front con nuestra solicitud. Son varios:

GET POST PUT DELETE

¿Que es esto de GET?

Una petición a un servidor, o a una api, se hace mediante HTTP y esto se compone de dos partes:

var URL = 'https://jsonplaceholder.typicode.com/users'

URL

Digamos, que es la forma de apuntar a un recurso en particular

Tiene dos partes claras, el host y el recurso

VERBO

Indica la acción que queremos hacer desde el front con nuestra solicitud. Son varios:

GET POST PUT DELETE

¿Que es esto de GET?

Una petición a un servidor, o a una api, se hace mediante HTTP y esto se compone de dos partes:

var URL = 'https://jsonplaceholder.typicode.com/users'

== DAME LOS POSTS =>

<= TOMA LOS POSTS ==

Al pegar una url en el Chrome, hacemos un GET por defecto

Servidor

Cliente

Resumen

GET

var URL = 'https://jsonplaceholder.typicode.com/users'

Para pedir

POST

PUT

DELETE

Para añadir

Para actualizar

Para borrar

Resumen

GET

var URL = 'https://jsonplaceholder.typicode.com/users'

Para pedir

POST

PUT

DELETE

Para añadir

Para actualizar

Para borrar

ejemplo

.get('URL' + '/users')

.get('URL' + '/users/25')

.post('URL' + '/users', body)

.put('URL' + '/users/25', body)

.delete('URL' + '/users/25')

URL

Digamos, que es la forma de apuntar a un recurso en particular

Tiene dos partes claras, el host y el recurso

VERBO

Indica la acción que queremos hacer desde el front con nuestra solicitud. Son varios:

GET POST PUT DELETE

EJEMPLO

Juguemos con jsonplaceholder.typicode

== DAME LOS USUARIOS =>

Al pegar una url en el Chrome, hacemos un GET por defecto

Servidor

Cliente

typicode

GET 'https://jsonplaceholder.typicode.com/users'

Podemos jugar con POSTMAN

URL

Digamos, que es la forma de apuntar a un recurso en particular

Tiene dos partes claras, el host y el recurso

VERBO

Indica la acción que queremos hacer desde el front con nuestra solicitud. Son varios:

GET POST PUT DELETE

EJEMPLO

Juguemos con jsonplaceholder.typicode

== DAME EL USUARIO CON ID = 5 =>

Al pegar una url en el Chrome, hacemos un GET por defecto

Servidor

Cliente

typicode

GET https://jsonplaceholder.typicode.com/users/5

Podemos jugar con POSTMAN

URL

Digamos, que es la forma de apuntar a un recurso en particular

Tiene dos partes claras, el host y el recurso

VERBO

Indica la acción que queremos hacer desde el front con nuestra solicitud. Son varios:

GET POST PUT DELETE

EJEMPLO

Juguemos con jsonplaceholder.typicode

== INTRODUCE UN USUARIO NUEVO =>

Servidor

Cliente

typicode

POST https://jsonplaceholder.typicode.com/users

Podemos jugar con POSTMAN

BODY : { name : "Bentejui", email : "email@" ... }

URL

Digamos, que es la forma de apuntar a un recurso en particular

Tiene dos partes claras, el host y el recurso

VERBO

Indica la acción que queremos hacer desde el front con nuestra solicitud. Son varios:

GET POST PUT DELETE

EJEMPLO

Juguemos con jsonplaceholder.typicode

== MODIFICA AL USUARIO 5 =>

Servidor

Cliente

typicode

PUT https://jsonplaceholder.typicode.com/users/5

Podemos jugar con POSTMAN

BODY : { name : "Bentejui", email : "email@" ... }

Resumen

GET ( URL )

var URL = 'https://jsonplaceholder.typicode.com/users'

GET ( URL + '/25' )

POST ( URL, DATA )

PUT ( URL + '/25', DATA )

DELETE ( URL + '/25' )

GET

1 RECURSO = 1 URL

STANDARD => NOUNS

http://localhost:3000/users

http://localhost:3000/books

http://localhost:3000/books/3

Hay algunos locos que

también usan los sustantivos en singular

Peticiones desde el front

FETCH

JQUERY

AXIOS

XMLHTTPRequest

Angular HttpClient

Peticiones con axios

Importar en el fichero ts donde lo vayas a usar

import axios from 'axios';

axios.get(url)

axios.post(url, body)

axios.put(url, body)

axios.delete(url)

npm install axios

Stackblizt

Instalar axios

STANDAR URL NAMES

GET : /USERS

GET : /USERS/:id

POST : /USERS

PUT : /USERS/:id

DELETE : /USERS/:id

LOS DATOS NO ESTARÁN EN LOCAL ESTA VEZ , ESTARÁN EN UN SERVIDOR

axios.get( URL ) axios.post(URL, DATA)

axios.put( URL, DATA ) axios.delete( URL )

COMO TRAER DATOS. Javascript


var urlServer = 'https://jsonplaceholder.typicode.com/users';

axios.get(urlServer)

    .then( (users) => {
  		console.log('Usuarios =' , users.data )
	}) 
    .catch( (error) => {
	  	console.log('Algo salio mal =' , error )
	})

COMO TRAER DATOS. Javascript


var urlServer = 'https://jsonplaceholder.typicode.com/users/5';

axios.get(urlServer)

    .then( (user) => {
  		console.log('Usuario con id 5 =' , user.data )
	}) 
    .catch( (error) => {
	  	console.log('Algo salio mal =' , error )
	})

COMO TRAER DATOS. Javascript


var urlServer = 'https://jsonplaceholder.typicode.com/users/5';

axios.get(urlServer)

    .then( (user) => {
  		console.log('Usuario con id 5 =' , user.data )
	}) 
    .catch( (error) => {
	  	console.log('Algo salio mal =' , error )
	})

COMO TRAER DATOS. Javascript


var urlServer = 'https://jsonplaceholder.typicode.com/users/5';

axios.get(urlServer)

    .then( (user) => {
  		console.log('Usuario con id 5 =' , user.data )
	}) 
    .catch( (error) => {
	  	console.log('Algo salio mal =' , error )
	})

COMO MANDAR DATOS. Javascript


var urlServer = 'https://jsonplaceholder.typicode.com/users/5';

axios.post(urlServer, newUser)

    .then( (user) => {
  		console.log('Usuario añadido con id =' , user.data.id )
	}) 
    .catch( (error) => {
	  	console.log('Algo salio mal =' , error )
	})

Resumen

GET ( URL )

var URL = 'https://jsonplaceholder.typicode.com/users'

GET ( URL + '/25' )

POST ( URL, DATA )

PUT ( URL + '/25', DATA )

DELETE ( URL + '/25' )

¿Por qué then y catch?

ASINCRONÍA

¿Por qué then y catch?

ASINCRONÍA

¿Para que era el then?

¿Cómo usamos nuestro servicio?

Importamos axios en nuestro servicio y lo usamos

IMPORTANTE EL RETURN

Tipar es bueno :)

Tipamos diciendo que vamos a recibir un array de User.

Como usamos nuestro servicio para hacer un GET de los usuarios RESUMEN

app.component.ts

users.service.ts

Como usamos nuestro servicio para hacer un POST de un usuario nuevo

app.component.ts

users.service.ts

¡ LIVE CODING !

EXAMPLE

VUESTRO TURNO

Ejercicio en grupo

Crea un servicio para descargar los posts que hay en jsonplaceholder

Crea un componente para que cargue todos los posts y los muestre. en la pantalla con un ngFor

Pásale a un componente hijo llamado POST cada item de la lista

https://jsonplaceholder.typicode.com/posts

Resumen

GET

var URL = 'https://jsonplaceholder.typicode.com/users'

Para pedir

POST

PUT

DELETE

Para añadir

Para actualizar

Para borrar

ejemplo

.get('URL' + '/users')

.get('URL' + '/users/25')

.post('URL' + '/users', body)

.put('URL' + '/users/25', body)

.delete('URL' + '/users/25')

json -server

Usando vuestra propia api

- Mete dentro de la base de datos muchas tareas con esta pinta

{ 
  "tasks" : [ 
	{ title : "tarea 1", id : 1} , 
	{ title : "tarea 2", id : 2} , 
	{ title : "tarea 3", id : 3}
	] 
}

db.json

desde el frontend.....

Este es el front

https://stackblitz.com/edit/eoi-base-todolist

no te olvides darle a "Fork"

¡ Puedes usar esta base o partir del vuestro !

Usando vuestra propia api

Reutilizando la base anterior o tu propio proyecto, crea un servicio llamado TasksService para trabajar con "nuestra api".

Debemos realizar las siguientes acciones:

- Obtener todas las tareas.

- Añadir tarea.

- Modificar tarea.

- Borrar una tarea.

Live coding

Ejercicio individual

Crea un mini proyecto que se conecte con alguna de estas apis

https://apilist.fun/

Simplemente crea un mínimo frontend para mostrar al menos un listado de recursos o dos y para pedir los detalles de esos recursos GET /cats y GET /cats/id por ejemplo

Obviamente realiza el código de traer información de la api con un servicio

[hidden]="condicion"

Si la condición da true se ocultará el elemento, si no se mostrará en la pantalla

*ngIf="condicion"

Si la condición da true se mostrará en el DOM, si no..., SE BORRARÁ DEL DOM

Ejemplos WebApps y SPA

Angular Components

Angular Components

Angular Components

Angular Components

Angular Components

Angular Components

Inputs & Outputs

Inputs & Outputs

Inputs

Inputs

Inputs

Inputs

Inputs

Live coding

¡ Ejercicio para practicarlo !

Outputs

Outputs

Outputs

Outputs

Outputs

Live coding

Outputs. Te toca a ti.

Services

Servicios

ng generate service users

ng generate service services/users

Servicios

ng g service users

En stackblitz

Click derecho en app

Servicios

Servicios

Servicios

Live coding

Utils services

Swal Alert Service

Ejemplo de servicio

Swal Alert Service

Swal Alert Service

Swal Alert Service

Investiga sweet alert o toastr o angular material toast

Un mundoooooo ideaaaaal

Bueno ... preparados

ASÍNCRONÍA

FRONTEND

BACKEND

FRONTEND

BACKEND

+

=

¿Why backend?

Bases de datos

Bases de datos. NO relacionales

LO IMPORTANTE

API REST

COMUNICACIÓN CLIENTE - SERVIDOR

RECURSOS

Una buena api hoy en día, nos responde en JSON, por lo tanto, si le pedimos usuarios nos dará un array de usuarios

Si le pedimos un solo usuario nos dará un objeto

RECURSOS

URL

VERBO

¿Que es esto de GET?

Una petición a un servidor, o a una api, se hace mediante HTTP y esto se compone de dos partes:

URL

VERBO

¿Que es esto de GET?

Una petición a un servidor, o a una api, se hace mediante HTTP y esto se compone de dos partes:

Al pegar una url en el Chrome, hacemos un GET por defecto

Servidor

Cliente

Resumen

Resumen

URL

VERBO

Si la condición da true se mostrará en el DOM, si no...,
SE BORRARÁ DEL DOM

json -server