0

Is it possible to "set" the view when a user accesses a missing state? I wanted the 404 handler to only some notice if the user tried to access a non-existent page instead of a redirecting the user.

Something similar to Github's 404.

srph
  • 1,312
  • 17
  • 35
  • 1
    Use the `otherwise`. Here is a link to another post: http://stackoverflow.com/questions/23281351/angular-ui-router-handling-404s – Kousha Sep 08 '14 at 21:24
  • I think I've found the answer. Will try, then answer my question if nobody does. – srph Sep 08 '14 at 21:28
  • if state is missing we **cannot** change the template - which belongs to state. We really need to navigate to `otherwise` def... where should be state, where should be proper template. Check [this](http://stackoverflow.com/a/25591908/1679310) – Radim Köhler Sep 09 '14 at 05:25

2 Answers2

4

As @cshion said you can catch $stateNotFound and go to another state or something you want.

app.run(['$rootScope', '$state', function ($rootScope, $state) {
  $rootScope.$on("$stateNotFound", function (event, unfoundState, fromState, fromParams) {
        $state.go('my404state');
  });
}]);

This will work only by invoking $state.go('missingstate'); but if the user types a fake url not work. so is more suitable for testing/debugging purposes.

In the other hand you can redirect the user using $urlRouterProvider.otherwise

app.config( ['$stateProvider', '$urlRouterProvider',
   function ($stateProvider,   $urlRouterProvider) {
       $urlRouterProvider
           .when('/', [$state, function($state) { $state.go('home') }])
           .otherwise('/notfound');
    }
]);

And create a specific state to show 404 not found.

EDIT: based on comments.

Another option is to use $urlRouterProvider.rule for custom url handling

app.config(['$urlRouteProvider','MyAuthService', function ($urlRouterProvider) {
  
   $urlRouterProvider
         .when('/', [$state, function($state) { $state.go('home') }])
         .rule(function ($injector, $location) {
               if (MyAuthService.isAuthenticated()) {
                   return "/user/mainpage";
               }
               return $location.path();
          })
         .otherwise('/notfound');
}])

Note that otherwise wraps a rule that returns the same url that receive.

Community
  • 1
  • 1
rnrneverdies
  • 15,243
  • 9
  • 65
  • 95
  • Actually I'm using this approach , but what happens when we are managing authenticated users, if type a fake url, a better option is redirect to user's main page so in that case, we need to manage fake states( or locations) inside app.run I think. – cshion Sep 09 '14 at 02:53
  • Does $state.go change the URL / location ($window.location)? – srph Sep 10 '14 at 17:01
  • yes, [$state.go()](https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options) – rnrneverdies Sep 10 '14 at 19:31
1

You could check state change events in your app.run function.. something like this..

app.run(function ($rootScope, $state) {
  $rootScope.$on("$stateNotFound", function (event, unfoundState, fromState, fromParams) {
        //manage state not found
  });
});

Source: https://github.com/angular-ui/ui-router/wiki

cshion
  • 1,173
  • 1
  • 10
  • 19