否则在StateProvider上


Answers:


123

你不能只使用 $stateProvider

您需要注入$urlRouterProvider并创建类似于以下内容的代码:

$urlRouterProvider.otherwise('/otherwise');

/otherwiseURL必须在国家像往常一样被定义:

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

ksperling解释的地方查看此链接


您可以实际使用$stateProvider。如果您只想显示模板而不重定向,则工作量较少。我喜欢@ juan-hernandez的答案。
weltschmerz

otherwise(在这种情况下'/otherwise')传递的值是否必须与状态名称(的第一个参数.state)或urloption 的值匹配?
d512 '16

这是现在已经过时-见回答@babyburger
韦德兰

81

您可以$stateProvider使用catch all语法"*path")。您只需要在列表底部添加一个状态配置,如下所示:

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

所有选项均在https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters中进行了说明。

与相比,此选项的好处$urlRouterProvider.otherwise(...)是,您不必强制更改位置。


您能详细说明you're not forced to a location change一下吗?
凯文·梅瑞迪斯

1
他的意思是网址将保持原样。因此,如果用户转到/this/does/not/exist,则该URL将以这种方式保留在地址栏中。另一个解决方案将带您/otherwise
Matt Greer 2014年

我使用了您的解决方案,它可以正常工作(我可以保留未找到的URL,这很好,因为我正在使用luisfarzati.github.io/angulartics,这样我也可以看到导航到未找到的页面的情况)用户导航到的网址不存在。但是,如果我在控制器内使用$ state.go('otherwise')导航至此URL,则会丢失该URL。当用户转到项目的详细信息页面并且服务器返回404(例如,如果该项目已删除)时,我将明确导航到此状态。您知道解决此问题的方法吗?
pcatre 2014年

@pcatre,您可以使用location = false选项,并且网址不会更改。例如。$ state.go('otherwise',{},{location:false})
JakubKnejzlik 2015年

35

您还可以手动将$ state注入else函数中,然后可以导航至非URL状态。这具有浏览器不更改地址栏的优点,这有助于处理返回上一页。

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

这解决了我关于如何检查,如果我们中间的应用程序问题或为onload以外的情况下使用-非常感谢你:)
乔恩Berkefeld

你救了我的一天!
Maelig '16

不要忘记,如果您想最小化这个,您需要$ inject
Sten Muchow '16

3

好的,当您意识到所询问的问题已经在示例代码的第一行中得到了回答时,真是愚蠢的时刻!只需看一下示例代码。

       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 ! 


          ....

在这里看看。



0

接受的答案引用angular-route询问ui-router。接受的答案使用“ monolithic” $routeProvider,它需要ngRoute模块(而ui-router需要ui.router模块)

收视率最高的答案使用$stateProvider代替,并说像.state("otherwise", { url : '/otherwise'... }),但我找不到在“否则”任何提及它链接的文档。但是,我看到此答案$stateProvider提到的内容是:

您不能只使用$stateProvider。你需要注入$urlRouterProvider

那是我的答案可能会帮助您的地方。对我来说,使用$urlRouterProvider像这样就足够了:

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

我的建议与ui-router 文档此特定修订版)一致,在文档中还包含的类似用法。when(...)方法(对函数的第一次调用):

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');
})
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.