FECHA 10/06/2019 FECHA 14/06/2019
ACTIVIDAD N°: ENVIO: ENTREGA:
TEMA:
Introducción al Lenguaje Html y Javascript .
UNIDAD N° 2: DESARROLLO WEB EN ENTORNO CLIENTE
OBJETIVO:
Desarrollar una página web utilizando Angular y aplicando la
tendencia SPA.
PROBLEMA:
Elabore una Página web utilizando Angular y aplicando la
tendencia SPA. .
INDICADOR DE EVALUACION:
Análisis, conceptualización
TIPO DE ACTIVIDAD
LUGAR ALCANCE FORMA
□ Intraclase □Individual □Taller □Práctica en laboratorio
□ Extraclase □Grupal □Síntesis, esquemas □Práctica en clase
□Caso de estudio □Resolución de problemas,
CALIFICACIÓN
□Investigativa ejercicios
□Ensayo, artículo
□Vinculación con la colectividad
□Informe de exposición
ROLES Y RESPONSABILIDADES DE LOS PARTICIPANTES EN LA TAREA:
NOMBRE ESTUDIANTE ROL
Investigador
Investigador
TÉCNICAS EMPLEADAS
Investigación.
1. Introducción
Angular (comúnmente llamado "Angular 2+" o "Angular 2"), es un framework
para aplicaciones web desarrollado en TypeScript, de código abierto,
mantenido por Google, que se utiliza para crear y mantener aplicaciones web
de una sola página. Su objetivo es aumentar las aplicaciones basadas en
navegador con capacidad de Modelo Vista Controlador (MVC), en un
esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles.
La biblioteca lee el HTML que contiene atributos de las etiquetas
personalizadas adicionales, entonces obedece a las directivas de los
atributos personalizados, y une las piezas de entrada o salida de la página a
un modelo representado por las variables estándar de JavaScript.
Angular se basa en clases tipo "Componentes", cuyas propiedades son las
usada para hacer el binding de lo datos. En dichas clases tenemos
propiedades (variables) y métodos (funciones a llamar).
Angular es la evolución de AngularJS aunque incompatible con su
predecesor.
2. Objetivos
General
Desarrollar una página web utilizando Angular y aplicando la tendencia
SPA.
Especifico
Implementar la pagina web en un hosting.
Utilizar la tendencia SPA para la realización de la pagina web.
3. Marco Teórico
¿Por qué AngularJS?
“HTML es excelente para declarar documentos estáticos, pero falla cuando
intentamos usarlo para declarar vistas dinámicas en aplicaciones web.
AngularJS le permite ampliar el vocabulario HTML para su aplicación. El entorno
resultante es extraordinariamente expresivo, legible y rápido de desarrollar” [1].
Extensibilidad de Angular
“AngularJS es un conjunto de herramientas para crear el marco más adecuado
para el desarrollo de su aplicación. Es totalmente extensible y funciona bien con
otras bibliotecas. Cada función puede modificarse o reemplazarse para
adaptarse a su flujo de trabajo de desarrollo y necesidades de funciones únicas.
Sigue leyendo para saber cómo”.
El enlace de datos
El enlace de datos es una forma automática de actualizar la vista cuando cambia
el modelo, así como de actualizar el modelo cuando la vista cambia. Esto es
impresionante porque elimina la manipulación de DOM de la lista de cosas de
las que tiene que preocuparse.
Controlador
Los controladores son el comportamiento detrás de los elementos DOM.
AngularJS le permite expresar el comportamiento en una forma legible y limpia,
sin el habitual problema de actualizar el DOM, registrar devoluciones de llamada
o observar cambios en el modelo.
JavaScript simple
A diferencia de otros marcos, no es necesario heredar de tipos propietarios para
envolver el modelo en métodos de acceso. Los modelos AngularJS son objetos
de JavaScript antiguos y sencillos. Esto hace que su código sea fácil de probar,
mantener, reutilizar y nuevamente libre de repeticiones.
Crear componentes en Angular
Directivas
Las directivas son una característica única y poderosa disponible en AngularJS.
Las directivas le permiten inventar una nueva sintaxis HTML, específica para su
aplicación.
Componentes reutilizables
Utilizamos directivas para crear componentes reutilizables. Un componente le
permite ocultar la estructura compleja de DOM, CSS y el comportamiento. Esto
le permite concentrarse en lo que hace la aplicación o en cómo se ve la aplicación
por separado.
Localización
Una parte importante de las aplicaciones serias es la localización. Los filtros y
las directivas de derivación de la configuración regional de AngularJS le brindan
elementos básicos para que su aplicación esté disponible en todas las
configuraciones regionales.
Navegación, formas y backends
Vinculación profunda
Un enlace profundo refleja dónde está el usuario en la aplicación. Esto es útil
para que los usuarios puedan marcar y enviar por correo electrónico enlaces a
ubicaciones dentro de la aplicación. Las aplicaciones de ida y vuelta obtienen
esto automáticamente, pero las aplicaciones AJAX por su naturaleza no lo
hacen. AngularJS combina los beneficios de la vinculación profunda con el
comportamiento de una aplicación de escritorio.
Validación de formularios
La validación de formularios del lado del cliente es una parte importante de una
excelente experiencia de usuario. AngularJS le permite declarar las reglas de
validación del formulario sin tener que escribir código JavaScript. Escribe menos
código, ve a tomarte cerveza antes.
Comunicación del servidor
AngularJS proporciona servicios integrados sobre XHR, así como varios otros
backends que utilizan bibliotecas de terceros. Las promesas simplifican aún más
su código al manejar el retorno asíncrono de los datos.
Probabilidad incorporada
Inyectable
La inyección de dependencia en AngularJS le permite describir de forma
declarativa cómo se cablea su aplicación. Esto significa que su aplicación no
necesita ningún main() método que suele ser un desorden que no se puede
mantener. La inyección de dependencia es también un núcleo para AngularJS.
Esto significa que cualquier componente que no se ajuste a sus necesidades
puede ser reemplazado fácilmente.
Comprobable
AngularJS fue diseñado desde cero para ser comprobable. Fomenta la
separación de la vista de la conducta, viene preinstalado con simulacros y
aprovecha al máximo la inyección de dependencia. También viene con un
corredor de escenarios de extremo a extremo que elimina la descamación de la
prueba al comprender el funcionamiento interno de AngularJS.
4. Desarrollo
Instalación de Angular.
Verificación del Angular instalado.
Link de la pagina web: https://ligapro-71c21.web.app/#/home
Ventana de Inicio.
Ventana de Equipos.
Ventana por equipos.
Ventana de Acerca.
Buscador.
5. Conclusiones
HTML es excelente para declarar documentos estáticos, pero falla
cuando intentamos usarlo para declarar vistas dinámicas en
aplicaciones web.
ngularJS le permite ampliar el vocabulario HTML para su aplicación.
El entorno resultante es extraordinariamente expresivo, legible y
rápido de desarrollar..
6. Bibliografía.
[1] AngularJS, «angularjs.org,» [En línea]. Available: https://angularjs.org/. [Último acceso: 14
Junio 2019].
