Directivas en AngularJS

Directivas en AngularJS: La pieza clave para el desarrollo modular

Cuando pensamos en Desarrollo Modular imaginamos piezas de código que se pueden reutilizar en distintas partes del proyecto sin necesidad de repetirlo, además de ser una manera muy fácil de poder realizar cambios y que estos queden reflejados en todas las secciones en los que fueron utilizados, nos ayuda a tener un código más entendible.

 

En teoría:

Tener un proyecto en módulos y llegar a plasmarlo en la realidad, son historias totalmente diferentes ya que en gran medida dependerán de la pericia del desarrollador y el conocimiento que se tenga de la tecnología utilizada. Este artículo es una breve introducción al manejo de las directivas de AngularJS.

 

Con el uso de las directivas se invita al programador a generar piezas de código que pueda usar de manera muy fácil en cualquier sección del proyecto, estas se utilizarán como si fueran etiquetas HTML, pero etiquetas personalizadas según lo considere el programador. Veremos más adelante que no solamente se limitan a etiquetas, también puede ser atributos y hasta comentarios.

 

Imaginemos que en nuestro sistema necesitamos mostrar una lista de usuarios, tendríamos:

– Nuestro controlador, con un servicio de usuarios inyectado.

– Dentro del controlador se solicitan los usuarios.

– Almacenamos en una variable del scope del controlador.

– En la vista se renderiza la información, muy probablemente con otra directiva muy popular ng-repeat.

 

Es bastante funcional y organizado.

 

Ahora, supongamos que la misma lista es necesaria mostrarla en otras dos secciones, y además el layout utilizado para el template junto con el estilo, crecen en complejidad.

 

Cada vez que se requiere hacer cambios sobre la lista de usuario, sea presentación o datos, inicia un proceso de búsqueda y actualización, que en el mejor de los casos puede ser simple como al que nos referimos en este momento.

 

En desarrollos complejos puede ser peligroso tener el mismo código repartido en varias secciones por lo que al sumar las directivas de AngularJS facilitaremos las futuras actualizaciones del sistema. El escenario ideal que buscamos, es tener todo el código relacionado a la lista de usuario centralizado, de esa manera solo debemos hacer los cambios necesarios en un archivo y el mismo se replicará en todas las secciones donde este es utilizado:

 

 

En práctica:

– Construiremos un ambiente básico con AngularJS

– El proyecto contará con 3 pantallas.

– En cada pantalla queremos mostrar un formulario de usuario.

– Haremos uso de las directivas para centralizar el formulario y mostrarlo en cada una de las pantallas.

 

Construcción de un nuevo proyecto:

1. Construye una carpeta nueva, coloca el nombre que prefieras.

2. Dentro, crea los archivos index.html y app.js

3. En el archivo index.html construye el código básico de un HTML e incluye el archivo app.js

4. Necesitaremos un pequeño servidor web, por lo que recomiendo tener instalado Node.js.

Una vez instalado Node.js en tu PC:

– Abre una nueva terminal, ve a la carpeta que creaste y ejecuta el comando: npm init

– Cuando finalice el inicializador ejecuta el comando: npm install connect serve-static

– Verifica con el explorador que la carpeta node_modules se haya creado.

– Crea un archivo server.js dentro del proyecto.

– Dentro del archivo server.js coloca el siguiente código: 
[]
1 Step 1

var connect = require('connect'); var serveStatic = require('serve-static'); connect().use(serveStatic(__dirname)).listen(8080, function(){ console.log('Server running on 8080...'); });

Previous
Next

– Para poner en marcha el servidor ejecuta el comando: node server.js

– En tu explorador favorito ve a la dirección:  localhost:8080

5. Incluye en tu archivo index.html el CDN para AngularJS
[]
1 Step 1

6. Por último verifica que el AngularJS esté funcionando correctamente.

 

Construcción de vistas (Git rama paso 1)

1. Dentro del proyecto construye tres carpetas (pantalla1, pantalla2, pantalla3).

2. Dentro de cada nueva carpeta genera dos nuevos archivos, uno para el controlador y otro para la vista correspondiente. (pantalla1 -> [pantalla1Ctrl.js, pantalla1.html] ).

3. En el index.html incluye los controladores para que sean accesibles.
[]
1 Step 1

<script src=”pantalla1/pantalla1Ctrl.js”></script>

Previous
Next

4. Codifica el controlador para que sea parte del módulo principal de tu app. (insertar código de controlador).

5. Codifica en cada vista un mensaje para identificar cada pantalla.

6. En el módulo principal define la configuración para definir las rutas a cada una de las nuevas pantallas.

7. En el index.html dentro de la etiqueta body define unos links para cada una de las nuevas rutas.

Importante: recuerda agregar las librerías angular-route y angular-resource.

El resultado de cada uno de esos pasos es lo que puedes observar en la rama paso 1, si ejecutas el servidor deberás tener en pantalla el título de la pantalla que colocaste por defecto en la línea de código “otherwise” dentro del configuración al momento de construir las rutas, y además unos link que te dejarán viajar entre pantallas.

 

Construcción de caso de estudio

1. Dentro de cada archivo pantalla#.html definiremos un típico formulario que nos servirá de base para la práctica.

2. Refresca el sitio, deberás ver el mismo formulario en las tres pantallas.

El resultado de los pasos anteriores es la rama paso 2. Con esto tenemos la base para ver el beneficio más básico que nos pueden entregar las directivas en AngularJS.

 

Definición de directiva

1. Al mismo nivel que el archivo app.js genera dos nuevos, example.directive.js y example.directive.html.

2. Incluye en el archivo index.html el acceso al archivo example.directive.js
[]
1 Step 1

<script src=”example.directive.js”></script>

Previous
Next

3. Dentro del archivo directive.example.js definiremos nuestra directiva.

4. Dentro del archivo example.directive.html coloca un mensaje de tu agrado.

5. En cada archivo pantalla#.html llamaremos la directiva con el siguiente formato <example-directive></example-directive>

Es muy importante acotar la diferencia entre el nombre de la directiva al momento de definirla y al momento de usarla. Para definir usaremos  lower camelCase ejemplo nombreDirectiva (sin espacios) la primera letra minúscula, las subsiguientes palabras serán diferencias con la primera letra en mayúscula; cuando vayamos a utilizar la directiva ya uno usaremos lower camelCase sino nombre-directiva.

 

El resultado de todos los pasos los puedes ver en la rama paso 3.

 

Uso de la directiva

1. Corta el formulario de cualquiera de los archivos pantalla#.html y pégalo en el archivo directive.example.html. (puedes borrar el mensaje para dejar solo el formulario).

2. Elimina el formulario en todos los demás archivos pantalla#.html y deja solamente la directiva <example-directive></example-directive>.

3. Refresca la página de tu proyecto y deberías seguir viendo el formulario en cada una de las pantallas.

El resultado de estos pasos lo puedes revisar con la rama paso 4.

 

Conclusión

 Revisamos los conceptos del desarrollo modular.

1. Conocimos las directivas, una herramienta que ofrece AngularJS para lograr un desarrollo modular en el front-end.

2. Construimos un ejemplo para ver las directivas en funcionamiento.

 

Carlos Natera
Carlos Natera
carlos@urbamapp.com