Ver contenido
carlosazaustre.es carlosazaustre.es

Tutorial de AngularJS. Ejemplo de Aplicación web con AngularJS y Routing

🗓 | 💻 Desarrollo | 🕐 2 minutos de lectura | 💬 Comments

Hace unos días vimos como crear una simple page application con Angular JS partiendo de una API Rest con Node. hoy vamos a ver otro ejemplo de aplicación web con AngularJS pero en lugar de usar llamadas HTTP vamos a ver como tratar rutas y plantillas dentro de la parte frontend sin recargar la página.

Angular JS tutorial

Lo primero, al igual que la otra vez, veamos cual será la estructura de archivos de la aplicación:

  • 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

Veamos que tenemos que poner en main.js

Expliquemos cada parte, 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 hemos 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.

angularjsapprouting

El código de este ejemplo esta disponible en el siguiente repositorio de github.

✎ ¿Ves alguna errata? ¿Quieres modificar algo? Haz una Pull Request.

Carlos Azaustre

Soy Carlos Azaustre. Desarrollador web desde hace más de 8 años. He trabajado en Google, IBM y Eventbrite. Soy GDE (Google Developer Expert) en Tecnologías Web. Desde 2013 intento documentar en éste blog todo lo que aprendo y así compartirlo con el resto de la comunidad.

📬 Únete y ponte al día en desarrollo web

Recibe puntualmente información sobre las últimas novedades en tecnologías web y desarrollo web moderno para que estés siempre actualizadx:

🔒 Libre de Spam. Sólo contenido que te interesa..