Proyecto HeroesApp del curso "Angular: Decero a experto (Edición 2021)".
Esta aplicación muestra el manejo de Rutas hijas y LazyLoad y como utilizar Angular Material.
- Modularización de la aplicación
- Instalacion Angular Material - Angular Material
- Módulo especializado para módulos de PrimeNG
- Rutas Hijas,
- Rutas Principales,
- LazyLoad
- Multiples estilos en la misma SPA.
- Angular Material
- Interfaces y tipado
- Pipes personalizados
- Variables de entorno
- Autocomplete de AngularMaterial
- Peticiones HTTP
- JSON-Server
- Angular Flex y Flexbox
- CRUD
- Create
- Read
- Update
- Delete
- Pipes puros e impuros
- Snacks
- Dialogs
- Inyección de servicios manualmente
- Protección de rutas
- Rutas privadas
- Rutas públicas
- Servicio de autenticación
- Guards
- CanActivate
- Can Load
- Mantener la sesión del usuario
Ejecutarng serve
para el servidor de desarrollo. Navegar a http://localhost:4200/
. La aplicación será automaticamente recargada si se realizan cambios en el código fuente.
Para simular el servidor backend se utiliza el paquete JSON Server.
Para instalar el JSON server se debe ejecutar el siguiente comando:
npm install -g json-server
La base de datos db.json
debe tener la siguiente estructura:
{
"usuarios": [
{
"id": 1,
"usuario": "John Doe",
"email": "john.due@gmail.com"
}
],
"heroes": [
{
"id": "dc-batman",
"superhero": "Batman",
"publisher": "DC Comics",
"alter_ego": "Bruce Wayne",
"first_appearance": "Detective Comics #27",
"characters": "Bruce Wayne"
}
]
}
Para ejecutar el servidor, dentro de la carpeta donde se encuentra el archivo db.json
, se debe ejecutar el siguiente comando:
json-server --watch db.json