AngularJS - $stateProvider when user put wrong URL

Question

I'm new angularjs student. I'm using state provider in my project, i don't want to change this. Because the code is done.

Here is my code:

function config($stateProvider, $urlRouterProvider) {



$urlRouterProvider 
 .when('/SecondMain', '/SecondMain/OtherPageOne')
 .when('/Main', '/Main/PageOne')
 .otherwise("/notfound")

$stateProvider
    .state('Main', {
        abstract: true,
        url: "/Main",
        templateUrl: "/templates/Common/Main.html"
    })
    .state('SecondMain', {
        abstract: true,
        url: "/SecondMain",
        templateUrl: "/templates/Common/SecondMain.html"
    })
    .state('notfound', {
        url: "/NotFound",
        templateUrl: "/templates/Common/NotFound.html"
    })
    .state('Main.PageOne', {
        url: "/Main/PageOne",
        templateUrl: "/templates/Main/PageOne.html"
    })
    .state('Main.PageTwo', {
        url: "/Main/PageTwo",
        templateUrl: "/templates/Main/PageTwo.html"
    })
    .state('SecondMain.OtherPageOne', {
        url: "/SecondMain/PageOne",
        templateUrl: "/templates/SecondMain/OtherPageOne.html"
    })
    .state('SecondMain.OtherPageTwo', {
        url: "/SecondMain/PageTwo",
        templateUrl: "/templates/SecondMain/OtherPageTwo.html"
    })
angular
    .module('inspinia')
    .config(config)
    .run(function ($rootScope, $state) {
        $rootScope.$state = $state;
    });
}

I want a logic like this: If the user put:

/Main/PageThree

This page does not exist, but the user start URL with

/Main

so that he need to go to -> /Main/PageOne

if the user put:

/Ma/PageOne

/Ma does not exist, the user starts URL totally wrong, so that he goes to -> /Notfound Basically if the user put /Main/WRONG_LINK, he go to /Main/PageOne . And if he does not start with /Main, he go to NotFound.

Can anyone help me please?

Thanks a lot!!!

Answer 1

You are missing this configuration

$urlRouterProvider.otherwise('/NotFound');

Just add this line if no matching route is found then it will redirect you to the /NotFound url

Answer 2

This answer is inspired by this answer.

First of all, you will have to make the Main state non-abstract, so that it can be visited. Then, you can write config related to where you want to redirect (for example, I've used redirectTo with the state):

$stateProvider
  .state('Main', {
      redirectTo: "Main.PageOne",
      url: "/Main",
      templateUrl: "/templates/Common/Main.html"
  })
// ... Rest of code

So, whenever the URL is changed to /Main, this state will get activated. The second config will be to create a listener for $stateChangeStart event as follows:

angular
  .module('inspinia')
  .config(config)
  .run(function ($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params, { location: 'replace' })
      }
    });
  });

Now, if a URL like /Ma/* is hit, it automatically be redirected to /NotFound. And if a URL like /Main is hit, it will redirect to /Main/PageOne.

You can follow up on further discussion on this link for any kind of troubleshooting.

Answer 3

Clearly read the statements below

Why are you using this line?

when('/Main', '/Main/PageOne')

For your redirection problem, have a look at the below state

.state('Main', {
    abstract: true,
    url: "/Main",
    templateUrl: "/templates/Common/Main.html"
})

abstract: true ==> This denotes that this particular state is an abstract which can never be activated without its child.

SOURCE: ui-router js code. Refer the below snippet

Since you have this main state as abstract, you are redirected to the otherwise.

Hope this