Angular UI Router is a routing framework for angular js.
Angular JS já fornece módulo ngRoute para roteamento. É uma lib básica de roteamento onde podemos especificar apenas uma vista e controlador para qualquer rota. Não conseguimos obter uma visão aninhada através do ngRoute. Para que estejamos a usar o Router UI.
vamos incluir a biblioteca depois de incluir Angular em nosso intex.html
<script> src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js">
Ui Router package is distributed using npm, the node package manager.
npm install --save angular-ui-router
adicione uma dependência ao Router UI
para configurar a aplicação, precisamos adicionar uma dependência (ui.router) para o nosso módulo angular principal.
angular.module('myApp', )
componentes
roteador IU tem um conjunto de componentes.
$stateProvider:
um estado corresponde a um lugar na aplicação. estado descreve através do controlador, template e view properties.
desencadeia eventos relacionados com a transição e retornos de chamadas. resolver todas as dependências do estado-alvo e actualizar a $localização para reflectir o estado actual. Declare que tem url ‘ s e registrada automaticamente com $urlRouterProvider.
ui-sref: ui-sref é equivalente a href no anchor tag.
ui-view: mostra as vistas definidas no estado actual.
configurar os estados iniciais
para definir os estados que podemos usar .método de configuração neste método de configuração podemos definir um número de estados para cada um dos nossos modais.
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state ('home',{
url:'/home',
templateUrl:'home.html'
})
})
nas linhas acima criamos um estado chamado home. Quando um estado é ativado, o modelo é inserido automaticamente na ui-view.
Define uma directiva iu-view
Router IU usa uma directiva chamada iu-view. a interface de utilizador determina que deve ser carregado um modelo de Estado. vamos incluir a Directiva ui-view no nosso í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>
modelo
existem diferentes maneiras de definir o modelo para um estado específico.
modelo: uma cadeia de conteúdo html ou uma função que devolve html.
templateUrl: um texto que contém a localização do url de um modelo ou uma função que devolve um texto de localização do url.
controladores
podemos atribuir um controlador a um estado. podemos definir um controlador usando a função ou usando o nome do controlador se você já tiver um controlador de definir no módulo
usando funções:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller: function($scope){
$scope.welcome="hello world";
}
})
usando o controlador:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller:'homeController'
})
Resumo o estado
Resumo de estados de são usadas para compartilhar a informação comum para vários estados. Ela tem estado infantil e não pode ser ativada por si mesma. Um estado abstrato é ativado um de seu estado infantil é ativado.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
Parâmetros de Estado
$stateParams service é um objeto que pode armazenar a informação sobre o url, se o url é activo/js/app.js. Podemos passar qualquer um desses parâmetros de url para o objeto $stateParams e usamos essa informação em outro estado.
$stateProvider
.state('order',{
url:'/order/:orderid',
templateUrl:'order.html'
})
Estado aninhado
Estado que pode ser aninhado dentro um do outro, o que significa que o estado-filho será renderizado dentro da ui-view com o Estado-mãe.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
Resolver
Resolver é a opção de pré carregar os dados para uma rota.
$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'
})
no objeto de código acima irá carregar o Usuário e, em seguida, o objeto de tarefa, mas apenas se o usuário pode ter a tarefa. A rota só será carregada se todas as soluções forem bem sucedidas. se a primeira resolução falhar, a segunda nunca será julgada.