How can redirect to 404 page in Angular ui router

Question

Hi I am getting problem while implementing 404 page using angular ui router' Scenario when the user type something in the url which was not present in the app i have to show 404 page not found page

What I tried

app.js

var myapp = angular.module('myapp', ['ui.router']);

myapp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/xxx/xxxoverview');

    $stateProvider.state('xxx', {
        url:'/xxx',
        templateUrl :'partials/xxx/xxxOverview.html',
        controller:'xxxAccordionCtrl'
    })
     .state('404', {
        url:'/404',
        templateUrl :'404.html'

    });

My Actual Design

I am getting the following response

I am expecting

guy mograbi · Accepted Answer · 2015-08-25 11:02:05Z

2

In order to get what you are expecting you need to write your layout better.

You layout is currently:

 <div>
     .. some layout code here 
     <div> navigation here </div>
     <div ui-view></div>
     ..some more layout
 </div>

in order to get the result you want you have use nested ui-views

 <div>
       .. outer layout
       <div ui-view> 
             .. inner layout
             <div> navigation here </div>
             <div ui-view></div>
             .. inner layout cont. 
       </div>
        .. outer layout cont. 
</div>

and change the routing accordingly.

if you give me a couple of minutes I will prepare a plunkr for you.

So this is a plunker for you: http://plnkr.co/edit/Y6PqRhrbvpEpWApm9lkS?p=preview

and this is the breakdown of the code I did

$stateProvider
     .state('layout', {
       template: 'my navigation <div ui-view></div>'

     } )
     .state('layout.page', {
       url: '/page',
       template: 'this is my content go see a missing page <a href="#/404">missing page link</a>'
     })
     .state('404', {
       url:'/404',
       template: '404!!! page is missing'
     });

As you can see I have an "abstract" state called "layout", which basically defines template but that's it! no url, no controller no nothing.

I add the navigation in the template, and then another ui-view. - NOTE I already have a ui-view on my index.html. other than that that index.html can be empty as far as I care. I added hello there just so you have a point of reference.

then my page is a nested state inside layout. see state layout.page. This is what is so great in angular-ui-router. This way you can have different layouts for different sections of the website. So my page uses the layout simply by nesting the state.

then I have a different state which I called 404. Since it does not inherit from layout, it will not have the navigation.

edited Aug 25, 2015 at 11:02

answered Aug 25, 2015 at 10:55

guy mograbi

28.9k17 gold badges92 silver badges128 bronze badges

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

5 Comments

guy mograbi Over a year ago

@RavindharKonka - added plunker + explanation. if you have any question please let me know.

Ravindhar Konka Over a year ago

I have gone through the plunker But how can I valid the url .In the plunker u gave link to navigate 404 page But if the user enter invalid user then i want 404 page can you please help me

guy mograbi Over a year ago

@RavindharKonka - that is a different problem and you can find the solution at:: stackoverflow.com/questions/23438664/…

Ravindhar Konka Over a year ago

thanks @guy mograbi you are resolve my problem and I supported (UpVote) this answer :)

guy mograbi Over a year ago

@RavindharKonka please consider marking my answer as the solution (press the check mark) so it will not appear as "open" in the search.

Ivan Coronado · Accepted Answer · 2015-08-25 10:55:16Z

1

Have you your index.html like this?

<nav>You navigation</nav>
<ui-view> </ui-view>

You can put your <nav>You navigation</nav> in templateUrl :'partials/xxx/xxxOverview.html'

answered Aug 25, 2015 at 10:55

Ivan Coronado

1,0188 silver badges15 bronze badges

Collectives™ on Stack Overflow

How can redirect to 404 page in Angular ui router

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related