Taller 1: Despliegue básico de listas
| URL: | https://github.com/Uniandes-isis2603/sportcenter.git |
|---|---|
| Release: | git checkout -f taller-1 |
Objetivos
Se espera que al final de este taller el estudiante esté en capacidad de:
- Explicar del framework angularJS lo básico sobre Vista, Controlador, Modelo y Scope para desarrollar las aplicaciones web.
- Implementar requerimientos básicos de despliegue de información en una aplicación Web, utilizando angularJS.
- Implementar despliegues básicos en la aplicación web para las entidades de trainers y sportcenters.
En el paso-1 de frontstepbystep se implementó el requerimiento de desplegar la lista de libros en una galería, la lista de autores en una lista simple y la lista de editoriales en una lista simple.
Para este taller usted debe basarse en el paso-1 y realizar lo siguiente:
- Clonar el repositorio que haya sido asignado por su profesor.
- Realizar los pasos del taller 1.
- Subir al repositorio el código y screenshots de su aplicación funcionando en formato PNG.
A continuación puede ver el diagrama de clases que representa la aplicación que usted va a trabajar a lo largo de los talleres.
Taller 1
- Ejecutar sportcenter.
- Colecciones.
- Crear lista simple para trainers.
- Crear lista simple para sportcenters.
- Subir cambios y hacer release.
1. Ejecutar sportcenter.
Una vez que haya clonado el taller 1 ejecútelo siguiendo los pasos:
- Clean and build sobre el proyecto padre llamado sportcenter.
- Una vez se ejecute debería ver en el output la construcción exitosa.
- Sobre el proyecto sportcenter-web click derecho Bower Install.
- Una vez se ejecute debería ver en el output la descarga exitosa de las dependencias que necesita el FrontEnd.
- Sobre el proyecto sportcenter-web click derecho Run.
- Verifique que aparece el listado de sports.
2. Colecciones
En este taller se usan colecciones en formato JSON JavaScript Object Notation para mostrar la información asociada a los sports, trainers y sportcenters.
En la ruta sportcenter-web/WebPages/data/trainers.json encuentra la información correspondiente a los trainers que se va a mostrar en la lista simple.
La estructura que se sigue es id y name como se observa en la siguiente imagen.
3. Crear lista simple para trainers.
Después de realizar las instrucciones debería mostrarse la lista simple para trainers como la siguiente la imagen.
- Crear en la ruta src/modules/ la carpeta que contendrá los archivos asociados al nuevo módulo. Recuerde nombrarla como trainers.
Crear el módulo en la carpeta de trainers con el nombre trainers.mod.js. Dentro del módulo, cree un estado asociado a la lista de los trainers.
Crear un controlador y un template para el despliegue de la lista de los trainers asociados al estado.
Crear el controlador correspondiente con el nombre trainers.crtl.js. Verifique que el nombre que le da al controlador sea el mismo que definió en el estado de listar.
Crear el template correspondiente con el nombre trainers.list.html
Una vez haya desarrollado los 3 archivos correspondientes al módulo su carpeta debería parecer como la siguiente imagen.
Incluir el módulo trainers en el app.js.
Incluir en el index.html el menú que se mostrará una vez se ejecute la aplicación.
- Incluir los scripts asociados al módulo trainers.
3. Crear lista simple para sportcenters.
Para este paso realice las instrucciones de Crear lista simple para trainers.
4. Subir cambios y hacer release.
En este último paso debe subir los cambios al repositorio, el nombre del commit y release debe ser "taller-1".