Es importante que todos utilicemos la misma versión en todo en el proyecto.
Si es
posible, recomendamos usar la siguiente versión, sino acordamos una versión:
Para instalar Angular, ejecuta el siguiente comando: npm i -g @angular/cli.
Durante la instalación, aparecerán algunos mensajes, pero puedes continuar presionando "Y" para aceptar.
Una vez instalado, abre el archivo [Link] y busca las secciones de styles y scripts. Ahí, agrega las
siguientes rutas para incluir Bootstrap:
"node_modules/bootstrap/dist/css/[Link]" // Para el CSS
"node_modules/bootstrap/dist/js/[Link]" // Para el JS
En Visual Studio Code, asegúrate de instalar la extensión de Angular para
mejorar la experiencia de desarrollo.
Para iniciar el proyecto, usa el siguiente comando: ng serve
Este comando está definido en el archivo [Link].
Además, dejo los comandos para generar los módulos, en caso de que los necesiten. Para crear un módulo,
usa: ng g m nombre. Si deseas crear un módulo dentro de una carpeta específica, usa: ng g m
carpeta/nombre. En Angular, un módulo agrupa funcionalidades relacionadas, como componentes, servicios
y otras configuraciones.
Para cada módulo, incluí la opción de agregar un routing (para manejar las rutas). Si no lo necesitas,
puedes eliminarlo. El comando para generar un módulo con routing es: ng g m nombre –routing. El Routing
permite navegar entre diferentes páginas de la aplicación sin necesidad de recargar toda la página.
Para generar componentes, usa el siguiente comando: ng g c nombre. Este comando creará cuatro
archivos: html, scss, ts, y [Link] (para pruebas). Un componente es la unidad básica de la interfaz de
usuario en Angular.
Si en algún momento deseas omitir pruebas o archivos adicionales, puedes usar los siguientes comandos:
Para generar un módulo sin pruebas y con routing: ng g m nombre --routing --skip-tests
Para generar un componente sin archivos de pruebas, estilo o plantilla: ng g c nombre --skip-tests --inline-
style --inline-template
Para generar un servicio sin archivos de pruebas: ng g s nombre --skip-tests.
En el archivo [Link], es recomendable eliminar todo el contenido y dejar únicamente la
siguiente línea: <router-outlet></router-outlet>
Esto permitirá que Angular cargue dinámicamente los componentes según las rutas definidas en la
aplicación.
El archivo [Link] se encarga de definir las rutas principales de la aplicación. Estas rutas determinan
qué módulo o componente se carga al acceder a una determinada URL en el navegador. Puedes modificar
las rutas para personalizar la navegación, por ejemplo, definiendo que una página sea accesible desde
localhost:4200/nombre.
En Angular, loadChildren y redirectTo son dos propiedades clave en la configuración de rutas. loadChildren
permite la carga diferida (lazy loading) de módulos, lo que significa que un módulo solo se carga cuando el
usuario accede a su ruta correspondiente. Esto mejora el rendimiento de la aplicación al reducir el tamaño
del paquete inicial. redirectTo permite redirigir automáticamente al usuario cuando accede a una ruta
específica. Por ejemplo, cuando un usuario accede a [Link]/nombre, Angular carga dinámicamente
el módulo nombre en ese momento, evitando que se cargue innecesariamente al inicio de la aplicación.
Cuando el usuario accede a la raíz del sitio (/), es redirigido automáticamente a
[Link]/usuarios/inicio.
La estructura del proyecto está organizada en módulos, cada uno con su respectivo rutas.
En el archivo [Link], se configuran las rutas principales de la aplicación. Para cada módulo, se define
un path y se usa loadChildren para aplicar lazy loading. Esto significa que los módulos solo se cargarán
cuando el usuario acceda a sus respectivas rutas, mejorando el rendimiento de la aplicación.
Por ejemplo, la ruta del módulo de usuarios se configura de la siguiente manera: { path: 'usuarios',
loadChildren: () => import('./usuarios/[Link]').then(m => [Link]) }
Cuando un usuario accede a [Link] Angular carga dinámicamente el módulo
UsuariosModule. Dentro de este módulo, las rutas específicas se configuran en usuarios-
[Link].
Si se desea que un usuario acceda directamente a la página de inicio dentro del módulo de usuarios, la
configuración de rutas quedaría así: { path: 'inicio', component: InicioComponent }
Con esta configuración, al ingresar a [Link] Angular renderiza el
componente InicioComponent.
Para facilitar la reutilización de componentes en distintos módulos, se crea un módulo compartido
([Link]). En este módulo, se importan y exportan componentes comunes, evitando la
necesidad de importarlos manualmente en cada módulo que los requiera.
Si un módulo necesita estos componentes, en lugar de importarlos individualmente, solo debe importar
SharedModule.
En el HTML, los componentes reutilizables se insertan mediante su selector que aparece en los ts. Para
agregar el navbar en la página de inicio, se usa: <app-navbar-i></app-navbar-i>
Esto permite utilizar el mismo navbar en distintas páginas sin necesidad de modificarlo cada vez.
En Angular, los servicios (Services) permiten manejar la lógica de negocio y la comunicación con APIs de
manera centralizada y reutilizable. Esto evita la repetición de código en cada componente y facilita la gestión
de datos en la aplicación.
Un servicio en Angular se crea con el siguiente comando: ng g s nombre
Este servicio se usa para interactuar con una API, realizando operaciones como GET, POST, PUT y
DELETE.
Para configurar la URL de la API, se usa el archivo [Link]. Esto permite cambiar la dirección de la
API según el entorno (desarrollo o producción).