migrating from ngRoute/$routeProvider to ui-router/$urlRouterProvider
angular-ui-router, angularjs, ngroute, routes
Solution
Here is a basic example, i made a while ago, with name-spaced controllers in ui-router config, & one nested route (2nd tab): http://plnkr.co/edit/2DuSin?p=preview
`template:` can be changed to `templateUrl:` to point at HTML file.
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: {}
});
});
controllers:
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"];
}]);
Problem
I want to start using Angular's ui-router instead of ngRoute. Originally, my app config looked like ``` 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" }) ; } ]); ``` I swapped out the libraries, and changed the config. I understand I could still use `$routeProvider`, but that seems like a legacy workaround. ``` 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" }) ; } ]); ``` This gives me errors that seem to indicate `$digest` is stuck in a loop. I suspect the `.otherwise("/home")` rule. Am I specifying the `handler`s correctly, as if they were template URLs? If I comment-out the `.when()`s, nothing works except `"/customer/:username"`. Do I have to have a state defined for every route? If so, what is the point of having both `$urlRouterProvider` and `$stateProvider`? Asked differently, what is each supposed to do?