Scribd
Cargar
69 vistas69 páginas

Angular

Cargado por

Kimberly Cano cardona
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
69 vistas69 páginas

Angular

Cargado por

Kimberly Cano cardona
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 69

Angular

Frontend

INGENIERÍA INFORMÁTICA
UNIVERSIDAD DE CALDAS
Generalidades

Es un framework de JavaScript de código abierto escrito en TypeScript.

Google es la empresa que lo mantiene.

TypeScript define un conjunto de tipos de JavaScript, lo que permite que sea


más fácil de entender .
Arquitectura

● Módulos: Son una forma de organizar y agrupar código, un módulo puede


contener componentes, directivas, servicios y otras clases.
https://www.youtube.com/watch?v=FUXM-Qxvfqg
● Componentes: Es un elemento reutilizable, como una vista HTML, un
botón, una lista…

● Servicios: Es una clase con una funcionalidad específica que se utiliza


para compartir datos, funcionalidades entre diferentes componentes.
Instalación

● Node.js :
○ Es un entorno de ejecución multiplataforma en el lado del servidor basado en JavaScript
○ Permite establecer muchas conexiones al mismo tiempo, por ende no hay bloqueo de
procesos.
● npm:
○ Generador de archivos para gestionar el desarrollo con JavaScript en general. Genera un
archivo llamada package.json con metadatos del proyecto.
Verificación instalación
Instalación Angular

global Línea de comandos


Crear un Proyecto

1-

2-
Crear un Proyecto

3-

4-
Crear un proyecto

5-

6-
Crear un proyecto

7-
Extensiones
Extensiones
Correr el proyecto

cd nomina-empleado-front

ng serve -o

Parar el proyecto

CTRL C
Correr el proyecto
Terminal de Angular
Terminal en Angular
Terminal en Angular
package.json
Página de inicio
Crear un componente
Incluir un componente
Incluir un componente
Estilos sin framework de estilos
Estilos sin framework de estilos
Estilos sin framework de estilos
Estilos con framework bootstrap

npm i bootstrap
Estilos con framework bootstrap
Estilos con framework bootstrap
Actividad

Crear un componente Nav y adicionarlo.


Entidades (ng g class entities/empleado)
Trabajando con Entidades
Directivas
Directivas
Actividad
Servicios
Servicio
Servicio
Observable

Programación reactiva en Angular. En lugar de manejar los


eventos de manera imperativa, los Observables ofrecen una
forma declarativa de tratar con secuencias de eventos y datos
asíncronos.
Rutas
Rutas
Rutas
Rutas
Rutas
Rutas
Actividad

Crear la entidad nómina y su tabla correspondiente

Crear el servicio para nómina y mostrar toda la nómina


Modales
Formularios
Formularios
Enviar Datos al backend
Videos de apoyo

https://www.youtube.com/watch?v=rSEFTQwpmnQ

https://www.youtube.com/watch?v=o_HV_FCs-Z0&t=1597s

https://www.youtube.com/watch?v=HTivuXwS2-Y

https://www.youtube.com/watch?v=yOlaImDMaG8
Webgrafía

● https://www.simplilearn.com/tutorials/angular-tutorial/what-is-angular#:~
:text=Angular%20is%20an%20open%2Dsource,for%20developers%20to%2
0work%20with.
● https://docs.angular.lat/guide/setup-local
● https://openwebinars.net/blog/que-es-nodejs/

También podría gustarte