ARQUITECTURA DE ANGULAR
Este apartado nos muestra cada uno de los directorios y ficheros de angular; ayudándonos a comprender para que sirven y cual es su característica principal.
Este apartado nos muestra cada uno de los directorios y ficheros de angular; ayudándonos a comprender para que sirven y cual es su característica principal.
DIRECTORIOS:
Hemos desarrollado una guia completa para la estructura de los proyectos realizados en Lider Tech; nos ayudará a esquematizar mejor las aplicaciones. A continuación se presentan todas los directorios que debemos tener y sus detalles.
COMENZAREMOS CON LOS DIRECTORIOS QUE VAN DENTRO DE APP
assets: fuentes en iconos estáticos.
auth: autenticacion, autorizador, enum, colecciones.
components: componentes reusables.
config: instancias para cualquier infraestructura GCO, Firebase, AWS, etc.
core: servicios y enums de lógica de negocio.
css: archivos de estilos personalizados css puro.
global: para signals globales (estados) de la app.
interfaces: modelos del proyecto.
tools: servicios y enum de utilidad completos.
views: para vistas dentro admin y pages.
mkdir assets auth components config core css global interfaces global interfaces tools views
ANIMACIONES
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Myapp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!------------------- ANIMACIONES AOS & ANIMATE CSS ----------------------->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<!------------------- ANIMACIONES AOS & ANIMATE CSS ----------------------->
</head>
<body>
<app-root></app-root>
<!------------------- ANIMACIONES AOS & ANIMATE CSS ----------------------->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>AOS.init();</script>
<!------------------- ANIMACIONES AOS & ANIMATE CSS ----------------------->
</body>
</html>
INSTALACIÓN DE BIBLIOTECAS DE ANIMACIONES CSS:
PROVEEDORES:
https://michalsnik.github.io/aos/ ( OJO - Esta biblioteca requiere agregar CSS y JS )
Ambas bibliotecas se cargarán por CDN en el Index de la App.
INSTALACIONES NPM
npm install firebase: instala la biblioteca de funciones para interactuar con firebase sin usar anfular/fire.
npm install -g firebase-tools: instala la biblioteca de funciones de la CLI de firebase.
ng add @angular/material : instala la biblioteca de componente UI de Angular Material.
ng add @angular/pwa : convierte nuestra en en instalable en dispositivos.
routes.ts
Es el encargado de gestioar todas las ruta de nuestra aplicación, simplificando la configuración de la navegación.
Es importante destacar que el archivo de rutas debe verse asi:
Contiene: importaciones de componentes, array de rutasy exportacion de toda la configuración para que pueda ser usado en todas la app.
NOTA IMPORTANTE: CADA OBJETO DE RUTA DEBE TENER 3 ELEMENTOS:
1 PATH: ES LA RUTA QUE SE PRESENTARÁ
2. COMPONENT: ES EL COMPONENTE QUE SE PRESENTARÁ AL IR A UNA RUTA
3. TITLE: ES EL TITULO QUE SE PRESENTARÁ EN LA PESTAÑA SUPERIOR DEL NAVEGADOR.
import { Routes } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import {DetailComponent} from "./detail/detail.component";
const routeConfig: Routes = [
{
path:'',
component: HomeComponent,
title: 'Home Page'
},
{
path: 'detail',
component: DetailComponent,
title: 'Detail Page'
},
{
path: 'detail/:id',
component: DetailComponent,
title: 'Detail Page'
}
]
export default routeConfig;
app.config.ts
Es el encargado de gestioar todas las ruta de nuestra aplicación, simplificando la configuración de la navegación.
Es importante destacar que el archivo de rutas debe verse asi:
Contiene: importaciones de componentes, array de rutasy exportacion de toda la configuración para que pueda ser usado en todas la app.
NOTA IMPORTANTE: CADA OBJETO DE RUTA DEBE TENER 3 ELEMENTOS:
1 PATH: ES LA RUTA QUE SE PRESENTARÁ
2. COMPONENT: ES EL COMPONENTE QUE SE PRESENTARÁ AL IR A UNA RUTA
3. TITLE: ES EL TITULO QUE SE PRESENTARÁ EN LA PESTAÑA SUPERIOR DEL NAVEGADOR.
import { Routes } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import {DetailComponent} from "./detail/detail.component";
const routeConfig: Routes = [
{
path:'',
component: HomeComponent,
title: 'Home Page'
},
{
path: 'detail',
component: DetailComponent,
title: 'Detail Page'
},
{
path: 'detail/:id',
component: DetailComponent,
title: 'Detail Page'
}
]
export default routeConfig;
main.ts
¿Qué hace el archivo main.ts?
Punto de entrada de la aplicación: Es el primer archivo que se ejecuta cuando lanzamos nuestra aplicación Angular.
Bootstrap de la aplicación: Se encarga de iniciar el módulo raíz de nuestra aplicación, que es el módulo principal desde donde se cargarán todos los demás módulos.
Compilación y renderizado: Inicia el proceso de compilación y renderizado de los componentes y plantillas de nuestra aplicación, transformando el código TypeScript en código JavaScript que el navegador puede entender.
En resumen, main.ts es el corazón de nuestra aplicación Angular, el encargado de poner todo en marcha.
FIREBASE:
Es el directorio de todos los servicios de Firebase, incluye un servicio llamado getService que es el encargado de instanciar todos los servicios de firebase que usaremos en nuestras apps angular, dicho getService se encargará de inicializar la app e instanciar todos los servicos de firebase.
Aqui mostramos los paso de su creación y su repositorio de código completo.
Sigue el Link: