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

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

• javascript
• asp
• angularjs
• angular-ui-router

3 Answers 3

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!

It would be simply like below.

$stateProvider.state('contacts', {
   url: '/:path',
   templateUrl: function ($stateParams){
     return '/Templates?path=' + $stateParams.path;
   }
 })

Convenience method for transitioning to a new state, $state.go which which internally calls $state.transitionTo. I'd preferred to use $state.go instead of $scope.transitionTo

$state.go("teststate",{ path: 'Test.TestState' });