AngularJS - Ui-router - Redirecting from root state automatically

Question

I would like simply to redirect from / to /shop each one somebody types the root. I tried with $state.go in the controller, but it didn't do the trick. I would like to do it without $urlRouterProvider.otherwise (as there are also urls without routing in my web). Any ideas how to do that? Thanks in advance!

 app.config(function($stateProvider, $urlRouterProvider) {
 $stateProvider.state('root', {
     url: "/",
     controller: {
         function() {
             $state.go('shop')
         }
     }
 }).state('shop', {
     url: "/shop",
     controller: 'myCtrl',
     templateUrl: "/shopcontent.jsp"
 })
});

Invoke a function in your controller when somebody types root and use $state.go to go to the desired page. Don't forget to inject $state in your controller — Vivz
– Vivz, Commented Aug 11, 2017 at 10:41
My problem is how to detect in my controller when somebody goes to / — Joe82
– Joe82, Commented Aug 11, 2017 at 10:52
You can use $state.current.name to get the current state name. In this case it will give you 'root'. — Gaara
– Gaara, Commented Aug 11, 2017 at 11:00
I tried something like this in my controller, but it doesn't seem to work (I made sure that $state was injected) (function() { if ($state.current.name == 'root') { $state.go('shop'); } }); — Joe82
– Joe82, Commented Aug 11, 2017 at 11:00

Lotus91 · Accepted Answer · 2017-08-11 13:42:03Z

2

Your controller should be as below :

 controller: function($state) {
               if ($state.current.name == 'root') { 
                  $state.go('shop'); 
               }
             }

You need to inject the $state inside your controller function.

edited Aug 11, 2017 at 13:42

answered Aug 11, 2017 at 13:36

Lotus91

1,1234 gold badges18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael G · Accepted Answer · 2017-09-05 02:19:39Z

Check out the redirectTo state definition property.

From the ui-router documentation:

Synchronously or asynchronously redirects Transitions to a different state/params

If this property is defined, a Transition directly to this state will be redirected based on the property's value.

https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto

Example:

.state('root', {
      url: "/",
      redirectTo: "shop"  
})

Full working example: here.

If you want any unknown route to redirect to /shop, you could use the following:

$urlRouterProvider.otherwise('/shop');

Valter · Accepted Answer · 2017-08-11 13:38:18Z

Try this:

On your run function add a listener to the $stateChangeStart so everything the state changes, it will check if it is root then will change to shop:

        .run(["$injector", "$rootScope",
                    function($injector, $rootScop) {
                        $rootScope.$state = $injector.get("$state");
                          //-----Track State Change for request Token -------------
                        $rootScope.$stateChangeStart = [];
                        $rootScope.$on("$stateChangeStart",
                            function(event, toState, toParams, fromState, fromParams) {
                                if (fromState.name == "root") {
                                   $state.go('shop')
                               }
                                $rootScope.$stateChangeStart.push({
                                    toState: toState,
                                    toParams: toParams,
                                    fromState: fromState,
                                    fromParams: fromParams
                                });
                            });
                    }
                ]);

I marked the other one as correct as the approach was more simple, but thanks for the insight!

Collectives™ on Stack Overflow

AngularJS - Ui-router - Redirecting from root state automatically

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related