migrieren von ngRoute/$ routeProvider zu ui-router/$ urlRouterProvider

Question

Ich möchte Angulars UI-Router anstelle von ngRoute verwenden. Ursprünglich sah meine App-Konfiguration wie

myApp.config(["$routeProvider", 
    function($routeProvider) { 
     $routeProvider 
      .when("/search", { 
       templateUrl: "partials/customerSearch.html" 
      }) 
      .when("/home", { 
       templateUrl: "partials/home.html" 
      }) 
      .when("/login", { 
       templateUrl: "partials/login.html", 
       controller: "LoginCtrl" 
      }) 
      .otherwise({ 
       redirectTo: "/home" 
      }) 
     ; 
    } 
]); 

Ich tauschte die Bibliotheken und änderte die Konfiguration. Ich verstehe, ich könnte immer noch $routeProvider verwenden, aber das scheint wie eine Legacy-Problemumgehung.

myApp.config(["$urlRouterProvider", "$stateProvider", 
    function($urlRouterProvider, $stateProvider) { 
     $urlRouterProvider 
      .when("/search", "partials/customerSearch.html") 
      .when("/home", "partials/home.html") 
      .when("/login", "partials/login.html") 
      .otherwise("/home") 
     ; 
     $stateProvider 
      .state({ 
       name:  "customer", 
       url:   "/customer/:username", 
       templateUrl: "partials/customer.html" 
      }) 
      .state({ 
       parent:  "customer", 
       name:  "details", 
       url:   "/details", 
       templateUrl: "partials/customerDetails.html" 
      }) 
     ; 

    } 
]); 

Das gibt mir Fehler, die zeigen scheinen, ist $digest stecken in einer Schleife. Ich vermute die .otherwise("/home") Regel. Richte ich die handler s korrekt ein, als wären sie Vorlagen-URLs?

Wenn ich die .when() s auskommentiere, funktioniert nichts außer "/customer/:username". Muss ich für jede Route einen Status definiert haben? Wenn ja, worauf kommt es an, $urlRouterProvider und $stateProvider zu haben? Anders gefragt, was soll jeder tun? Hier

Answer 1

ist ein einfaches Beispiel, das ich machte eine Weile her, mit dem Namen beabstandeten Controller in ui-Router config & eine verschachtelte Route (2. Reiter): http://plnkr.co/edit/2DuSin?p=preview

template: kann templateUrl: geändert werden, um zu zeigen in HTML-Datei.

var app = angular.module('plunker', ['ui.bootstrap', 'ui.bootstrap.tpls','ui.router']); 
app.config(function($stateProvider, $urlRouterProvider) { 
$urlRouterProvider.otherwise("/"); 
$stateProvider 
    .state('state1', { 
     url: "/", 
     template: 'Hello from the first Tab!', 
     controller: 'FirstCtrl', 
     data:{} 
    }) 
    .state('state2', { 
     url: "/route2", 
     template: 'Hello from the 2nd Tab!<br>' + 
       '<a ui-sref="state2.list">Show List</a><div ui-view></div>', 
     controller: 'SecondCtrl', 
     data: {} 
    }) 
     .state('state2.list', { 
     url: '/list', 
     template: '<h2>Nest list state</h2><ul><li ng-repeat="thing in things">{{thing}}</li></ul>', 
     controller: 'SecondCtrl', 
     data: {} 
     }); 
}); 

Controller:

app.controller('FirstCtrl', ['$scope', '$stateParams', '$state', function($scope,$stateParams,$state){ 

}]); 

app.controller('SecondCtrl', ['$scope', '$stateParams', '$state', function($scope, $stateParams, $state){ 
    $scope.things = ["A", "Set", "Of", "Things"]; 
}]); 

Answer 2

Diese für Sie arbeiten sollten. Die Funktion sonst ist Teil des $ urlRouteProvider-Dienstes. Wenn Probleme auftreten, lesen Sie die Anleitungen zur Definition des Objekts, das als Parameter für die Funktion $ stateProvider.state() verwendet wird. Hier habe ich mich nur darauf konzentriert, wo die andere Route liegen soll.

]);