angularjs - 否则在 StateProvider 上

Question

使用 angular-ui-router，我如何在$stateProvider上使用 else方法，或者我该如何使用它？

Answer 1

你不能只使用$stateProvider.

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

$urlRouterProvider.otherwise('/otherwise');

/otherwiseurl 必须像往常一样在状态上定义：

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

请参阅ksperling 解释的此链接

Answer 2

您可以$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(...)是您不会被迫更改位置。

Answer 3

您还可以手动将 $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+'"'
        });
    });

Answer 4

我只是想加入已经提供的出色答案。最新版本@uirouter/angularjs将该类标记UrlRouterProvider为已弃用。他们现在建议UrlService改用。您可以通过以下修改获得相同的结果：

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

附加方法：https ://ui-router.github.io/ng1/docs/1.0.16/interfaces/url.urlrulesapi.html

Answer 5

好的，当您意识到您提出的问题已经在示例代码的第一行中得到回答时，这是一个愚蠢的时刻！只需看一下示例代码。

       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 ! 


          ....

看看这里。

Answer 6

接受的答案引用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');
})