Angular.js es un framework que destaca por su gran extensibilidad. Esta extensibilidad se consigue instalando módulos adicionales. Uno de los módulos core más utilizados es ng-route, que gestiona la navegación de la aplicación entre diferentes vistas. Lamentablemente tiene varias limitaciones, una de las más importantes es que no permite cargar de forma simultanea varias vistas en una misma página. Angular ui-router es el substituto natural de ng-route cuando las aplicaciones necesitan una gestión de la vista compleja.
Angular ui-router y Composite View
El patrón Composite View es uno de los clásicos a la hora de desarrollar la capa de presentación y define que la vista puede estar compuesta por varias subvistas que se actualizan de forma independiente.
Vamos a configurar Angular.js para que utilice el módulo de ui-router:
var miapp = angular.module('miapp', ['ui.router']);
Este módulo se apoya en el concepto de "estado" para definir la navegación entre vistas. En el siguiente bloque de código podemos ver como disponemos de tres estados cada uno de ellos ligados a una plantilla diferente.
<html ng-app="miapp">
<head>
</head>
<body>
<div ui-view></div>
<a ui-sref="estado1">Estado1</a>
<a ui-sref="estado2">Estado2</a>
<a ui-sref="estado3">Estado3</a>
</body>
</html>
El código dispone de una directiva ui-view y tres ui-sref que generan links permitiendo cambiar el estado de la aplicación. Cada vez que pulsemos uno de los links se cambiará de estado y por lo tanto de plantilla.
En este caso el código es muy similar al que tenemos a nuestra disposición utilizando el ng-router. Ahora bien el ui-router permite una mayor flexibilidad, podemos modificar el código para que la vista este compuesta por dos subvistas diferentes. Cada una de ellas se actualiza de forma independiente.
<html ng-app="miapp">
<head>
</head>
<body>
<div ui-view="subvista1"></div>
<div ui-view="subvista2"></div>
<a ui-sref="estado1">Estado1</a>
<a ui-sref="estado2">Estado2</a>
<a ui-sref="estado3">Estado3</a>
</body>
</html>
El resultado será una vista con varias subvistas anidadas:
En GenBeta Dev| Introducción a Angular.js
