Publicidad

Ui-router, un acercamiento al enrutamiento flexible en AngularJS

Ui-router, un acercamiento al enrutamiento flexible en AngularJS
Sin comentarios

Publicidad

Publicidad

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.

Compositeview

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>
    <script src="angular.min.js"></script>
    <script src="angular-ui-router.js"></script>
    <script>
    var miapp = angular.module('miapp', ['ui.router']);
    miapp.config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise("/estado1");

        $stateProvider
            .state('estado1', {
                url: "/estado1",
                templateUrl: "plantilla1.html"
            })
            .state('estado2', {
                url: "/estado2",
                templateUrl: "plantilla2.html",
            })
            .state('estado3', {
                url: "/estado3",
                templateUrl: "plantilla3.html"
            }) 

    });
    </script>
</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.

Ui Router

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>
    <script src="angular.min.js"></script>
    <script src="angular-ui-router.js"></script>
    <script>
    var miapp = angular.module('miapp', ['ui.router']);
    miapp.config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise("/estado1");

        $stateProvider
            .state('estado1', {
                url: "/estado1",
                views:{
                    "subvista1":{
                         templateUrl: "plantilla1.html"
                    },
                    "subvista2": {

                        templateUrl: "plantilla2.html"
                    }
                } 
            })
            .state('estado2', {
                url: "/estado2",
                 views:{
                    "subvista1":{
                         templateUrl: "plantilla2.html"
                    },
                    "subvista2": {

                        templateUrl: "plantilla1.html"
                    }
                } 
            })
            .state('estado3', {
                url: "/estado3",

                    views:{
                    "subvista1":{
                         templateUrl: "plantilla3.html"
                    },
                    "subvista2": {

                        templateUrl: "plantilla3.html"
                    }
                } 

            });
    });
    </script>
</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:

Ui Router2

En GenBeta Dev| Introducción a Angular.js

Temas

Publicidad

Comentarios cerrados

Publicidad

Publicidad

Inicio
Compartir