JAVA ANGULAR - CURSO JAVASCRIPT AVANZADO
- 1. Dr. Ing. Cesar Hernan PATRICIO PERALTA JAVA SCRIPT AVANZADO SEMANA 07
- 2. LOGRO GENERAL: Al finalizar el curso el alumno aplica los frameworks de lenguaje de secuencias de comando a través del uso del paradigma orientado a objetos para solucionar problemas mediante el uso de páginas web. LOGRO ESPECIFICO DE LA SESIÓN: Al finalizar la unidad el participante aplica los frameworks NodeJS y Angular en la generación de soluciones web.
- 3. ¿Qué es AngularJS? También conocido como AngularJS es un framework MVC (Modelo Vista Controlador), desarrollado por Google para el Desarrollo Web Front End que permite crear aplicaciones SPA (Single-Page Applications) sin despeinarnos. Al usar un patrón MVVM (model view view-model) separamos la lógica de la de diseño pero mantenemos ambas partes conectadas (data binding). De manera que la capa visual no sabe lo que está pasando en la capa lógica pero manteniendo control sobre el DOM (el cuerpo de la web) y actualizar su contenido como queramos.
- 4. ¿Qué ventajas ofrece AngularJS? • Tal como comentaba antes, unas cuantas. Aunque quizá si acabas de llegar al mundillo del desarrollo o simplemente estás aquí por curiosidad igual te he liado un poco. Lo mejor es que te enumere las principales ventajas de desarrollar en AngularJS y no en JavaScript.
- 5. Angular es un framework MVW para frontend
- 6. Directivas de Atributos y Estructurales Crea una aplicación web simple que contenga cuatro botones interactivos. Utiliza directivas de atributo para que cada botón ejecute las siguientes acciones al hacer clic: • El primer botón debe cambiar el color del texto a rojo. • El segundo botón debe cambiar el color del texto a azul. • El tercer botón debe cambiar el color del texto a verde. • El cuarto botón debe cambiar el tamaño del texto. Los cambios deben ser dinámicos y visibles en tiempo real al interactuar con los botones. Utiliza la directiva click para vincular los eventos de los botones con las respectivas acciones.
- 7. Plagio - Parte 1
- 8. Plagio - Parte 2
- 9. Crea una lista desplegable (select) con varias opciones de colores. Usa una directiva estructural para mostrar un mensaje específico dependiendo del color seleccionado, como "Has seleccionado rojo", "Has seleccionado azul", etc. Ejercicio 1
- 12. Plagio - Versión Angular js
- 13. Crea un input de texto y un botón que, al hacer clic, verifique cuántos caracteres tiene el texto ingresado. Usa una directiva estructural para mostrar un mensaje diferente dependiendo de si el texto tiene más de 10 caracteres o no. Ejercicio 2
- 15. Plagio - Versión Angular js
- 16. Crea una lista de productos y un campo de búsqueda. Usa una directiva estructural para mostrar solo los productos que coincidan con el texto ingresado en el campo de búsqueda, actualizando la lista en tiempo real. Ejercicio 3