Я хочу включить режим HTML5 для моего приложения. Я поставил следующий код для конфигурации, как показано здесь :
return app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix = '!';
$routeProvider.when('/', {
templateUrl: '/views/index.html',
controller: 'indexCtrl'
});
$routeProvider.when('/about',{
templateUrl: '/views/about.html',
controller: 'AboutCtrl'
});
Как вы можете видеть, я использовал $locationProvider.html5mode
и изменил все свои ссылки в, ng-href
чтобы исключить /#/
.
Эта проблема
На данный момент я могу перейти на localhost:9000/
страницу индекса и перейти к другим страницам, как localhost:9000/about
.
Однако проблема возникает, когда я обновляю localhost:9000/about
страницу. Я получаю следующий вывод:Cannot GET /about
Если я смотрю на сетевые звонки:
Request URL:localhost:9000/about
Request Method:GET
Хотя, если я сначала зайду, localhost:9000/
а затем нажму на кнопку, которая перейдет к, /about
я получу:
Request URL:http://localhost:9000/views/about.html
Который прекрасно отображает страницу.
Как я могу включить Angular для получения правильной страницы при обновлении?
angularjs
html
angular-routing
Дитер де Месмакер
источник
источник
Ответы:
Из угловых документов
Причина этого заключается в том, что при первом посещении страницы (
/about
), например, после обновления, браузер не может узнать, что это не настоящий URL, поэтому он загружается и загружается. Однако, если вы сначала загрузили корневую страницу и весь код javascript, то при переходе на/about
Angular можно попасть туда, прежде чем браузер попытается подключиться к серверу и обработать его соответствующим образом.источник
$routeProvider
и изменить пути каждого,templateUrl
например, сtemplateUrl : '/views/about.html',
наtemplateUrl : 'example.com/views/about.html',
?Есть несколько вещей, которые нужно настроить, чтобы ваша ссылка в браузере была похожа,
http://yourdomain.com/path
и это ваша угловая конфигурация + сторона сервера1) AngularJS
2) на стороне сервера, просто поместите
.htaccess
в свою корневую папку и вставьте этуБолее интересные материалы для чтения о режиме html5 в angularjs и конфигурации, требуемой для разных сред https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -to-work-with-html5mode Также этот вопрос может помочь вам $ location / переключения между html5 и режимом hashbang / переписыванием ссылок
источник
У меня была похожая проблема, и я решил ее:
Использование
<base href="https://stackoverflow.com/index.html">
на странице индексаИспользуя промежуточное ПО перехвата всех маршрутов на моем узле / сервере Express следующим образом (поместите его после маршрутизатора):
Я думаю, что это должно заставить вас работать.
Если вы используете сервер Apache, вы можете захотеть изменить ваши ссылки mod_rewrite. Это не сложно сделать. Всего несколько изменений в конфигурационных файлах.
Все, что предполагает, что html5mode включен на angularjs. Сейчас. обратите внимание, что в угловых 1.2 объявление базового URL больше не рекомендуется на самом деле.
источник
<base href="https://stackoverflow.com/">
и добавлением предложенной вами экспресс-маршрутизации. Большое спасибо.<base href="https://stackoverflow.com/index.html">
?Решение для BrowserSync и Gulp.
С https://github.com/BrowserSync/browser-sync/issues/204#issuecomment-102623643
Первая установка
connect-history-api-fallback
:Затем добавьте его в свой gulpfile.js:
источник
server: { ... }, port: 8100
Затем просто добавьтеserve
задачу в заданную по умолчанию задачу gulp (т.е.gulp.task('default', ['sass', 'serve']);
), а затем вы можете запустить приложение безCannot GET ...
ошибок браузера при обновлении страницы при запускеgulp
. Обратите внимание, что при запуске сервера сionic serve
ошибками все еще встречается.Вам нужно настроить свой сервер так, чтобы все переписывалось в index.html для загрузки приложения:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5mode
источник
try_files $uri $uri/ /index.php?...
вместо нужной строки была указана соответствующая строка nginxindex.html
. Спасибо за ссылку!Я написал простое промежуточное ПО для подключения, имитирующее переписывание URL-адресов в проектах grunt. https://gist.github.com/muratcorlu/5803655
Вы можете использовать так:
источник
$routeProvider
?urlRewrite
не определенное предупреждение при попытке запустить его, и мне трудно найти правильное соединение с перезаписью, которое я могу использовать.Если вы находитесь в стеке .NET с MVC с AngularJS, это то, что вам нужно сделать, чтобы удалить '#' из URL:
Настройте ваш базовый href на странице _Layout:
<head> <base href="https://stackoverflow.com/"> </head>
Затем добавьте следующее в конфигурацию вашего углового приложения:
$locationProvider.html5Mode(true)
Выше удалит «#» из URL, но обновление страницы не будет работать, например, если вы находитесь на странице «yoursite.com/about», обновление даст вам 404. Это потому, что MVC не знает об угловой маршрутизации и по шаблону MVC это будет искать страницу MVC для 'about', которой нет в пути маршрутизации MVC. Обходной путь для этого состоит в том, чтобы отправить все запросы страницы MVC к одному представлению MVC, и вы можете сделать это, добавив маршрут, который перехватывает все URL
источник
Правило перезаписи URL IIS для предотвращения ошибки 404 после обновления страницы в html5mode
Для углового запуска под IIS в Windows
NodeJS / ExpressJS Маршруты для предотвращения ошибки 404 после обновления страницы в html5mode
Для углового бега под Node / Express
Дополнительная информация: AngularJS - включить обновление страницы в режиме HTML5 без ошибок 404 в NodeJS и IIS
источник
Как уже упоминали другие, вам нужно переписать маршруты на сервере и установить
<base href="https://stackoverflow.com/"/>
.Для
gulp-connect
:npm install connect-pushstate
источник
Я использую apache (xampp) в своей среде разработки и apache на производстве, добавьте:
.htaccess решить для меня эту проблему.
источник
Для Grunt и Browsersync используйте connect-modrewrite здесь
источник
npm install connect-modrewrite --save
2.require in gruntfile
3. скопируйте вышеуказанный серверный объектЯ решил
источник
Я отвечаю на этот вопрос из более крупного вопроса:
Когда у вас включен html5Mode, символ # больше не будет использоваться в ваших URL. Символ # полезен, поскольку не требует настройки на стороне сервера. Без #, URL выглядит намного лучше, но это также требует переписывания на стороне сервера. Вот некоторые примеры:
Для Express Rewrites с AngularJS вы можете решить эту проблему с помощью следующих обновлений:
и
и
источник
Я считаю, что ваша проблема в отношении сервера. В англоязычной документации по режиму HTML5 (по ссылке в вашем вопросе) говорится:
На стороне сервера Для использования этого режима требуется перезапись URL на стороне сервера, в основном вам нужно переписать все ваши ссылки на точку входа вашего приложения (например, index.html)
Я считаю, что вам нужно настроить переписать URL-адрес с / о /.
источник
У нас был сервер перенаправления в Express:
и у нас все еще возникали проблемы с обновлением страницы, даже после того, как мы добавили
<base href="https://stackoverflow.com/" />
.Решение: убедитесь, что вы используете реальные ссылки на своей странице для навигации; не вводите маршрут в URL, иначе вы получите обновление страницы. (глупая ошибка, я знаю)
:-П
источник
Наконец, у меня появился способ решить эту проблему на стороне сервера, так как это больше похоже на проблему с самими AngularJ, я использую 1.5 Angularjs и у меня возникла такая же проблема при перезагрузке страницы. Но после добавления приведенного ниже кода в мой
server.js
файл это спасает мой день, но это не является правильным решением или не хорошим способом.источник
Я нашел даже лучший плагин Grunt, который работает, если у вас есть index.html и Gruntfile.js в одном каталоге;
После этого в вашем Gruntfile:
источник
источник
У меня была такая же проблема с приложением java + angular, созданным с помощью JHipster . Я решил это с помощью фильтра и списка всех угловых страниц в свойствах:
application.yml:
AngularPageReloadFilter.java
WebConfigurer.java
Надеюсь, это будет полезно для кого-то.
источник
Gulp + browserSync:
Установите connect-history-api-fallback через npm, позже настройте задачу подачи сообщений
источник
Ваш код на стороне сервера - JAVA, затем выполните следующие шаги
Шаг 1: Загрузите JAR urlrewritefilter. Нажмите здесь и сохраните, чтобы построить путь. WEB-INF / lib
шаг 2: включить режим HTML5 $ locationProvider.html5Mode (true);
шаг 3: установить базовый URL
<base href="https://stackoverflow.com/example.com/"/>
шаг 4: скопируйте и вставьте в свой WEB.XML
шаг 5: создать файл в WEN-INF / urlrewrite.xml
источник
У меня есть это простое решение, которое я использую, и оно работает.
В приложении / Exceptions / Handler.php
Добавьте это вверху:
Затем внутри метода рендера
источник
Я решил проблему, добавив приведенный ниже фрагмент кода в файл node.js.
Примечание: когда мы обновляем страницу, она будет искать API вместо страницы Angular (из-за отсутствия тега # в URL). Используя приведенный выше код, я перенаправляю на URL с #
источник
Просто напишите правило в web.config
В индекс добавить это
это работает для меня, может быть, вы забыли установить Html5Mode app.config
источник