Angular UI-Router将根URL发送到404

I am having an infuriating issue regarding ui-router. Everything works as I want, where all bad urls are sent to the 404 state. However, even though my default state is correctly rendered when the url is /#/, the url of / is redirected to /404/. How can I server the default state to both / and /#/?

关于ui-router我有一个令人生气的问题。一切都按照我的意愿运作，所有不良网址都被发送到404状态。但是，即使在url为/＃/时正确呈现了我的默认状态，/的url也会重定向到/ 404 /。如何将默认状态服务于/和/＃/？

app.js

app.js

MyApp.config( function ($stateProvider, $urlRouterProvider) {

// For any unmatched url, send to 404
$urlRouterProvider.otherwise("/404/");

$stateProvider
    // Home  (default)
    .state('default', {
        url: '/',
        resolve: {
            ...
        },
   }
});

Any help much appreciated.

任何帮助非常感谢。

2 个解决方案

#1

I think this will accomplish your needs -

我认为这将满足您的需求 -

MyApp.config(function($stateProvider, $urlRouterProvider) {
    // the known route
    $urlRouterProvider.when('', '/');

    // For any unmatched url, send to 404
    $urlRouterProvider.otherwise('/404');

    $stateProvider
        // Home  (default)
        .state('default', {
            url: '/',
            resolve: {
                // ...
            }
            // ....
        });
});

I refered to this post. You may need to use a regular expression to handle routes with data.

我指的是这篇文章。您可能需要使用正则表达式来处理包含数据的路由。

Instead of the # in your URL you can use a query string too and grab it via $stateParams in a state.

您可以使用查询字符串代替URL中的＃，并通过状态中的$ stateParams获取它。

Here is how you can do that -

这是你如何做到的 -

  // ....

  $stateProvider

    .state('default', {
        url: '/?data',
        templateUrl: 'templates/index.html',
        controller: 'defaultCtrl'
    })

And then you can use this below to go to home with data -

然后你可以使用下面的数据回家 -

var toStateData = {
    key1: 'value1',
    key2: 'value2'
}

$state.go('default', {data: JSON.stringify(toStateData)});

You don't have to stringify the data in $stateParams but this will allow more options with one parameter. In the defaultCtrl controller you can get the passed query string like this -

您不必在$ stateParams中对数据进行字符串化，但这将允许使用一个参数的更多选项。在defaultCtrl控制器中，您可以像这样获取传递的查询字符串 -

var stateData = JSON.parse($stateParams.data);
var key1 = stateData.key1;
// ....

#2

I wanted to do this only with states, so no url provider involved. I found the following solution which I think is good:

我想只在状态下这样做，所以没有涉及网址提供者。我发现以下解决方案我觉得很好：

(sorry it's coffeescript)

（对不起，这是coffeescript）

  $stateProvider.
    state('base.public.notFound',
      url:         '^*path'
      templateUrl: 'views/layouts/404.html'
    )

Put this as the last state and you are done!

把它作为最后一个状态，你就完成了！

#1