Migrazione da ngRoute a ui-router

Question

Richiede alcune istruzioni per quanto riguarda la migrazione della configurazione di ngRoute in una configurazione di ui.router. Attualmente ho un modello principale (index.html) e ha una vista ng in cui sono iniettate tutte le viste. Il mio attuale configurazione ngRoute è la seguente:

app.config(function ($routeProvider) { 
    $routeProvider 
    .when('/login', { 
     templateUrl: 'app/views/login.html', 
     controller: 'LoginCtrl' 
    }) 
    .when('/contact', { 
     templateUrl: 'app/views/contact.html', 
     controller: 'ContactCtrl' 
    }) 
    .when('/notification', { 
     templateUrl: 'app/views/notification.html', 
     controller: 'NotificationCtrl' 
    }) 
    .otherwise({ 
     redirectTo: '/login' 
    }); 

Ora voglio definire un secondo posto in index.html dove posso iniettare alcuni contenuti vista - non una vista nested, ma piuttosto un'altra ng-view (o UI- vista nella terminologia dell'interfaccia utente). La sezione originale di ng-view è quella di default (attualmente solo per/login e/contact), e la nuova è solo per rotte specifiche (attualmente solo '/ notification' ma forse altre in futuro). Consente di chiamare la nuova vista di notifica 'vista-notifica'.

Ho passato gran parte della documentazione del router e non sono ancora sicuro di come migrare quanto sopra alla nuova configurazione di ui.router. Qualcuno può farmi iniziare o indicarmi degli esempi decenti?

---

Aggiornamento: Ok, qui è dove mi trovo. Ho aggiunto alcuni stati e una nuova vista ui alla mia pagina index.html. Vedi sotto:

<div class="container">  
     <div id="header"></div> 
     <div data-ui-view></div> 
     <div data-ui-view="notification-view"></div> 
    </div> 

Il mio percorso è ora:

app.config(function ($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/login'); 

    $stateProvider 
    .state('login', { 
     url: '/login', 
     templateUrl: 'app/views/login.html', 
     controller: 'LoginCtrl' 
    }) 
    .state('contact', { 
     url: '/contact', 
     templateUrl: 'app/views/contact.html', 
     controller: 'ContactCtrl' 
    }) 
    .state('notification', { 
     url: '/notification', 
     views: { 
     "notification-view": { 
      templateUrl: 'app/views/notification.html', 
      controller: 'NotificationCtrl'    
     } 
     } 
    }); 
}); 

Questo sembra funzionare bene per la maggior parte. Quando viene attivato l'url /notification, l'app viene instradata a NotificationCtrl e visualizza il contenuto della vista ui nello notification-view. Tuttavia, l'unico problema è che il contenuto dell'interfaccia utente nella vista utente principale (senza nome) viene perso. Vorrei che tutto ciò che è già stato renderizzato nella vista utente principale non fosse toccato, e mirare solo allo notification-view. È possibile? Deve invece essere una vista nidificata?

Answer 1

Quando si utilizza ui.router, si dovrebbe pensare in termini di stati anziché percorsi. Quindi, invece del $routeProvider, invece si inietta $stateProvider, pianifica vari stati e lavora da lì. Così dal vostro esempio di cui sopra, si converte a:

app.config(function ($stateProvider,$urlRouterProvider) { 

    $urlRouterProvider.otherwise('/'); 

    $stateProvider 
    .state('login', { 
     url:'/login', 
     templateUrl: 'app/views/login.html', 
     controller: 'LoginCtrl' 
    }) 
    .state('contact', { 
     url:'/contact', 
     templateUrl: 'app/views/contact.html', 
     controller: 'ContactCtrl' 
    }) 
    .state('notification', { 
     url:'/notification', 
     templateUrl: 'app/views/notification.html', 
     controller: 'NotificationCtrl' 
    }); 
} 

C'è un sacco di metodi per l'aggiunta di un "sub-view" per uirouter, un metodo è con l'aggiunta di uno stato infantile.

$stateProvider 
     .state('login', { 
      url:'/login', 
      templateUrl: 'app/views/login.html', 
      controller: 'LoginCtrl' 
     }) 
      .state('login.error', { 
      url:'/login', 
      templateUrl: 'app/views/login-error-subview.html', 
      controller: 'LoginErrorCtrl' 
      }) 

anche come $stateProvider doesnt fornire un gestore di stato di default, sarà anche necessario per iniettare in $urlRouterProvider. Questo è un fornitore che viene fornito con ui-router con la responsabilità di guardare $location per le modifiche.

Il problema con l'interfaccia router è che non si noterà un'enorme differenza rispetto al provider di route integrato e la facilità d'uso che offre fino a quando non si inizia a utilizzare stati secondari e stati impilati.

Nel tuo esempio sopra, ui.router non saprebbe quale templte usare per la vista ui e quindi lo lascia vuoto. Si può dare un modello e diventa così:

... 
.state('notification', { 
     url: '/notification', 
     views: { 
     '':{ 
      templateUrl: 'app/views/notification-main.html', 
      controller: ''    
     } 
     'notification-view': { 
      templateUrl: 'app/views/notification.html', 
      controller: 'NotificationCtrl'    
     } 
     } 
... 

Ma da quello che sto ottenendo si desidera che il login e contatto di avere la notifica in esso.Quindi idealmente dovresti creare uno stato figlio di notifica per ciascuno di essi, poiché ora c'è ora modo di dichiarare caratteri jolly o più genitori per uno stato figlio. Spero che quando uscirà la v1.0 ci sarà già un supporto per questo caso d'uso.

Sotto è un collegamento dalla documentazione che vi porterà fino a velocità:

https://github.com/angular-ui/ui-router/wiki/URL-Routing

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views