Ha llegado la hora de hablar de lo técnico. En esta entrega veremos como configurar requirejs en nuestra aplicación angular (ya habrá tiempo para la compilación, minización y los tests). Paso a paso iremos viendo y explicando partes del código. El ejemplo completo puede descargarse desde github.
P.D.: Ojo! Esta parte aborda solo lo que a la configuración se refiere. La aplicación resultante no es funcional!
Hay que decir que hay bastantes ejemplos y proyectos de prueba que muestran como integrar los dos frameworks. Este seed-project de apiumtech se parecerá a todos ellos, pero al mismo tiempo es muy diferente. Esto es porque los hemos probado todos, hemos escogido las mejores partes de cada uno de ellos y hemos añadido las piezas que nos parecía que hacían falta. Como consecuencia, desde nuestro humilde punto de vista, tenemos la integración mas sencilla, el código mas manejable y lo que es mas importante, comprensión mas rápida y fácil de como hacerlo funcionar XD
Lo primero que tenemos que hacer es irnos a la pagina de requirejs y bajarnos el framework. Es solamente un archivo, el cual habrá que colocar en un directorio dentro de nuestra aplicación angular (visible desde el servidor donde la corremos). Cada uno tendrá su estructura de aplicación. La que proponemos nosotros es igual de valida que cualquiera que podáis tener. Pero para facilitar el seguimiento de la explicación, aquí se va a utilizar de la siguiente manera:
app /
—– js /
——– app.js
——– controllers.js
——– services.js
——– filters.js
— lib /
——– angular /
——– jquery /
——– requirejs /
——————- main-dev.js
——————- requirejs.js
—partials /
—index.html
Hay directorios y archivos que se han omitido para no ocupar demasiado espacio. Este esquema es puramente orientativo.
Estamos a punto de empezar con los cambios. Lo malo es que no puedes probar si lo estas haciendo bien hasta que hayas acabado. Asi que tened cuidado e ir despacio. El porqué es que cada uno de los archivos javascript que vayamos a picar o que hayamos picado, pasara a ser un modulo de requirejs. Por lo que ademas de cambiarlo, luego lo tendremos que “requerir” correctamente.
Para los que quieren controlarlo todo y saber como funciona, seria bueno que entrarais en la pagina de requireJS y mirarais las diferente maneras de definición de módulos que tiene. Para los que no, simplemente hacernos caso 🙂
Ahora que no se os olvide hacer commit, que empezamos!!!
Lo primero que cambia es el index.html. Quitamos todos los que teníamos para incluir librerías javascript. Lo único que necesitamos es incluir requirejs. Él ya se encargará de cargar todo lo demás. Mola, a que si? Un index bastante más limpio y encima, controlamos las dependencias! Tranquilos que esto no ha hecho nada mas que empezar…
[code language=”html”]
<script type=”text/javascript”
src=”lib/requirejs/requirejs.js”
data-main=”lib/requirejs/main-dev”>
</script>
[/code]
Como se ve, incluimos la libreria de require y, gracias al atributo “data-main”, require sabe que tiene que cargar el “main-dev.js”.
En el archivo “main-dev” es donde pasa toda la magia. Este se encarga de definir los paths, las dependencias y es el reponsable de lanzar nuestra app de angular. Aquí tenemos el ejemplo del seed-project:
[code language=”javascript”]
//main-dev.js
requirejs.config({
baseUrl: ‘./’,
paths: {
app: ‘js/app’,
jquery: “lib/jquery/jquery-1.10.2.min”,
angular: “lib/angular/angular”,
“angular-resource”: “lib/angular/angular-resource”,
“angular-route”: “lib/angular/angular-route”,
controllers: “js/controllers/”,
services: “js/services/”,
filters: “js/filters/”
},
shim: {
“angular”: {
deps: [“jquery”],
exports: “angular”
},
“angular-resource”: {
deps: [“angular”]
},
“angular-route”: {
deps: [“angular”]
}
}
});
requirejs([
“app”
]);
[/code]
Miremos primero la parte de configuración de require. Aquí definimos la “baseUrl”, o sea, la url base de donde parten todos los demás paths. En “paths” definimos los alias que necesitamos para nuestra aplicación, para no tener que escribir todo el nombre del directorio.
La parte de “shim” gestiona los modulos y las dependencias. En el ejemplo se puede observar como “angular” necesita de jquery, pero a su vez, como todos los módulos dependen de él, lo exportamos y luego lo requerimos.
Por ultimo, con el comando “requirejs([‘app’])” lanzamos la aplicación.
Hasta aquí la configuración, ahora toca remangarse y ponerse a meter los módulos de angular dentro de los de require 🙂
