Otherwise on StateProvider

Question

Using angular -ui-router, how can I use the method differently on $ stateProvider or how can I use it at all?

Answer 1

You cannot use only $stateProvider .

You need to enter $urlRouterProvider and create code similar to:

 $urlRouterProvider.otherwise('/otherwise'); 

The /otherwise URL should be defined as usual:

  $stateProvider .state("otherwise", { url : '/otherwise'...}) 

See this link where ksperling explains

Answer 2

You can use $stateProvider with the syntax catch all ( "*path" ). You just need to add the state configuration at the bottom of the list, as shown below:

 $stateProvider.state("otherwise", { url: "*path", templateUrl: "views/error-not-found.html" }); 

All parameters are described in https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters .

The good thing about this parameter, unlike $urlRouterProvider.otherwise(...) , is that you are not forced to change the location.

Answer 3

You can also manually enter $ state into another function, after which you can switch to non-url state. This has the advantage of a browser that does not change the address bar, which is useful when accessing the previous page.

  $urlRouterProvider.otherwise(function ($injector, $location) { var $state = $injector.get('$state'); $state.go('defaultLayout.error', { title: "Page not found", message: 'Could not find a state associated with url "'+$location.$$url+'"' }); }); 

Answer 4

Well, a silly moment, when you understand that the question you have already asked already answers in the first lines of the sample code! Just take a look at the sample code.

  angular.module('sample', ['ui.compat']) .config( [ '$stateProvider', '$routeProvider', '$urlRouterProvider', function ($stateProvider, $routeProvider, $urlRouterProvider) { $urlRouterProvider .when('/c?id', '/contacts/:id') .otherwise('/'); // <-- This is what I was looking for ! .... 

Look at here.

Answer 5

accepted answer angular-route asks about ui-router . The accepted answer uses "monolithic" $routeProvider , which requires the ngRoute module (whereas ui-router needs the ui.router module)

the highest rating uses $stateProvider instead and says something like .state("otherwise", { url : '/otherwise'... }) , but I cannot find the mention of “otherwise” in the documentation that it binds . However, I see that $stateProvider is mentioned in this answer , which says:

You cannot use only $stateProvider . You need to enter $urlRouterProvider

Where my answer can help you. For me, it was enough to use $urlRouterProvider as follows:

  my_module .config([ , '$urlRouterProvider' , function( , $urlRouterProvider){ //When the url is empty; ie what I consider to be "the default" //Then send the user to whatever state is served at the URL '/starting' //(It could say '/default' or any other path you want) $urlRouterProvider .when('', '/starting'); //... }]); 

My suggestion is consistent with the ui-router documentation ( this particular version ), where it includes a similar use of the when(...) method (first function call):

 app.config(function($urlRouterProvider){ // when there is an empty route, redirect to /index $urlRouterProvider.when('', '/index'); // You can also use regex for the match parameter $urlRouterProvider.when(/aspx/i, '/index'); })