Я пытаюсь создать приложение, содержащее несколько представлений в качестве шаблона. Шаблоны находятся в папке js/app/pages/
. И у меня есть 2 шаблона для показа и маршрутизации. Мой раздел маршрутизации:
var app = angular.module("myApp", ['ngRoute', 'ngMaterial']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/Page', {
templateUrl: 'js/app/pages/Page.html',
controller: 'pageController',
reloadOnSearch: false
})
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false
})
.when('/Admin', {
templateUrl: 'js/app/pages/Admin.html',
controller: 'adminController',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/Page'
});
$locationProvider.html5Mode(true);
});
И мой html файл содержит
<div id="menu"></div>
<div ng-view></div>
Меню div содержит элементы меню, которые направляют меня между страницами. Например, когда я запускаю этот сайт в браузере, URL-адрес будет localhost/Page, а когда я нажму кнопку URL-адреса кнопки настройки с помощью localhost/Settings. Но когда я нажимаю кнопку F5 на клавиатуре. Страница дает мне ошибку The resource cannot be found.
,
Я ищу в Интернете "как обновить страницу маршрутизации в angularjs" и найти некоторые решения, но я не мог заставить их работать для меня. Я пробовал $route.reload()
и $routeUpdate()
но это не работает для меня. Может быть, я что-то не так.
Решено! Мне не удалось обновить с помощью ngRoute. Затем я конвертирую его в ui-router. Я объявляю состояния по URL-адресам. И обновление работает. Спасибо за комментарии и ответы. Может быть, это поможет кому-то.
Если вы используете сервер Apache, это должно работать в терминале
sudo a2enmod rewrite && sudo service apache2 restart
работает на меня
Когда вы "перезагружаете страницу", ваше приложение снова будет снова создано. Это означает, что если вы не на главной странице, а на субтрассе у вас отсутствуют некоторые данные, вы, скорее всего, получите сообщение об ошибке.
Вы должны изучить атрибут разрешения для маршрутов, например,
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false,
resolve: {
resourceone: function(){return whatsneeedtoberesolvehere;}
}
})
таким образом, независимо от того, где ваше приложение будет перезагружено, у него будут необходимые данные для загрузки страницы
Отличная статья об этом здесь
начать очень просто
.config(function($routeProvider, $locationProvider) {
// other routes here
$locationProvider.html5Mode(true);
});
Просто держите # в URL-адресе, вам не нужно прикладывать дополнительные усилия для управления перезагрузками и т.д., Вы можете думать, что "#" в URL-адресе представляет собой конкретное состояние в приложении с одной страницей.
В противном случае он может управляться путем перезаписи модулей, которые отображают URL-адрес с хешированным URL-адресом версии для приложения AngularJs.
Фактически, когда вы нажимаете F5 с клавиатуры, он попадает на ваш сервер для этой страницы, а не угловатой, потому что у вас нет знака #
между вашим URL. Для углового URL должен выглядеть как - localhost/#/Page