logo标签列表

否则，关于StateProvider

angularjsangular-uiangular-ui-router
96
你想要做什么？（请注意，我不完全理解$stateProvider.otherwise，所以这会帮助我） - Kevin Meredith
6个回答
124

您不能仅使用$stateProvider。

您需要注入$urlRouterProvider并创建类似以下代码：

$urlRouterProvider.otherwise('/otherwise');

需要像平常一样在状态上定义 /otherwise URL：

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

请查看此链接，在此处ksperling解释了

1
你实际上可以使用 $stateProvider。如果你只想显示一个模板而不是重定向，那么这样做会更简单。我更喜欢 @juan-hernandez 的答案。 - Dennis Hackethal
传递给otherwise（在本例中为'/otherwise'）的值必须与状态名称（.state的第一个参数）或url选项的值匹配吗？ - d512
此内容已过时 - 请参考babyburger的答案 - Vedran
83
您可以使用$stateProvider和catch all syntax ("*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(...)不同的是，这个选项的好处是你不需要强制进行位置更改。
请问您能否详细说明一下：“您不必强制更改位置”？ - Kevin Meredith
1
他的意思是URL将保持不变。因此，如果用户进入“/this/does/not/exist”，那么地址栏中的URL将保持不变。另一种解决方案将带您进入“/otherwise”。 - Matt Greer
我使用了你的解决方案并且它起作用了（我可以保留未找到的URL，这很棒，因为我使用http://luisfarzati.github.io/angulartics/，这样我也可以看到导航到未找到页面的情况）。这个解决方案适用于用户导航到不存在的URL的情况。但是，如果我在控制器内使用$state.go('otherwise')导航到该URL，我就会失去该URL。当用户进入某个项目的详细页面时，如果服务器返回404（例如，如果项目已删除），我会明确地导航到这个状态。你知道如何解决这个问题吗？ - pcatre
@pcatre，您可以使用选项location=false，这样URL就不会改变。例如：$state.go('otherwise',{},{location:false})。 - JakubKnejzlik
36

您还可以手动将$state注入到otherwise函数中，然后导航到非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时使用otherwise - 非常感谢 :) - Jörn Berkefeld
你救了我的一天！ - Maelig
不要忘记，如果你想要最小化这个，你需要使用 $inject。 - Sten Muchow
4
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。已接受的答案使用"单体"$routeProvider，需要ngRoute模块（而ui-router需要ui.router模块）。

最高评分的答案使用$stateProvider，并且类似于.state("otherwise", { url : '/otherwise'... })， 但我在它链接的文档中找不到“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');
})
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接