否则请访问 StateProvider

使用角 -ui 路由器,我怎样才能使用 $state Provider上的 其他方法或我怎样才能使用它在所有?

98071 次浏览

You can't use only $stateProvider.

You need to inject $urlRouterProvider and create a code similar to:

$urlRouterProvider.otherwise('/otherwise');

The /otherwise url must be defined on a state as usual:

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

See this link where ksperling explains

Ok, the silly moment when you realize that the question you asked is already answered 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 !




....

Take a look here.

You can with $stateProvider using the catch all syntax ("*path"). You just need to add a state config at the bottom of your list like the following one:

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

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

The nice thing of this option, as opposed to $urlRouterProvider.otherwise(...), is that you 're not forced to a location change.

You can also manually inject $state into the otherwise function, which you can then navigate to a non-url state. This has the benefit of the browser not changing the addressbar, which is helpful for handling going back to a 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+'"'
});
});

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

The highest-rated answer uses $stateProvider instead, and says something like .state("otherwise", { url : '/otherwise'... }), but I can't find any mention of "otherwise" in the documentation it links. However, I see that $stateProvider is mentioned in this answer where it says:

You can't use only $stateProvider. You need to inject $urlRouterProvider

That's where my answer might help you. For me, it was sufficient to use $urlRouterProvider just like this:

 my_module
.config([
, '$urlRouterProvider'
, function(
, $urlRouterProvider){
//When the url is empty; i.e. 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 specific revision), where it includes a similar use of the .when(...) method (the first call to the function):

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');
})

I just want to chime in on the great answers that are already provided. The latest version of @uirouter/angularjs marked the class UrlRouterProvider as deprecated. They now recommend using UrlService instead. You can achieve the same result with the following modification:

$urlService.rules.otherwise('/defaultState');

Additional methods: https://ui-router.github.io/ng1/docs/1.0.16/interfaces/url.urlrulesapi.html