Hace unos días leí en alguna página como realizar una aplicación de página con Angular JS. Partiendo de una API Rest con Node. 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. En lugar de usar llamadas HTTP tratar las rutas y plantillas dentro de la parte frontend sin recargar la página. Con esto 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 index.html /pages --- home.html --- acerca.html --- contacto.html
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
// Creación del módulo
var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);
// Configuración de las rutas
angularRoutingApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/acerca', {
templateUrl : 'pages/acerca.html',
controller : 'aboutController'
})
.when('/contacto', {
templateUrl : 'pages/contacto.html',
controller : 'contactController'
})
.otherwise({
redirectTo: '/'
});
});
angularRoutingApp.controller('mainController', function($scope) {
$scope.message = 'Hola, Mundo!';
});
angularRoutingApp.controller('aboutController', function($scope) {
$scope.message = 'Esta es la página "Acerca de"';
});
angularRoutingApp.controller('contactController', function($scope) {
$scope.message = 'Esta es la página de "Contacto", aquí podemos poner un formulario';
});
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. Esto lo haremos dentro del ámbito del controlador que será diferente para cada página que se cargue.
Ahora pasemos a ver el index.html
<!-- index.html --> <!DOCTYPE html> <html ng-app='angularRoutingApp'> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> </head> <body ng-controller='mainController'> <header> <h1>Angular Routing</h1> <nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#acerca">Acerca de</a></li> <li><a href="#contacto">Contacto</a></li> </ul> </nav> </header> <div id="main"> <!-- Aquí inyectamos las vistas --> <div ng-view></div> </div> <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>--> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.7/angular.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script> <script src="main.js"></script> </body> </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. 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:
<div class="jumbotron text-center"> <h1>Acerca De</h1> <p>{{ message }}</p> </div> <div class="jumbotron text-center"> <h1>Contacto</h1> <p>{{ message }}</p> </div> <div class="jumbotron text-center"> <h1>Página Principal</h1> <p>{{ message }}</p> </div>
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. Sobre todo 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.
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 Comentarios
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
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.