Transition to another state with state parameters

Question

Hi, I am new to angular routing and was wondering how I can go to different states through controllers.

I know that I have to enter the $ state service that I did, but I don’t understand how to use the transition method for the service.

This is what I have in my controller code to try switching, but it doesn’t work :( (I also tried $ stateService.go (...), but without 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!

thank

Answer 1

Do you mean this?

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

Documentation

Answer 2

There are two ways to do this:

1 - $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 - 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> 

:

$stateProvider
                .state('fruits', {
                    url:"/fruits/:name",
                    templateUrl: "views/fruits.html",
                    controller: "fruitsCtrl"
                })
                .state('vegetables', {
                    url:"/vegetables/:name",
                    templateUrl: "views/vegetables.html",
                    controller: "vegetablesCtrl"
                });

!

Answer 3

.

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

A convenient method of transition to a new state $state.go, which internally calls $state.transitionTo. I would rather use $state.goinstead$scope.transitionTo

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