Angular route act like another route without url change - angularjs

Question

I'm using Angular-UI router and in my project I have this structure of pages:
- Main (/main)
-- Table (/main/table/:userid)
-- Info (/main/info)
-- About (/main/about)
In case the user going to the /main I want it to act like the user hit the /main/table/1 without causing url change.
How can I achieve that ?
Here are my states:
$stateProvider
.state('main', {
'url': '/main',
'templateUrl': '/pages/main.html',
'controller': 'MainController',
'resolve': { ... }
})
.state('main.table', {
'url': '/main/table/:userid',
'templateUrl': '/pages/table.html',
})
.state('main.info', {
'url': '/main/info',
'templateUrl': '/pages/info.html',
})
.state('main.about', {
'url': '/main/about',
'templateUrl': '/pages/about.html',
})

Answer 1

I created working plunker here. The trick is to reuse the "main.table" stuff directly in the main state.
We can have main state define like this:
$stateProvider
.state('main', {
'url': '/main',
views: {
'': {
'templateUrl': '/pages/main.html',
'controller': 'MainController',
},
'#main': {
'templateUrl': '/pages/table.html',
'controller': 'TableController',
}
}
})
And these are almost unchanged, just the /main is replaced from url, it will be passed by parent.
.state('main.table', {
'url': '/table/:userid',
'templateUrl': '/pages/table.html',
'controller': 'TableController',
})
.state('main.info', {
'url': '/info',
'templateUrl': '/pages/info.html',
})
.state('main.about', {
'url': '/about',
'templateUrl': '/pages/about.html',
})
And this would be the controller for table view
.controller('TableController', function($scope, $stateParams) {
$scope.userid = $stateParams.userid || 1;
})
Check it all here
The technique used here is: The main state does have two views. One of them is the main - layout template. The second is immediately injecting other view into that layout. via absolute naming '#main' (unnamed view in the state main)
That view (for displaying table) is the same which we use for main.table state. We just check, that if there is no param userid - 1 is used
Read more about this multi views here
View Names - Relative vs. Absolute Names
small extract from example snippet:
$stateProvider
.state('contacts', {
// This will get automatically plugged into the unnamed ui-view
// of the parent state template. Since this is a top level state,
// its parent state template is index.html.
templateUrl: 'contacts.html'
})
.state('contacts.detail', {
views: {
////////////////////////////////////
// Relative Targeting //
// Targets parent state ui-view's //
////////////////////////////////////
// Relatively targets the 'detail' view in this state's parent state, 'contacts'.
// <div ui-view='detail'/> within contacts.html
"detail" : { },
// Relatively targets the unnamed view in this state's parent state, 'contacts'.
// <div ui-view/> within contacts.html
"" : { },
///////////////////////////////////////////////////////
// Absolute Targeting using '#' //
// Targets any view within this state or an ancestor //
///////////////////////////////////////////////////////
// Absolutely targets the 'info' view in this state, 'contacts.detail'.
// <div ui-view='info'/> within contacts.detail.html
"info#contacts.detail" : { }
// Absolutely targets the 'detail' view in the 'contacts' state.
// <div ui-view='detail'/> within contacts.html
"detail#contacts" : { }
// Absolutely targets the unnamed view in parent 'contacts' state.
// <div ui-view/> within contacts.html
"#contacts" : { }
// absolutely targets the 'status' view in root unnamed state.
// <div ui-view='status'/> within index.html
"status#" : { }
// absolutely targets the unnamed view in root unnamed state.
// <div ui-view/> within index.html
"#" : { }
});

Answer 2

stateProvider url property is responsible for browser URL routing mechanism.
stateProvider templateUrl property is a html partial view template which is going to render against a particular state, in our case it is main.
$stateProvider
.state('main', { // **main** is a state.
'url': '/main', // **/main** is a preferred url you want to set in the browser.
'templateUrl': '/main/table/1', // **/main/table/1** is a template to be rendered.
'controller': 'MainController',
'resolve': { ... }
})