Angular UI Router è un framework di routing per angular js.
Angular JS fornisce già il modulo ngRoute per il routing. È una libreria di routing di base in cui possiamo specificare solo una vista e un controller per qualsiasi percorso. Non possiamo ottenere una vista nidificata attraverso ngRoute. In modo che stiamo usando UI Router.
consente di includere la libreria dopo aver incluso Angular nel nostro intex.html
<script> src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js">
Pacchetto Router UI viene distribuito utilizzando npm, il gestore di pacchetti nodo.
npm install --save angular-ui-router
Aggiungi una dipendenza al router UI
Per configurare l’applicazione, dobbiamo aggiungere una dipendenza (ui.router) al nostro modulo angolare principale.
angular.module('myApp', )
Componenti
UI Router ha un set di componenti.
stat stateProvider :
Uno stato corrisponde a una posizione nell’applicazione. stato descrive tramite controller, modello e visualizzare le proprietà.
Attiva gli eventi relativi alla transizione e richiama i back. risoluzione di eventuali dipendenze dello stato di destinazione e aggiornamento location location per riflettere lo stato corrente. Stato che ha url e si è registrato automaticamente con url urlRouterProvider.
ui-sref: ui-sref è equivalente a href nel tag di ancoraggio.
ui-view: rende le viste definite nello stato corrente.
Configura gli stati iniziali
Per definire gli stati che possiamo usare .metodo config in questo metodo config possiamo definire un numero di stati per ciascuno dei nostri modali.
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state ('home',{
url:'/home',
templateUrl:'home.html'
})
})
Nelle righe precedenti abbiamo creato uno stato chiamato home. Quando uno stato viene attivato, il modello viene automaticamente inserito in ui-view.
Definire una direttiva ui-view
UI Router utilizza una direttiva chiamata ui-view. ui-view determina un modello di stato deve essere caricato. includeremo la direttiva ui-view sul nostro indice.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>
Modello
Esistono diversi modi per definire il modello per uno stato specifico.
template: una stringa di contenuto html o una funzione che restituisce html.
templateUrl: una stringa contenente il percorso url di un modello o una funzione che restituisce una stringa di percorso url.
Controller
Possiamo assegnare un controller a uno stato. possiamo definire un controller usando la funzione o usando il nome del controller se hai già un controller define nel modulo
usando le funzioni:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller: function($scope){
$scope.welcome="hello world";
}
})
utilizzando il controller:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller:'homeController'
})
Stato astratto
Gli stati astratti vengono utilizzati per condividere le informazioni comuni a più stati. Ha stato figlio e non può essere attivato da solo. Uno stato astratto viene attivato uno del suo stato figlio viene attivato.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
Parametri di stato
stat Il servizio stateParams è un oggetto in grado di memorizzare le informazioni sull’url, se l’URL è assets/js/app.js. Possiamo passare uno qualsiasi di questi parametri url nell’oggetto stat stateParams e usiamo queste informazioni in un altro stato.
$stateProvider
.state('order',{
url:'/order/:orderid',
templateUrl:'order.html'
})
Stato nidificato
Stato che può essere nidificato l’uno all’interno dell’altro, il che significa che lo stato figlio verrà reso all’interno della vista dell’interfaccia utente con lo stato genitore.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
Resolve
Resolve è l’opzione per precaricare i dati per un percorso.
$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'
})
Nel codice sopra l’oggetto utente caricherà l’utente e quindi l’oggetto attività, ma solo se l’utente può avere l’attività. Il percorso verrà caricato solo se tutte le risoluzioni hanno esito positivo. se la prima risoluzione fallisce, la seconda non verrà mai provata.