Я создал небольшое веб-приложение, где я использую UI-Router для навигации по его страницам. Все работает отлично от обновления браузера или доступа к конкретной странице, используя ссылку состояния. Я попробовал несколько решений, размещенных здесь по одной теме, но не из них помогли, возможно, из-за отсутствия дополнительной информации.
Когда я нажимаю ссылку ui-sref ниже, я получаю "mysite/content", а страница отображается нормально, но как только я обновляю ее или пытаюсь получить доступ, просто вставив ссылку, она не найдет страницу.
Не могли бы вы помочь мне, чтобы он работал так, как ожидалось. Заранее спасибо.
HTML
<p ui-sref="content">Link To Content</p>
AngularJS
var app = angular.module('myApp',['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouteProvider, $locationProvider){
$urlRouteProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
views: {
'': { templateUrl: '/app/templates/wrapper.html'},
'nav@home': { templateUrl: '/app/templates/nav.html'},
'header@home': { templateUrl: '/app/templates/header.html'},
'footer@home': { templateUrl: '/app/templates/footer.html'}
}
})
.state('content', {
url: '/content',
views: {
'': { templateUrl: '/app/templates/content.html'},
'nav@content': { templateUrl: '/app/templates/nav.html'},
'header@content': { templateUrl: '/app/templates/header.html'},
'footer@content': { templateUrl: '/app/templates/footer.html'}
}
});
$locationProvider.html5Mode(true);
}])
Если для html5Mode установлено значение true, при обновлении страницы ваш браузер отправит запрос "mysite/content". В классических одностраничных приложениях у вашего back-end есть набор маршрутов, которые отвечают на некоторые данные, и обычно он настроен на возврат приложения index.html для всех других маршрутов (например, "mysite/content").
Он работает, когда вы отключите html5Mode, потому что браузер делает запрос к URL-адресу без части после "#", для которой ваш back-end, безусловно, возвращает ожидаемый index.html.