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!!!

$urlRouterProvider .when('/Main', '/Main/PageOne') .otherwise("/notfound") I already have otherwise. — Johnson, Dec 08 '16 at 14:01

Sunil Hirole · Answer 1 · 2016-12-08T12:59:24.200

0

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

edited Dec 08 '16 at 12:59

answered Dec 08 '16 at 12:51

Sunil Hirole

239
3
11

$urlRouterProvider .when('/Main', '/Main/PageOne') .otherwise("/notfound") I already have otherwise. But i want a logic like i said: 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 /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. Thanks for aswer! – Johnson Dec 08 '16 at 13:59

score 0 · Answer 2 · edited May 23 '17 at 12:13

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.

actually i need a state abstract. Because i have 2 abstract states. for this question i put only one abstract state. i have already question something like this before. i think the other user understood better my question. take a look please: http://stackoverflow.com/questions/40864366/angularjs-when-and-otherwise-with-ui-rout — Johnson, Dec 08 '16 at 15:42

score 0 · Answer 3 · answered Dec 08 '16 at 18:13

0

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

answered Dec 08 '16 at 18:13

Aravind

40,391
16
91
110

Hi! I have .when because i have 2 abstract states. I will update my question. I made this way because i thought it was more easier to understand. UPDATED. – Johnson Dec 08 '16 at 19:06
can you connect with me in fb? – Aravind Dec 08 '16 at 19:09
Take a look now if you can help me, please =) – Johnson Dec 08 '16 at 19:18
Please don't add your questions and keep going. If u want tell me I'll Clearly explain with ur full code in view in team viewer – Aravind Dec 08 '16 at 19:39
Oh Really? i would like that so much! what is your facebook? i can show you tomorrow! – Johnson Dec 09 '16 at 10:44
aravind2109 see u der – Aravind Dec 09 '16 at 11:33

AngularJS - $stateProvider when user put wrong URL

3 Answers3