Question

我具有以下状态配置：

function stateConfig($stateProvider) {
    $stateProvider
        .state("home", {
            url: "/",
            templateUrl: "/app/home/template/home.html",
            controller: "HomeController as homeController"
        });
        .state("user", {
            abstract: true,
            url: "/user",
            template: "<ui-view/>"
        })
        .state("user.list", {
            url: "/list",
            templateUrl: "/app/user/template/user.list.html",
            controller: "UserListController as userListController"
        });
}

user.list.html包含一个用户表，home.html包含指向user.list.html的链接：

<a class="btn btn-primary" ui-sref="user.list" role="button">View All Users</a>

当我启动应用程序并转到localhost:8080时，它将显示home.html。然后，当我单击“查看所有用户”按钮时，它向我显示user.list.html，并看到一个用户表。一切正常，但问题开始，当我尝试重新加载页面（按F5键）或手动导航到localhost:8080/user/list时。它显示404错误页面。 我的问题是：为什么会这样？

Answer 1

这与AngularJS无关，但与您的Web服务器无关。您需要配置用于将404错误路由到home.html的服务器。当您请求localhost:8080/user/list时，您的服务器找不到/user/list的资源。

想想当您加载localhost：8080时会发生什么。您获得home.html，并且AngularJS应用程序已初始化。当您将路由从localhost：8080更改为localhost:8080/user/list时，会触发ui-router的路由处理程序。没有http请求发送到Web服务器。当您手动键入路由或按F5键时，您会向Web服务器发送一个http请求，以查找服务器上不存在的资源/ user / list，因此会出现404 not found错误。您需要配置404错误来加载home.html，这将加载AngularJS应用。

手动导航在AngularJS 1.7的ui-router中不起作用

1 个答案: