Question

我正在寻找在Angular 1.5中编写链接和路径的最佳实践。

给出以下配置：

angular.module('my-app', ['ngRoute'])
    .config(function ($locationProvider) {
        $locationProvider.html5Mode({enabled: true});
    });

当我在html文档中有基础引用时，这不起作用：

<html>
    <head>
        <base href="/my-app/"/>
        ...
    </head>
    <body>
        <a ng-href="/my-section">My section</a>
    </body>
</html>

点击该链接会将我放在绝对的url / my-section中，但不存在。位置服务也是如此：

$location.path('/my-section') // Change my url at /my-section, not /my-app/my-section

可以通过将所有链接替换为具有效果的相对链接或将我重定向到/ my-app / my-section来轻松修复：

<a ng-href="my-section">My section</a>
$location.path('my-section')

但是，根据$ location service的文档：

路径应始终以正斜杠（/）开头，此方法将添加如果缺少正斜杠。 https://docs.angularjs.org/api/ng/service/ $位置

这基本上告诉我，建议是使用正斜杠启动所有链接。在我的情况下这怎么可能？

Answer 1

如果你的应用索引看起来像'http://example.com/'，我认为你应该只给'/'作为基础href。

如果您的索引网址看起来像“http://example.com/my-app/”，则基本href值将为“/ my-section”。

实际上，它取决于索引页面的url。所以，请通过这种方式：）

Answer 2

<html>
    <head>
          <base href="/"></base>
        ...
    </head>
    <body>
        <a ng-href="my-app/my-section">My section</a>
    </body>
</html>

将基本网址设置为正斜杠

使用html5模式编写链接（路径，href）的角度最佳实践

2 个答案: