Menu
Im trying to get my nested route working but it's giving me hard time for two days now :(
one level works fine
two levels works fine
three levels is not working!
can anybody please help me out?
Thanks in advance
angular.module('settings', []).config(['$stateProvider', '$routeProvider', '$urlRouterProvider', function($stateProvider, $routeProvider, $urlRouterProvider) {
$stateProvider
.state('settings', {
url: '/settings',
template:"Settings",
controller: function(){
console.log('settings');
}
}).
state('settings.branch', {
url: '/{branchId:[0-9]{1,8}}',
template:"Branch",
controller: function(){
console.log('branch');
}
}).
state('settings.branch.prop', {
url: '/prop',
template:"Property",
controller: function(){
console.log('property');
}
});
}]);
'/settings' is working
'/settings/1234' is working
'/settings/1234/prop' is not working, always return the prevues state 'Branch'
479
Nested routes are routes within other routes. In this tutorial, we will show you how to create a child route and display the child components. The Angular allows us to nest child routes under another child routes effectively creating a Tree of routes.
Nested Routes are a powerful feature. While most people think React Router only routes a user from page to page, it also allows one to exchange specific fragments of the view based on the current route.
In Angular, the router lets you add child routes using the children property inside the routing module. Here you can see that the routing module has been updated with the child route and added to the array of components so we do not need to import all of them wherever we go.
I guess you didn't declare an ui-view in the Branch template
149
I had the same issue. For settings.branch.prop, try setting url to:
url: '/{branchId:[0-9]{1,8}}/prop'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
