lunes, 14 de abril de 2014

Introducción a AgularJS y Bootstrap


Llevo bastante tiempo queriendo hacer un mini manual de cómo poner en marcha una app web con AngularJS y Boostrap, pero antes, deberíamos entender qué es  cada cosa y para que sirve.

Como bien nos dice la Wikipedia, “AngularJS es un framework de JavaScript de código abierto, mantenido por Google, que ayuda con la gestión de lo que se conoce como aplicaciones 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.”

NOTA: Para los que no sepáis que es el modelo vista controlador os dejo un enlace a la Wikipedia.

Por otro lado, Bootstrap es el framework de Twitter que permite crear interfaces web con CSS y JavaScript de forma que la interfaz se adapta dependiendo del tamaño del dispositivo en el que se visualice.

En parcas palabras, AngularJS nos pemite crear aplicaciones web con HTML y JavaScript rápidamente y de lo más sencillo y Boostrap nos ayuda a que sea bonita y no tengamos que “comernos el coco” en como mostrarla según la resolución de pantalla.

Y que mejor forma de verlo que con un ejemplo.

Creación del proyecto

Crearemos un proyecto web con Eclipse llamado DemoAngularJS siguiendo el correspondiente manual.

A continuación, nos descargaremos los archivos de Boostrap de su web http://getbootstrap.com. A día de hoy, la versión más reciente es la 3.1.1 y si ha subido de versión y quereis usar la misma que yo en mi ejemplo, podéis descargar una copia de seguiridad de aquí.

Una vez descomprimido el directorio, en nuestro proyecto crearemos una carpeta dist dentro de war y copiaremos el directorio descomprimido de Boostrap en esa carpeta.

Ahora haremos lo mismo con AngularJS, el cual nos descargaremos de su web http://angularjs.org. La versión estable actual es la 1.2.16 que la descargaremos del siguiente link o de la copia de seguridad que suelo tener aquí.

Hacemos lo mismo: descomprimimos el zip y lo copiamos en nuestra recién creada carpeta dist.

1

Ya solo nos queda comenzar a trabajar.

Configuración del archivo HTML para usar Boostrap


Abriremos nuestro archivo index.html que se generó por defecto al crear el proyecto.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Hello App Engine</title>
  </head>

  <body>
    <h1>Hello App Engine!</h1>
        
    <table>
      <tr>
        <td colspan="2" style="font-weight:bold;">Available Servlets:</td>       
      </tr>
      <tr>
        <td><a href="demoangularjs">DemoAngularJS</a></td>
      </tr>
    </table>
  </body>
</html>

A este documento le cambiaremos el titulo y en la cabecera le añadiremos las hojas de estilo de Boostrap.

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Demo AngularJS & Boostrap</title>
   
    <!-- Bootstrap -->
    <link href="dist/bootstrap-3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
   
  </head>

Al final del cuerpo del documento indicaremos las referencias a los JavaScript que utiliza Boostrap.

    (…)
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="dist/bootstrap-3.1.1/js/bootstrap.min.js"></script>
  </body>

Al final del cuerpo del documento indicaremos las referencias a los JavaScript que utiliza Boostrap.

Y ya podremos comenzar a usar los componentes de este framework.

Por ejemplo, un botón:

<button class="btn btn-primary">Ejemplo de boton</button>


Configuración del archivo HTML para usar AngularJS 

Lo primero que haremos será incluir los scripts necesarios al pie del cuerpo del documento para poder usar AngularJS:

    <script type="text/JavaScript" src="dist/angular-1.2.16/angular.min.js"></script>
    <script type="text/JavaScript" src="dist/angular-1.2.16/angular-resource.min.js"></script>
  </body>

A continuación, cambiaremos el tag <html> para indicar que se trata de una aplicación AngularJS cuyo nombre será demoApp y el controlador de la página DemoCtrl.
<html xmlns:ng="http://angularjs.org" lang="en" ng-app="demoApp" ng-controller="DemoCtrl">

Si lo ejecutamos ahora, evidentemente nos devolverá un error, al no encontrar ni el controlador de la página (DemoCtrl) ni el de la aplicación.



Deberemos pues de crear ambos scripts y hacer referencia en el documento. Para ello, creamos un directorio assets/js con el contenido de nuestros scripts. En concreto creamos el fichero app.js que contendrá el script de la aplicación AngularJS y el fichero controller/demoCtrl.js que será el controlador de la página.



Una vez creados, aunque no tengamos aún código, añadiremos la referencia a nuestra página HTML.

<!-- Scripts de la aplicacion -->
<script type="text/JavaScript" src="assets/js/app.js"></script>
<!-- Scripts de los controladores de la aplicacion -->
<script type="text/JavaScript" src="assets/js/controllers/demoCtrl.js"></script>

Ya solo nos queda rellenar ambos scripts.

Script de la aplicación

Como ya hemos comentado, el fichero app.js contendrá el script donde declaramos la aplicación AngularJS.

'use strict';
var demoApp = angular.module('demoApp', []);

En este fichero declaramos también los módulos a usar, como por ejemplo los servicios web, así como nuevas directivas. Pero en nuestro ejemplo, nos limitaremos a la declaración simple de la aplicación.

Script del controlador


En la declaración del script del controlador, indicaremos las directivas que vayamos a usar, y tanto sus objetos como funciones.

'use strict';

demoApp.controller('DemoCtrl', [ '$scope', '$location',
                                   function($scope, $location) {
        
         $scope.init = function(){
                 
         };
        
         $scope.init();
        
} ]);

En el ejemplo de arriba hemos declarado un controlador DemoCtrl que hace uso de la directiva $scope nos ayuda a acceder al contenido del documento, y $location a rutas y direccionamiento. Por otro lado, declaramos una función llamada init que posteriormente es invocada.

Con esto, nuestra aplicación ya está funcionando, pero evidentemente ahora no hace nada.

Vamos a añadir a la página un input text que nos permita escribir, y un parrafo que nos muestre por pantalla aquello que hayamos escrito.

         <input type="text" ng-model="texto">
         <p><b>Has escrito:<b> {{texto}}</p>

Cuando indicamos ng-model en un tag, le estamos diciendo a AngularJS que existe un elemento en nuestra variable $scope con ese nombre a la que está vinculada (direct-binding), de forma que cualquier cambio en el input se ve reflejado en la variable $scope.texto así como al revés.

Cuando usamos la doble llave, {{texto}}, estamos haciendo el mismo binding, pero en este caso es para lectura.



Si queremos cambiar el contenido de una variable por código, es tan simple como indicar $scope.variable = valor.

En nuestro caso, vamos a usar la función init() que habíamos creado para que el valor de texto se inicialice a “buenos días” cada vez que se cargue la página.

         $scope.init = function(){
                  $scope.texto = "buenos dias";
         };
Cuando queremos ejecutar una función al hacer click, usaremos la directiva ng-click indicando la función a ejecutar.

Tomando nuestro botón de ejemplo, haremos que invoque a una función clickBoton() que cambie el texto del input a “has hecho click”.

El tag quedaría tal que así:

<button class="btn btn-primary" ng-click="clickBoton()">Ejemplo de boton</button>

Y nuestra función en el controlador sería:

         $scope.clickBoton = function(){
                  $scope.texto = "has hecho click";
         };

Y cuando lo ejecutemos podremos ver el resultado tras hacer click:




Y con esto lo dejamos por ahora. Próximamente haré un manual donde explicar como incluir vistas parciales del documento así como invocación a servicios RESTfull.


Os dejo el código del ejemplo aquí.