手动导航在 ui-router for AngularJS 1.7 中不起作用
Manual navigation doesn't work in ui-router for AngularJS 1.7
我有以下状态配置:
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包含table个用户,home.html包含link到user.list.html:
<a class="btn btn-primary" ui-sref="user.list" role="button">View All Users</a>
当我启动应用程序并转到 localhost:8080
时,它显示我 home.html。然后,当我单击按钮 "View All Users" 时,它会显示 user.list.html,我会看到 table 个用户。 Evething 工作正常,但是当我尝试重新加载页面(按 F5)或手动导航到 localhost:8080/user/list
时,问题开始出现。它向我显示 404 错误页面。 我的问题是:为什么会这样?
这与 AngularJS 无关,而与您的网络服务器有关。您需要配置用于将 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 应用程序。
我有以下状态配置:
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包含table个用户,home.html包含link到user.list.html:
<a class="btn btn-primary" ui-sref="user.list" role="button">View All Users</a>
当我启动应用程序并转到 localhost:8080
时,它显示我 home.html。然后,当我单击按钮 "View All Users" 时,它会显示 user.list.html,我会看到 table 个用户。 Evething 工作正常,但是当我尝试重新加载页面(按 F5)或手动导航到 localhost:8080/user/list
时,问题开始出现。它向我显示 404 错误页面。 我的问题是:为什么会这样?
这与 AngularJS 无关,而与您的网络服务器有关。您需要配置用于将 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 应用程序。