Scribd
Cargar
61 vistas18 páginas

S2 - Presentación Angular

Este documento describe la arquitectura de aplicaciones Angular. Explica que Angular es un framework para construir aplicaciones web front-end usando componentes organizados en módulos. También describe la arquitectura de una Single Page Application y cómo difiere del modelo tradicional de sitios web, además de explicar el ciclo de vida de ambos modelos. Finalmente, propone un caso práctico para crear una aplicación básica en Angular.

Cargado por

Ivan Acosta
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 PPTX, PDF, TXT o lee en línea desde Scribd
61 vistas18 páginas

S2 - Presentación Angular

Este documento describe la arquitectura de aplicaciones Angular. Explica que Angular es un framework para construir aplicaciones web front-end usando componentes organizados en módulos. También describe la arquitectura de una Single Page Application y cómo difiere del modelo tradicional de sitios web, además de explicar el ciclo de vida de ambos modelos. Finalmente, propone un caso práctico para crear una aplicación básica en Angular.

Cargado por

Ivan Acosta
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 PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 18

Arquitectura de

aplicaciones Angular
Sesión 2
Resultado de aprendizaje

• Reconoce la arquitectura de una aplicación en Angular.


Contenidos o temas

• Arquitectura Angular
• Arquitectura de un SPA ( Single Page Application)
• SPA vs. App Tradicional
• Ciclo de vida
Arquitectura Angular

• Angular es un framework para


construir aplicaciones web
Front-End.
• Los bloques de construcción
básicos del marco angular son
componentes angulares que
están organizados en
NgModules.

Recuperado de
https://dev.to/vanessamarely/arquitectura-en-angular-5c23
Arquitectura SPA ( Single Page Application)

• Es una aplicación web o es un


sitio web que cabe en una sola
página con el propósito de dar
una experiencia más fluida a
los usuarios, como si fuera una
aplicación de escritorio.

Recuperado de https://gearheart.io/articles/pros-and-cons-
building-single-page-applications-2019/
Arquitectura SPA ( Single Page Application)
• Observa el siguiente ejemplo:

Recuperado de https://codelabs.developers.google.com/codelabs/making-a-single-page-
app-search-friendly#1
Arquitectura SPA ( Single Page Application)
• Observa la estructura de una página single page application (SPA) y una estructura
web tradicional:
SPA vs. App Tradicional

Aplicaciones web tradicionales Single Page Application


∙ Los requisitos del lado del cliente ∙ Su aplicación debe mostrar una
de su aplicación son básicos o interfaz de usuario dinámica con
solo de lectura. muchas características.
∙ Su aplicación debe funcionar en ∙ La aplicación debe funcionar en
navegadores sin compatibilidad navegadores que soporten
con JavaScript. JavaScript.
∙ El equipo de desarrollo no está
∙ El equipo de desarrollador cuenta
familiarizado con las técnicas de
con experiencia con el desarrollo
desarrollo de JavaScript o
de JavaScript o TypeScript.
TypeScript.
Ciclo de vida
• Observa el ciclo de vida de una página tradicional y de una SPA:

Recuperado de https://juanda.gitbooks.io/webapps/content/spa/arquitectura_de_un_spa.html
Crea una aplicación
Caso o reto a
resolver
básica en Angular
Recurso del caso
Para realizar esta actividad, primero observa el siguiente
video, donde se explica cómo crear un nuevo proyecto en
Video angular en Visual Studio Code, usando la herramienta CLI de
Angular.

Video:
Key Code. (28 de agosto de 2020). Crear nuevo proyecto en
Angular + Visual Studio Code [Archivo de video]. Youtube.
https://www.youtube.com/watch?v=zLPxc9CsmFo
Indicaciones para realizar la actividad

Para desarrollar esta actividad, ten en cuenta lo siguiente:

• Crea una página web responsiva en Angular.


• Utiliza HTML5 y CCS3 para el diseño de la página.
• Puede considerar Bootstrap como biblioteca para el diseño de
la página.
• En la siguiente diapositiva, se muestra el diseño que debe
tener la página.
Indicaciones para realizar la actividad
Presentación y
sustentación de equipos
Ideas clave
Para finalizar, recordemos lo aprendido en esta sesión:

1. La forma más sostenible de hacer que el negocio tenga éxito en la


era digital competitiva y acelerada de hoy es crear sitios web y
aplicaciones centrados en el usuario. Una plataforma en línea es
importante para que su negocio sea reconocido entre los
usuarios.

2. Las aplicaciones web de una sola página son un enfoque de


diseño con HTML5 y navegadores modernos para cambiar la
lógica de la página y la interfaz de usuario del servidor al
navegador en menos tiempo.
Ideas clave

3. La arquitectura de aplicación de una sola página separa


los servicios de desarrollo front-end y back-end. Con esta
configuración los desarrolladores pueden crear, probar e
implementar el front-end de forma independiente.
“Un buen desarrollador de software
trabaja con disciplina y constancia
desde el primer día”.
Omar Bradley

También podría gustarte