Angular $routeProvider http://localhost/thisapp/ == 正常，http://localhost/thisapp/#/ == 错误。为什么？

Question

我在使用 $routeProvider 时遇到了（尽管是小问题）。

http://localhost/thisapp/ works fine, and redirects to the .otherwise() perfectly. But it seems that once the app is loaded and lands on the "home" url (http://localhost/thisapp/#/)

然后就坏了。

如果我导航到 http://localhost/thisapp the $location resolves to http://localhost/thisapp/#/

如果我刷新（因为你知道用户会这样做），那么代码就会中断

我试过使用 $locationProvider 但这更令人困惑。似乎我读得越多，我就越困惑，因为记录的内容似乎不起作用。（如果我取消注释下面的 $locationProvider 行，则不会生成任何内容）。我查看了 Whosebug 上的各种教程和问题，但没有像预期的那样工作。

这是我的配置代码：

myApp.config(function($routeProvider, $locationProvider) {

    // commented cuz it's not working 
    // $locationProvider.html5Mode(true);

    $routeProvider
        .when('/', {
            templateUrl: 'app2/components/templates/overview.html',
            controller: 'overviewController'
        })
        .when('/all_overview', {
            templateUrl: 'app2/components/templates/overview.html',
            controller: 'overviewController'
        })
        .when('/all_procurement', {
            templateUrl: 'app2/components/templates/procurement.html',
            controller: 'procurementController'
        })
        .when('/all_social', {
            templateUrl: 'app2/components/templates/social.html',
            controller: 'socialController'
        })
        .when('/all_strengthening', {
            templateUrl: 'app2/components/templates/strengthening.html',
            controller: 'strengtheningController'
        })
        .when('/all_sales', {
            templateUrl: 'app2/components/templates/sales.html',
            controller: 'salesController'
        })

        // otherwise go to all_overview
        .otherwise({
            redirectTo: '/all_overview'
        });
});

Answer 1

默认路由行为 (#) 和尝试启用 html5 路由似乎给您带来了问题。尽管您尝试 .html5Mode(true)，但较新版本的 AngularJS 具有 <base href /> 的概念并且需要额外的步骤才能工作。

Before Angular 1.3 we didn't have this hard requirement and it was easy to write apps that worked when deployed in the root context but were broken when moved to a sub-context because in the sub-context all absolute urls would resolve to the root context of the app. To prevent this, use relative URLs throughout your app

为了说明相对 URL 的含义，这里有一个简单的示例...

<!-- wrong: -->
<a href="/userProfile">User Profile</a>


<!-- correct: -->
<a href="userProfile">User Profile</a>

因此，当您说 "nothing generates"（我猜是白屏？）时，检查您的浏览器控制台，您会发现以下错误

Uncaught Error: [$location:nobase]

有几种方法可以解决这个问题。您可以通过以下方式在您的应用中包含 <base href /> 的概念

$locationProvider.html5Mode({
    enabled: true
});

<html ng-app="app">
    <head>
    <base href="/">
    </head>
    ...

或者您可以忽略此 <base> 标记并使用以下内容修改您的配置

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

有关该主题的更多信息，请参阅 Angular 文档

错误：$location:nobase HTML5 模式下的 $location 需要存在标签！

Angular $routeProvider http://localhost/thisapp/ == 正常，http://localhost/thisapp/#/ == 错误。为什么？

Angular $routeProvider http://localhost/thisapp/ == ok, http://localhost/thisapp/#/ == error. Why?

html

javascript

angularjs

angularjs-ng-route