El enrutador Angular UI es un marco de enrutamiento para angular js.
Angular JS ya proporciona módulo ngRoute para enrutamiento. Es una librería de enrutamiento básica donde podemos especificar una sola vista y controlador para cualquier ruta. No podemos lograr una vista anidada a través de una ruta. Por lo que estamos utilizando enrutador de interfaz de usuario.
vamos a incluir la biblioteca después de incluir Angular en nuestro intex.html
<script> src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js">
El paquete de enrutador de interfaz de usuario se distribuye mediante npm, el administrador de paquetes de nodos.
npm install --save angular-ui-router
Agregar una dependencia al enrutador de interfaz de usuario
Para configurar la aplicación, necesitamos agregar una dependencia (interfaz de usuario.router) a nuestro módulo angular principal.
angular.module('myApp', )
Componentes
El enrutador de interfaz de usuario tiene un conjunto de componentes.
$stateProvider :
Un estado corresponde a un lugar en la solicitud. el estado se describe a través del controlador, la plantilla y las propiedades de vista.
Activa eventos relacionados con la transición y devoluciones de llamadas. resolver cualquier dependencia del estado de destino y actualizar location location para reflejar el estado actual. Estado que tiene URL y se registra automáticamente con url urlRouterProvider.
ui-sref: ui-sref es equivalente a href en la etiqueta de anclaje.
ui-view: renderiza las vistas definidas en el estado actual.
Configure los estados iniciales
Para definir los estados que podemos usar .método de configuración en este método de configuración podemos definir un número de estados para cada uno de nuestros modales.
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state ('home',{
url:'/home',
templateUrl:'home.html'
})
})
En las líneas anteriores hemos creado un estado llamado home. Cuando se activa un estado, la plantilla se inserta automáticamente en la vista de interfaz de usuario.
Definir una directiva de vista de interfaz de usuario
El enrutador de interfaz de usuario utiliza una directiva llamada vista de interfaz de usuario. ui-view determina que se debe cargar una plantilla de estado. incluiremos la directiva ui-view en nuestro índice.html
<!doctype html>
<html>
<head>
<title>UI Router for Angular JS</title>
<script src="angular.min.js"></script>
<script src="angular-ui-router.min.js"></script>
</head>
<body ng-app="myApp">
<ui-view></ui-view>
</body>
</html>
Plantilla
Hay diferentes formas de definir la plantilla para un estado específico.plantilla
: una cadena de contenido html o una función que devuelve html.
templateUrl: cadena que contiene la ruta de url a una plantilla o función que devuelve una cadena de ruta de url.
Controladores
Podemos asignar un controlador a un estado. podemos definir un controlador usando la función o usando el nombre del controlador si ya tiene un controlador definido en el módulo
usando funciones:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller: function($scope){
$scope.welcome="hello world";
}
})
uso del controlador:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller:'homeController'
})
Estado abstracto
Los estados abstractos se utilizan para compartir la información común con varios estados. Tiene estado hijo y no se puede activar por sí mismo. Un estado abstracto se activa uno de sus estados secundarios se activa.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
Parámetros de estado
stat el servicio stateParams es un objeto que puede almacenar la información sobre la url, si la url es assets / js / app.js. Podemos pasar cualquiera de esos parámetros de url al objeto stat stateParams y usar esta información en otro estado.
$stateProvider
.state('order',{
url:'/order/:orderid',
templateUrl:'order.html'
})
Estado anidado
Estado que se puede anidar uno dentro del otro, lo que significa que el estado hijo se renderizará dentro de la vista de interfaz de usuario con el estado padre.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
Resolve
Resolve es la opción para cargar previamente los datos de una ruta.
$stateProvider
.state('user.profile',{
url:'/profile',
templateUrl:'profile.html',
controller:'profileController',
resolve: {
user: function($stateParams, userservice){
return userservice.find($stateParams.id);
},
tasks: function(TaskService, user){
return user.canHaveTasks()?TaskService.find(user.id):;
}
}
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
En el código anterior, el objeto usuario cargará el usuario y luego el objeto tarea, pero solo si el usuario puede tener la tarea. La ruta se cargará solo si todas las resoluciones son correctas. si la primera resolución falla, la segunda nunca se intentará.