Angular UI 路由器 - 未找到部分 GET 404

Question

我目前正在使用 Material Design Lite 和 Angular JS 开发一个项目。我在使用 Angular UI 路由器设置简单路由时遇到问题。

这里是索引导航栏中的链接。

 <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a href="/home" class="mdl-layout__tab is-active">Dashboard</a>
      <a href="/schedule" class="mdl-layout__tab">Schedule</a>
      <a href="/assignments" class="mdl-layout__tab">Assignments</a>
    </div>

请注意，我不能在 href 的 / 之前添加 #，因为 MDL 不会将其识别为有效的选择器。我已经尝试建立正常的链接，但它们仍然不会路由。

这是 ui-route 的应用配置。

app.config(function($stateProvider, $urlRouterProvider){

        $urlRouterProvider.otherwise('home');



        $stateProvider
        .state('home', {
            url: '/home',
            templateUrl : 'views/dashboard.html'

        })
        .state('assignments', {
            url: '/assignments',
            templateUrl : 'views/assignments.html'
        });

    });

这是我的项目的结构。

[app]
[js]
[views
--dashboard.html
--assignments.html]
app.js

主页状态 (dashboard.html) 在索引文件的 ng-view 中加载，但单击链接时无法显示分配。这是在我的 http-server 控制台中显示的内容。

[Tue Mar 14 2017 12:04:30 GMT-0500 (CDT)] "GET /assignments" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.101 Safari/537.36"
[Tue Mar 14 2017 12:04:30 GMT-0500 (CDT)] "GET /assignments" Error (404): "Not found"

感谢您的帮助！

Answer 1

如果您使用 nodejs 服务器来提供页面，您是否在应用程序中使用 html5Mode(true)？否则，您需要将哈希添加到您的锚标记中。

即

<a href="#/assignments">Assignments</a>

此外，由于您使用的是 ui-router，因此您可以使用 ui-sref 属性直接导航到状态名称。

即

<a ui-sref="assignments">Assignments</a>