Buenas tardes blogueros!
Estaba esta mañana en el bus para ir a la universidad pensando que me apetecía iniciar la sección de AngularJS pero no se me ocurría con que hacerlo, pensando pensando, he llegado a la conclusión de que escribiré sobre la como enrutar nuestra app con ngRoute.
ngRoute es un modulo propio de AngularJS que nos permite gestionar las URLS y los controladores de una manera muy sencilla y rápida con dos líneas de código. Dicho esto, vamos a ponernos manos a la obra ( o al código jeje).
Creando nuestra carpeta de trabajo
Vamos a crear una carpeta de trabajo, en mi caso la he llamado 02-angular-ngRoute y vamos a crear como siempre, un package.json para las dependencias de npm
npm init
Lo rellenaremos con los datos que queramos o simplemente darle a enter para que se autorellene.
Terminado con generar el archivo, vamos a instalar las dependencias que usaremos en este tutorial, que son angular, angular-route y bootstrap (usado solo para el navbar).
npm install --save angular angular-route bootstrap
Como ya sabemos el –save sirve para que todas esas dependencias que estamos instalando se guarden en nuestro pacakge.json
Creando los archivos html y js
Antes de empezar a escribir nada vamos a crear los siguientes archivos:
-- index.html
-- inicio.html
-- vista1.html
-- vista2.html
-- app.js
Creando el index.html
<head> <meta charset="UTF-8"> <title>Aprendiendo a enrutar nuestra applicación en Angular con ngRoute</title> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> <script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/angular-route/angular-route.js"></script> <script src="app.js"></script> </head>
Aqui estoy importando las librerías que vamos a usar (bootstarap.css, angular.min.js, angular-route.js y nuestra app.js)
Para que nuestra página sea una página que Angular reconozca, tenemos que agregar la directiva ng-app
<body ng-app="codigodiario">
Lo recomendado es añadirlo en el body, para que abarque todo lo que está en nuestro cuerpo.
Creando el navbar y los enlaces
<div class="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#/">Inicio</a>
<ul class="nav navbar-nav">
<li class="active">
<a href="/#vista1">Vista 1</a>
</li>
<li>
<a href="/#vista2">Vista 2</a>
</li>
</ul>
</div>
</div>
A los enlaces de los elementos del menu les tenemos que agregar /# ya que en este tutorial el html5mode no lo he activado para evitar confusiones.
<a href="/#vista1">Vista 1</a>
Lo último y más importante
…es incluir la directiva ng-view. Esta directiva lo que hace es que todas las plantillas que le mandemos, los mostrará en ese espacio, todo lo que tengamos arriba o debajo de él, se quedará estático.
<div ng-view></div>
Creando nuestra app.js
Tenemos que crear nuestra aplicación Angular
var app = angular.module('codigodiario', ['ngRoute']);
La primera parte de este código es el nombre de nuestra aplicación, tiene que ser la misma que la que indicamos en index.html en la directiva ng-app=» «. Y la segunda parte, dentro de los corchetes, son las dependencias que le inyectamos a nuestra app, en este caso le inyectamos ngRoute, que es el nombre de trabajo de angular-route.
Ahora tenemos que proceder a configurar las rutas de la aplicación
app.config(function($routeProvider) {
$routeProvider
.when('/' ,{templateUrl: 'inicio.html', controller: 'IndexCtrl'})
.when('/vista1' ,{templateUrl: 'vista1', controller: 'Vista1Ctrl'})
.when('/vista2' ,{templateUrl: 'vista2', controller: 'Vista2Ctrl'})
.otherwise({redirectTo: '/'});
});
La configuración se hace con .config, que le pasamos una función con el parámetro $routeProvider, que es el que se encarga de las urls y rutas.
Ahora solo tenemos que ir configurando una a una las rutas que queramos tener.
$routeProvider.when('/' ,{templateUrl: 'inicio.html', controller: 'IndexCtrl'})
Este when esta compuesto por dos partes, la primera es la «dirección» que queremos crear, y la segunda parte es un objeto que le indicamos el controlador que va a usar y la plantilla .html que va a cargar al estar en esa ruta. Creamos las que veamos necesarias, yo para este proyecto he creado 2, vista1 y vista2.
Y al final podemos ver que hay un otherwise, eso es como en caso de un switch, el caso default, cualquier dirección que no esté en nuestra lista de rutas, nos redirigirá a la ruta que le indiquemos.
.otherwise({redirectTo: '/'})
En mi caso le he indicado que redireccione al inicio.
Creando los controladores para cada página
app.controller('IndexCtrl', function($scope){
$scope.texto = "Esto es el inicio";
$scope.suma = 2+2;
}]);
Un controlador se crea de la misma forma que el config, solo que le tenemos que dar un nombre y luego le pasamos una función.
Dentro de ese controlador irá todo la lógica de negocio de nuestra aplicación. Yo solo he creado una variable llamada texto que se muestre al cargar la pagina.
Un vistazo a los archivos .html de las vistas
{{texto}} {{suma}}
Si, así de simple, para mostrar el contenido dinámico de una variable en nuestro .html que anteriormente hemos creado en nuestro controlador se hace metiendo la variable entre dos {{}}.
Finiiito
Y con esto termino este tutorial sobre la creación y configuración de rutas con AngularJS. Espero que os sirva de ayuda, os dejo también el enlace al repositorio de este tutorial en GitHub para que podáis ver mejor el código.
