Esta publicación tiene 18 meses de antigüedad, te invitamos a buscar publicaciones más recientes relacionados a este tema aquí.

Hola chicos, continuando con el tema 2 de route en AngularJs hoy veremos cómo crear un route básico en AngularJs. 

 

Para configurar un route en AngularJs necesitaremos crear un módulo primero. Los routes son creados por medio del método .config: 

angular.module('nombreModulo', ['ngRoute'])
.config(function($routeProvider){
 
})
 

El método .config acepta una función anonima en la que podemos inyectar el servicio $routeProvide de AngularJs. Ahora bien, el servicio $routeProvide acepta dos métodos: .when y .otherwise. 

Para agregar un route (ruta) usamos el método .when asi mismo este método acepta dos parámetros: la ruta cómo un string y opciones para el route cómo un objeto.

angular.module('nombreModulo', ['ngRoute'])
.config(function($routeProvider){
    $routeProvider.when('/', {});    
})
 
 

Vamos desglosando esto; hay dos propiedades en las opciones del route objeto: controller y templateUrl. Si bien, la propiedad controller manda llamar a un controlador existente o también podemos definir uno nuevo cómo una función anonima, mientras que la propiedad templateUrl nos permite definir la ruta del archivo HTML que queremos mostrar.

$routeProvider.when('/', {
    controller: 'indexCtl',
    templateUrl: 'assets/partials/index.html'
});
 

La ruta al template es relativa a nuestro archivo HTML. Ahora bien, el argumento controller en nuestro route es opcional. Cómo ejemplo, vamos a crear un controlador especial para cada vista.

.controller('indexCtroller', function($scope){
 
});
 

La última cosa que necesitamos hacer antes de echar a andar el route en acción es incluir la directiva ng-view en nuestra página, esta directiva puede ser incluida cómo un elemento:

<div class="container">
    <ng-view></ng-view>
</div>
 

Ejemplo final en código sobre routes:

HTML

<!DOCTYPE html>
<html lang="en" ng-app="contactsMgr">
<head>
  <meta charset="utf-8">
  <title>Contacts Manager</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script type="text/javascript" src="js/angular-route.min.js"></script>
  <script type="text/javascript" src="js/controller.js"></script>
</head>
<body>
 
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Contacts Manager</a>
    </div>
 
    <div class="collapse navbar-collapse" id="nav-toggle">
        <ul class="nav navbar-nav">
            <li class="active"><a href="/">Browse</a></li>
            <li><a href="/add-contact">Add Contact</a></li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
            <input type="text" class="form-control" placeholder="Search">
        </form>
    </div>
</nav>
 
<div class="container">
 
    <ng-view></ng-view>
 
</div>
 
</body>
</html>
 

CONTROLLER

angular.module('contactsMgr', ['ngRoute'])
 
// Routes
.config(function($routeProvider, $locationProvider){
	$routeProvider.when('/', {
		controller: 'indexCtrl',
		templateUrl: 'partials/index.html'
	})
 
	.when('/add-contact', {
		controller: 'addCtrl',
		templateUrl: 'partials/add.html'
	})
 
	.when('/contact/:id', {
		controller: 'contactCtrl',
		templateUrl: 'partials/contact.html'
	})
 
	.otherwise({
		redirectTo: '/'
	});
 
	// Este es opcional
	$locationProvider.html5Mode(true);
 
})
 
// Index Controller
.controller('indexCtrl', function($scope) {
 
})
 
// Add Controller
.controller('addCtrl', function($scope) {
 
})
 
// Contact Controller
.controller('contactCtrl', function($scope) {
 
})
 

Vista en el navegador:

localhost1.png

localhost2.png

Si te perdiste el tema pasado: Routing en AngularJs - Parte 2

@telecristy.

¿Te gustó esta publicación? Márcala como favorita