i'm using following ui-router configuration. so, when user clicks on tab, tab highlighted correctly expected. however, no tab highlighted when page first loads , user has click on tab state activated. home state active tab when page first loads. how can achieve this?
angular.module("app", ['app.home', 'app.page1', 'app.page2', 'app.page3']) .config(function($stateprovider, $urlrouterprovider) { $urlrouterprovider.otherwise('home'); $stateprovider .state('home', { url: '/', views: { 'maincontentplaceholder': { templateurl: '../home/_layout.html' } } }) .state('page1', { url: '/page1', views: { 'maincontentplaceholder': { templateurl: '../page-1/_layout.html' } } }) .state('page2', { url: '/page2', views: { 'maincontentplaceholder': { templateurl: '../page-2/_layout.html' } } }) .state('page3', { url: '/page3', views: { 'maincontentplaceholder': { templateurl: '../page-3/_layout.html' } } }); }) my html markup is:
<body> <section id="navbar"> <nav class="navbar navbar-inverse navbar-static-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" ui-sref="home"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a> </div> <ul class="nav navbar-nav"> <li ui-sref-active="active"><a ui-sref="home">home</a></li> <li ui-sref-active="active"><a ui-sref="page1">page 1</a></li> <li ui-sref-active="active"><a ui-sref="page2">page 2</a></li> <li ui-sref-active="active"><a ui-sref="page3">page 3</a></li> </ul> </div> </nav> </section> <section id="contentplaceholder" ui-view="maincontentplaceholder"></section> </body>
okay managed figure out issue. syntax error @ third line should change
$urlrouterprovider.otherwise('home'); to
$urlrouterprovider.otherwise('/'); i had thought $urlrouter.otherwise() takes in state parameter. should in fact redirect url.
Comments
Post a Comment