Mitesh Sharma Mitesh Sharma - 7 months ago 32
Javascript Question

How to do page redirection using ui-router when using nested view in each page?

I am using ui-router and it works great with single page, as i have broken my page in multiple subviews each having its own controller. Now i have two such pages, but not able to figure out how to redirect to another page using ui-router.

$stateProvider
.state('main', {
url: '/',
views: {
'': {
templateUrl: 'index.html',
controller: 'projectInitCtrl',
},
'tab_overview': {
templateUrl: 'assets/views/part_page.html',
controller: 'tabOverviewCtrl',
}
}
})
.state('dashboard', {
url: '/dashboard',
views: {
'': {
templateUrl: 'main.html',
controller: 'projectInitCtrl',
},
'tab_overview': {
templateUrl: 'assets/views/part_page_1.html',
controller: 'tabOverviewCtrl',
}
}
});

$urlRouterProvider.otherwise('/');


i can access / using localhost:9000(port on which i am running my app), now how to redirect to /dashboard?

I am using angularjs. Do suggest me if alternative ways with which i can achieve this if not with ui-router?

Dan Dan
Answer

It seems you want a simple two routes application with home and dashboard.

Your code is correct, you simply need to simplify the corresponding html:

<body>
  <div ui-view=""></div>
</body>

Also, to avoid issues, I'd recommend not pointing your / route to index.html, since index.html should be your application home page, and reloading it in the ui-view is likely to cause odd behaviours.

With these two points going to home will show index.html (twice as per the point above), and going to dashboard will show main.html.

The point is the ui-view tag is where the view is shown when you go to /#dashboard.

Here is an updated plunker - note that plunkers url routing doesn't work ideally, so the links are required, but otherwise you could remove them.

Also as it stands, your code seems to expect two views per url, which is why the original plunker had both ui-view="" and ui-view="tab_overview", and showed two lines of info when you switched url.