Paso 0: Estructura Proyecto
Las fuentes completas del proyecto (incluyendo las del back-end) se encuentran en el repositorio público en github llamado: Uniandes-isis2603/frontstepbystep. Este proyecto incluye dos módulos frontstepbystep/frontstepbystep-back/ que contiene las fuentes del proyecto back-end y el módulo frontstepbystep/frontstepbystep-web/ que es el proyecto que vamos a explicar en estos pasos.
El proyecto frontstepbystep/frontstepbystep-web/ contiene tanto la implementación de los servicios REST de la aplicación de book como los elementos del front-end propiamente dichos. Estos últimos están organizados dentro de la carpeta raíz frontstepbystep/frontstepbystep-web/src/main/webapp. La siguiente figura muestra la estructura del proyecto:
Dentro de Web Pages se encuentra el archivo principal de la aplicación, el primero que se va a cargar en el navegador: index.html
Al mismo nivel, la carpeta src contiene los módulos de la aplicación, la definición del módulo principal en el archivo app.js y la implementación de un interceptor http-interceptor.factory.html para manejar los errores, cuándo ocurren, de los llamados a los servicios REST.
La siguiente figura muestra el contenido de los módulos de la aplicación (el módulo reviews aparecerá en el paso-3):
Cada módulo contiene los archivos relacionados con su comportamiento: vistas, controladores y la definición del módulo.. El archivo principal del módulo se llama _xyz_.mod.js (books.mod.js) y su responsabilidad principal es configurar los estados del módulo.
Bower Components
Nuestra aplicación depende de varias librerías externas. Para manejar ordenadamente estas dependencias utilizamos la herramienta Bower:
| "Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you." |
|---|
Las dependencias de la aplicación frontstepbystep-web definidas en el archivo bower.json. En este archivo se define el nombre de la dependencia y su versión.
Instalar Bower
Para instalar bower se debe tener instalado previamente node.js y npm.js . Una vez que estas dos herramientas están instaladas, para instalar bowerejecute en una ventana del sistema el comando:
npm install-g bower
Configurar los archivos
.bowerrc: Contienen la ruta donde debe quedar el folder bower_components. En nuestro proyecto esta ruta es:
{
"directory": "src/main/webapp/bower_components"
}
bower.json: Contiene la información de las dependencias externas que el proyecto necesita (bootstrap, ui.router, angular, etc). En nuestro proyecto las dependneicas externas que se requieren son:
{ "name": "frontstepbystep",
"version": "1.0.0",
"main": "src/main/webapp/index.html",
"dependencies": {
"angular": "^1.5.8",
"bootstrap": "^3.3.7",
"angular-ui-router": "~0.2.14",
"angular-bootstrap": "^0.13.4"
},
"devDependencies": {}
}
.gitignore: Debe indicar que ignore la carpeta bower_components para que no lo suba al repositorio de git.
Descargar las dependencias desde Netbeans
Sobre el proyecto frontstepbystep-web click derecho y ejecute Bower Install. Esto descargará todas las dependencias contenidas en bower.json. Estas dependencias quedarán localizadas dentro de la carpeta bower_components.
Incluir las dependencias en index.html
<html>
<head>
...
<!-- Dependencias Externas -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
...
</head>
<body>
...
</body>
</html>