Hi I am new to angular routing and was wondering how I can transition to different states through controllers.
I know that I must inject the $state service which I did but I am unclear on how to use the transition method for the service.
This is what I have in my controller code to try to transition but it is not working :( (I tried to $stateService.go(...) as well but no success)
$stateService.transitionTo("teststate({ path: 'Test.TestState' })");
Here is my state definition
$stateProvider
.state("teststate",
{
url: '/:path',
templateUrl: (stateParams) => {
return '/Templates?path=' + stateParams.path;
},
})
Any help would be appreciated!
Thanks
Do you mean this?
$state.go("teststate", { path: 'Test.TestState' });
Documentation
It can be done with two ways like:
1 - Use $state
app.controller("fruitsCtrl", function ($scope, $state) {
//goto vegetables page with params
$state.go('vegetables', {name:"carrot"});
// or other possibility
$state.transitionTo('vegetables', {name:"carrot"});
});
2 - Use ui-sref
<nav>
<ul>
<li><a ui-sref="fruits({name: 'mango'})">Fruits</a></li>
<li><a ui-sref="vegetables({name: 'potato'})">Vegetables</a></li>
</ul>
</nav>
Supposed Routes:
$stateProvider
.state('fruits', {
url:"/fruits/:name",
templateUrl: "views/fruits.html",
controller: "fruitsCtrl"
})
.state('vegetables', {
url:"/vegetables/:name",
templateUrl: "views/vegetables.html",
controller: "vegetablesCtrl"
});
Happy Helping!
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