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

标签 javascript angularjs angular-ui-router angularjs-routing

我使用 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> 中的 View 如所须。当我在第一次下载后使用地址栏将 url 更改为 localhost:port/Posts ，应用会刷新页面。

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

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

或者我如何设置带 Angular 客户端菜单？

最佳答案

Angular 知道你的路线，但你的网络服务器可能认为他需要在 map posts

中显示 index.html 页面

尝试将 html5Mode 设置为 false，看看它是否仍然发生 this link并查看有关 Hashbang 和 HTML5 模式的部分

尤其是最后一行需要服务器端配置:是

关于javascript - 使用 ui-router 的 Angularjs 客户端路由，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35154878/