Angular href='/' 未解析

Question

我将路由配置为重定向到默认页面 /patients，否则它将用户发送到 /login。目前，如果我导航到 localhost:<port>，我会看到默认页面。问题出在想点击href='/'的标志。当我这样做时，它不会调用 resolve 函数。本质上，它不呈现任何内容，并删除了旨在支持身份验证的页面元素。

这是配置错误吗？谁能告诉我这里发生了什么？如果您需要更多信息，请告诉我。谢谢。

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/patients', {
            templateUrl: '/templates/dashboard.html',
            requireLogin: true,
            resolve: {
                auth: function (SessionService) {
                    SessionService.resolve()
                }
            }
        }).
        when('/', {
            redirectTo: '/patients'
        }).
        otherwise({
            redirectTo: '/login'
        });

Answer 1

您需要将 link 设置为“#/”，因为您的 angular 路由正在 hashbang 模式下工作。查看此 thread 了解有关 hasgband 模式和 HTML5 模式的更多详细信息。如果您想从路由中删除“#”，请尝试启用 HTML5 模式。代码应该是 link 这个：

app.config(['$routeProvider', '$locationProvider' function ($routeProvider, $locationProvider) {
    $routeProvider.
        when('/patients', {
            templateUrl: '/templates/dashboard.html',
            requireLogin: true,
            resolve: {
                auth: function (SessionService) {
                    SessionService.resolve()
                }
            }
        }).
        when('/', {
            redirectTo: '/patients'
        }).
        otherwise({
            redirectTo: '/login'
        });
        $locationProvider
            .html5Mode(true)
}])

请注意，启用HTML5模式后，直接angular links可能不起作用。您将不得不稍微更改服务器配置以将 link 重写为应用程序中的入口点。如果您使用 ASP.NET，请在 web.config 中添加重写规则。在 system.webServer 部分

下添加

<rewrite>
    <rule name="HTML5 Compatible Mode" stopProcessing="true">
              <match url=".*" />
              <conditions>
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
              </conditions>
              <action type="Rewrite" url="/" />
    </rule>
</rewrite>

Angular href='/' 未解析

Angular href='/' not resolving

href

angularjs

route-provider