Angularjs 使用 ui-router 的客户端路由

Question

我使用 ui-router（状态）作为我的路由：

$urlRouterProvider.otherwise('/Home');

$stateProvider
    .state('home', {
        url: '/Home',
        templateUrl: '/Home/Home',
        controller: 'MainCtrl'
    })
    .state('posts', {
        url: '/Posts',
        templateUrl: '/Home/Posts',
        controller: 'PostCtrl'
    });

$locationProvider.html5Mode(true);

在html中我有这样的东西：

<html>

<head>
    <base href="/" />
    <!--render scripts -->
    <title>My Angular App!</title>
</head>

<body ng-app="flapperNews" ngcloak>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <ul>
                <li><a ui-sref="home">Home</a></li>
                <li><a ui-sref="posts">Posts</a></li>
            </ul>
            <ui-view></ui-view>
        </div>
    </div>
</body>
</html>

当我使用我的菜单链接（主页、帖子）时，该应用程序运行良好，并根据需要更新我在 <ui-view></ui-view> 中的视图。当我在第一次下载后使用地址栏将 url 更改为 localhost:port/Posts 时，应用程序会刷新页面。

请记住，我从链接中删除了#。

为什么 angular 不知道我的路线？

或者如何使用 angular 设置客户端菜单？

Answer 1

Angular 知道您的路线，但您的网络服务器可能认为他需要在地图中显示 index.html 页面 posts

尝试将 html5Mode 设置为 false，看看它是否仍然发生 this link 并查看有关 Hashbang and HTML5 modes

的部分

尤其是最后一行requires server-side configuration: Yes

Angularjs 使用 ui-router 的客户端路由

Angularjs Client-Side Routing with ui-router

javascript

angularjs

angular-ui-router

angularjs-routing