Ручная навигация не работает в UI-роутере для AngularJS 1.7 - PullRequest
Новая
       7

Ручная навигация не работает в UI-роутере для AngularJS 1.7

0 голосов
/ 16 сентября 2018

У меня есть следующая конфигурация состояния: 

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. Мой вопрос: почему это происходит?

1 Ответ

0 голосов
/ 16 сентября 2018

Это не имеет ничего общего с AngularJS, кроме вашего веб-сервера. Вам необходимо настроить сервер, который вы используете для маршрутизации ошибок 404 в ваш home.html. Когда вы запрашиваете localhost:8080/user/list, ваш сервер не находит ресурс для /user/list.

Подумайте, что происходит, когда вы загружаете localhost: 8080. Вы получаете home.html и ваше приложение AngularJS инициализируется. Когда вы меняете маршрут с localhost: 8080 на localhost:8080/user/list, запускается обработчик маршрута от ui-router. HTTP-запрос не отправляется на веб-сервер. Когда вы вручную вводите маршрут или нажимаете клавишу F5, вы отправляете http-запрос на веб-сервер в поисках ресурса / пользователя / списка, который не существует на сервере, поэтому вы получаете ошибку 404 not found. Вам необходимо настроить 404 ошибки для загрузки home.html, который загрузит приложение AngularJS.

...