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 **

<code class="EnlighterJSRAW" data-enlighter-language="null">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).

<code class="EnlighterJSRAW" data-enlighter-language="null">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<br></br>
-- inicio.html<br></br>
-- vista1.html<br></br>
-- vista2.html<br></br>
-- app.js```


## Creando el index.html

 <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> 

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.

`<code class="EnlighterJSRAW" data-enlighter-language="null"><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.

`<code class="EnlighterJSRAW" data-enlighter-language="null"><div ng-view></div>`


## Creando nuestra app.js

Tenemos que crear nuestra aplicación Angular

`<code class="EnlighterJSRAW" data-enlighter-language="null">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.

`<code class="EnlighterJSRAW" data-enlighter-language="null">$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.

`<code class="EnlighterJSRAW" data-enlighter-language="null">.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

`<code class="EnlighterJSRAW" data-enlighter-language="null">{{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.

[![github-logo](http://i0.wp.com/codigodiario.me/content/images/2016/04/github-logo-300x200.jpg?fit=300%2C200)](https://github.com/codigodiario/02-angular-ngRoute)