Migracja z ngRoute do routera ui

Question

Potrzebuje wskazówek dotyczących migracji mojej konfiguracji ngRoute do konfiguracji ui.router. Obecnie mam jeden główny szablon (index.html) i ma on widok ng, w którym wstrzykiwane są wszystkie widoki. Mój obecny ngRoute config wygląda następująco:

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' 
    }); 

I teraz chcemy zdefiniować drugie miejsce w index.html gdzie mogę wstrzyknąć część zawartości widoku - nie zagnieżdżony widok, ale raczej kolejną NG-view (lub ui- zobacz w terminologii ui-routera). Oryginalna sekcja ng-view jest domyślna (obecnie tylko dla/login i/contact), a nowa jest przeznaczona tylko dla określonych tras (obecnie tylko "/ notification", ale być może inne w przyszłości). Pozwala wywołać nowy widok "widok-widok".

Przeszedłem przez wiele dokumentacji ui-routera i nadal nie jestem pewien, jak przenieść powyższą konfigurację do nowej konfiguracji ui.router. Czy ktoś może mnie zmusić do rozpoczęcia lub wskazać mi jakieś przyzwoite przykłady?

---

Aktualizacja: Ok, oto, gdzie jestem. Dodałem kilka stanów i nowy widok ui do mojej strony index.html. Patrz poniżej:

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

Moja routingu jest teraz:

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'    
     } 
     } 
    }); 
}); 

To wydaje się działać ok dla większości. Po uruchomieniu adresu URL /notification aplikacja jest kierowana do NotificationCtrl i wyświetla treść interfejsu użytkownika w postaci notification-view. Jednak jedynym problemem jest to, że zawartość Ui w głównym (nienazwanym) ui-widoku zostanie utracona. Chciałbym, aby wszystko, co jest już renderowane w głównym widoku, było nietknięte, i kierować tylko na notification-view. czy to możliwe? Czy zamiast tego musi to być widok zagnieżdżony?

Answer 1

Korzystając z interfejsu ui.router, należy myśleć w kategoriach o stanach zamiast tras. Zamiast tego zamiast $routeProvider należy wprowadzić $stateProvider, zaplanować różne stany i pracować z tego miejsca. Tak więc z powyższego przykładu, możemy przekształcić go:

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' 
    }); 
} 

Istnieje wiele metod dodawania „sub-view”, aby uirouter jedna metoda jest dodanie stan dziecka.

$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' 
      }) 

również jako $stateProvider doesnt zapewnienie obsługi stan domyślny, będzie trzeba także wprowadzić w $urlRouterProvider. Jest to dostawca, który również jest dostarczany z routerem ui, który jest odpowiedzialny za oglądanie $location dla zmian.

Rzeczą w przypadku routery-ui jest to, że nie widać olbrzymiej różnicy w porównaniu do wbudowanego dostawcy trasy i łatwości użytkowania, jaką zapewnia, dopóki nie zacznie się używać stanów podrzędnych i stert.

W powyższym przykładzie, użytkownik ui.router nie wiedziałby, z jakiego szablonu korzystać, a więc pozostawia go pustym. Można nadać mu szablon, a tym samym staje się:

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

Ale z tego, co dostaję chcesz logowania i kontakt mieć zawiadomienia w nim.Najlepiej więc utworzyć dla każdego z dzieci stan potomny, ponieważ obecnie istnieje sposób deklarowania wieloznacznika lub wielu rodziców dla stanu potomnego. Mam nadzieję, że po wyjściu wersji 1.0 wsparcie dla tego przypadku będzie już obsługiwane.

Poniżej znajduje się link z docs, które cię do połowy prędkości:

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

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