angular

AngularJS. Aplicación web básica con AngularJS y Routing

angularJS

Hace unos días leí en alguna página (que ahora mismo no recuerdo) como realizar una aplicación de página con Angular JS partiendo de una API Rest con Node, y me pareció tremendamente interesante. Por eso esta noche durante mis horas de insomnio habituales me he puesto a leer acerca de como crear una aplicación web con AngularJS pero en lugar de usar llamadas HTTP tratar las rutas y plantillas dentro de la parte frontend sin recargar la página. Esto es algo que siempre me ha gustado, ya que evitamos tener que esperar a la hora de cargar la web. Leyendo he ido realizando la estructura de la aplicación que voy a realizar, quedando como sigue:

AngularJS: Aplicación Web con AngularJS y Routing

  • main.js contiene el código JavaScript de la aplicación, aquí manejaremos las rutas y los controladores.
  • index.html es la página principal donde inyectaremos las vistas.
  • pages es un directorio donde estarán las plantillas que serán inyectadas en index.html como vistas.

El siguiente es el código que tenemos que poner en main.js

Explicando las cosas por partes… primero creamos el modulo que es el que engloba los controladores, rutas y demás configuraciones, en este caso lo hemos llamado angularRoutingApp. Después hemos creado las rutas con la directiva $routeProvider, pero atención, para que esto funcione, debemos pasarle el módulo ngRoute a nuestro módulo para que lo entienda y añadir la librería angular-route.js (o angular-route.min.js) ya que la librería estándar de Angular no controla las rutas.

Con esto ya podemos crear rutas que como podéis ver se llaman con el método when al que pasamos la URL en si, la plantilla que se ha de cargar y el controlador que manejará el comportamiento de ese pedazo de la aplicación.

Después hemos añadido los controladores en los que únicamente ponemos un mensaje dentro del ámbito del controlador que será diferente para cada página que se cargue.

Ahora pasemos a ver el index.html

Al igual que el anterior ejemplo, indicamos a todo el HTML que utilizaremos la aplicación angularRoutingApp con la directiva ng-app, los controladores con ng-controller en el body y lo más importante, la directiva ng-view es donde indicamos en que parte del HTML vamos a inyectar las vistas.

Por último nos quedan las plantillas que no son más que unas sencillas lineas de HTML que usamos para inyectar contenido. Estas son las 3 que he creado para el ejemplo:

Todas tienen la variable message cuyo valor es diferente en cada una debido a los controladores que hemos escrito en main.js

Y con esto ya tenemos una sencilla aplicación web con rutas que no refresca la página con cada enlace. Muy diferente a aquellos tiempos oscuros cuando se usaba PHP Include o Iframes para mostrar diferentes secciones. Si le das un poco a la cabeza, encontraréis esto tremendamente útil a la hora de realizar aplicaciones web mucho más complejas (y al mismo tiempo amigables para google). Puedes ver este ejemplo funcionando en el siguiente enlace.

Angular Index

Y bueno, con esto podemos tener una pequeña guía para hacer nuestros pinitos con este fantástico lenguaje que google pone a nuestra disposición para mejorar las aplicaciones que realicemos con JavaScript.

2 thoughts on “AngularJS. Aplicación web básica con AngularJS y Routing

  1. Ronny S. Agosto 10, 2016 at 4:25 PM

    Me encanta el resultado ?¿se puede descargar las librerias que carga el proyecto para q no tenga que cargarlas desde otro servidor?

    Espero tu respuesta. Gracias por compartir

    • sapoclay Agosto 11, 2016 at 12:41 AM

      En primer lugar, gracias por la visita. Decir que supongo que si te descargas las librerías que se utiliza y utilizas unas url correctas para referirte a ellas, no deberías tener problemas. Pero diré que no he probado.
      Salu2.

Deja un comentario