Chcę włączyć tryb HTML5 dla mojej aplikacji. Podałem następujący kod do konfiguracji, jak pokazano tutaj :
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'
});
Jak widać, użyłem $locationProvider.html5mode
i zmieniłem wszystkie moje linki, ng-href
aby wykluczyć /#/
.
Problem
W tej chwili mogę przejść do localhost:9000/
strony indeksu i przejść do innych stron takich jak localhost:9000/about
.
Jednak problem występuje, gdy odświeżam localhost:9000/about
stronę. Otrzymuję następujące dane wyjściowe:Cannot GET /about
Jeśli spojrzę na połączenia sieciowe:
Request URL:localhost:9000/about
Request Method:GET
Podczas gdy jeśli najpierw przejdę do, localhost:9000/
a następnie kliknę przycisk, który przechodzi do /about
, otrzymam:
Request URL:http://localhost:9000/views/about.html
Które renderuje stronę idealnie.
Jak mogę włączyć obsługę kątową, aby uzyskać poprawną stronę po odświeżeniu?
angularjs
html
angular-routing
Dieter De Mesmaeker
źródło
źródło
Odpowiedzi:
Z kątowych dokumentów
Powodem tego jest to, że kiedy po raz pierwszy odwiedzasz stronę (
/about
), np. Po odświeżeniu, przeglądarka nie może wiedzieć, że to nie jest prawdziwy adres URL, więc idzie dalej i ładuje go. Jeśli jednak najpierw załadowałeś stronę główną i cały kod javascript, to po przejściu do/about
Angulara możesz się tam dostać, zanim przeglądarka spróbuje trafić na serwer i odpowiednio go obsłużyćźródło
$routeProvider
i zmienić ścieżki każdegotemplateUrl
z np. ZtemplateUrl : '/views/about.html',
natemplateUrl : 'example.com/views/about.html',
?Jest kilka rzeczy do skonfigurowania, aby wyglądał twój link w przeglądarce,
http://yourdomain.com/path
a to jest twoja kątowa konfiguracja + strona serwera1) AngularJS
2) po stronie serwera, po prostu włóż
.htaccess
do folderu głównego i wklej toBardziej interesujące rzeczy do przeczytania na temat trybu HTML5 w angularjs i konfiguracji wymaganej dla różnych środowisk https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -to-work-with-html5mode To pytanie może także pomóc $ location / przełączanie między trybem html5 a hashbang / przepisywanie linków
źródło
Miałem podobny problem i rozwiązałem go poprzez:
Używanie
<base href="https://stackoverflow.com/index.html">
na stronie indeksuUżywając oprogramowania pośredniczącego catch all route w moim węźle / serwerze Express w następujący sposób (umieść go za routerem):
Myślę, że to powinno cię uruchomić.
Jeśli korzystasz z serwera Apache, możesz zmodyfikować linki. To nie jest trudne do zrobienia. Kilka zmian w plikach konfiguracyjnych.
Wszystko to przy założeniu, że masz włączony tryb html5 na angularjs. Teraz. zwróć uwagę, że w kanciastym 1.2, deklarowanie podstawowego adresu URL nie jest już w rzeczywistości zalecane.
źródło
<base href="https://stackoverflow.com/">
i dodaniem sugerowanego routingu Express. Wielkie dzięki.<base href="https://stackoverflow.com/index.html">
?Rozwiązanie dla BrowserSync i Gulp.
Od https://github.com/BrowserSync/browser-sync/issues/204#issuecomment-102623643
Pierwsza instalacja
connect-history-api-fallback
:Następnie dodaj go do pliku gulpfile.js:
źródło
server: { ... }, port: 8100
prostu dodajserve
zadanie do domyślnego zadania gulp (tj.gulp.task('default', ['sass', 'serve']);
), A następnie możesz uruchomić aplikację bezCannot GET ...
błędów przeglądarki podczas odświeżania strony przez uruchomieniegulp
. Pamiętaj, że uruchomienie serwera zionic serve
nadal napotyka błędy.Musisz skonfigurować serwer, aby przepisał wszystko do pliku index.html, aby załadować aplikację:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5mode
źródło
try_files $uri $uri/ /index.php?...
zamiast potrzebnejindex.html
. Dzięki za link!Napisałem proste oprogramowanie pośredniczące do podłączania do symulacji przepisywania adresów URL w projektach typu grunt. https://gist.github.com/muratcorlu/5803655
Możesz użyć w ten sposób:
źródło
$routeProvider
?urlRewrite
nie jest zdefiniowane ostrzeżenie, gdy próbuję go uruchomić, i mam trudności ze znalezieniem odpowiedniego połączenia z przepisaniem, którego mogę użyć.Jeśli jesteś w stosie .NET z MVC z AngularJS, musisz to zrobić, aby usunąć „#” z adresu URL:
Skonfiguruj swój podstawowy href na stronie _Layout:
<head> <base href="https://stackoverflow.com/"> </head>
Następnie dodaj następujące elementy w konfiguracji aplikacji kątowej:
$locationProvider.html5Mode(true)
Powyżej usunie „#” z adresu URL, ale odświeżenie strony nie będzie działać, np. Jeśli jesteś w „yoursite.com/about” odświeżenie strony da ci 404. Jest tak, ponieważ MVC nie wie o routingu kątowym i według wzoru MVC wyszuka stronę MVC dla „about”, która nie istnieje w ścieżce routingu MVC. Obejściem tego problemu jest wysłanie całego żądania strony MVC do pojedynczego widoku MVC. Możesz to zrobić, dodając trasę, która przechwytuje wszystkie adresy URL
źródło
Reguła przepisywania adresów URL IIS, aby zapobiec błędowi 404 po odświeżeniu strony w trybie html5
Do pracy kątowej w IIS w systemie Windows
Trasy NodeJS / ExpressJS, aby zapobiec błędowi 404 po odświeżeniu strony w trybie html5
Do pracy kątowej pod Node / Express
Więcej informacji na: AngularJS - Włącz odświeżanie strony w trybie HTML5 bez błędów 404 w NodeJS i IIS
źródło
Jak wspomnieli inni, musisz przepisać trasy na serwerze i ustawić
<base href="https://stackoverflow.com/"/>
.Dla
gulp-connect
:npm install connect-pushstate
źródło
Używam apache (xampp) w moim środowisku deweloperskim i apache w produkcji, dodaj:
do .htaccess rozwiązać dla mnie ten problem.
źródło
W przypadku Grunt i Browsersync użyj tutaj connect-modrewrite
źródło
npm install connect-modrewrite --save
2.require in gruntfile
3. skopiuj powyższy serwer objRozwiązałem
źródło
Odpowiadam na to pytanie z większego pytania:
Po włączeniu html5Mode znak # nie będzie już używany w twoich adresach URL. Symbol # jest przydatny, ponieważ nie wymaga konfiguracji po stronie serwera. Bez # adres URL wygląda o wiele ładniej, ale wymaga również przepisywania po stronie serwera. Oto kilka przykładów:
W przypadku Express Rewrites z AngularJS możesz rozwiązać ten problem, wprowadzając następujące aktualizacje:
i
i
źródło
Uważam, że twój problem dotyczy serwera. Dokumentacja kątowa dotycząca trybu HTML5 (pod linkiem w twoim pytaniu) stwierdza:
Po stronie serwera Korzystanie z tego trybu wymaga przepisywania adresów URL po stronie serwera, w zasadzie musisz przepisać wszystkie linki do punktu wejścia aplikacji (np. Index.html)
Uważam, że musisz skonfigurować przepisanie adresu URL z / about to /.
źródło
Mieliśmy przekierowanie serwera w Express:
i nadal występowały problemy z odświeżaniem strony, nawet po dodaniu
<base href="https://stackoverflow.com/" />
.Rozwiązanie: upewnij się, że używasz prawdziwych linków na swojej stronie do nawigacji; nie wpisuj trasy w adresie URL, w przeciwnym razie nastąpi odświeżenie strony. (głupi błąd, wiem)
:-P
źródło
W końcu udało mi się rozwiązać ten problem po stronie serwera, ponieważ jest to bardziej problem z samym AngularJs. Używam 1.5 Angularjs i mam ten sam problem przy przeładowaniu strony. Ale po dodaniu poniższego kodu do mojego
server.js
pliku oszczędza mi to dzień, ale nie jest to właściwe rozwiązanie ani dobry sposób.źródło
Znalazłem jeszcze lepszą wtyczkę Grunt, która działa, jeśli masz index.html i Gruntfile.js w tym samym katalogu;
Następnie w swoim pliku Gruntfile:
źródło
źródło
Miałem ten sam problem z java + aplikacją kątową wygenerowaną za pomocą JHipstera . Rozwiązałem go za pomocą filtru i listy wszystkich stron kątowych we właściwościach:
application.yml:
AngularPageReloadFilter.java
WebConfigurer.java
Mam nadzieję, że będzie to pomocne dla kogoś.
źródło
Gulp + browserSync:
Zainstaluj connect-history-api-fallback za pomocą npm, a następnie skonfiguruj swoje zadanie obsługi gulp
źródło
Kod po stronie serwera to JAVA, a następnie Wykonaj poniższe czynności
krok 1: Pobierz plik JAR urlrewritefilter Kliknij tutaj i zapisz, aby zbudować ścieżkę WEB-INF / lib
krok 2: Włącz tryb HTML5 $ locationProvider.html5Mode (true);
krok 3: ustaw podstawowy adres URL
<base href="https://stackoverflow.com/example.com/"/>
krok 4: skopiuj i wklej do swojego WEB.XML
krok 5: utwórz plik w WEN-INF / urlrewrite.xml
źródło
Mam to proste rozwiązanie, z którego korzystam i które działa.
W aplikacji / Wyjątki / Handler.php
Dodaj to u góry:
Następnie w metodzie renderowania
źródło
Rozwiązałem problem, dodając poniższy fragment kodu do pliku node.js.
Uwaga: gdy odświeżamy stronę, będzie ona szukała interfejsu API zamiast strony kątowej (z powodu braku tagu # w adresie URL). Korzystając z powyższego kodu, przekierowuję na adres URL za pomocą #
źródło
Wystarczy napisać regułę w pliku web.config
W indeksie dodaj to
działa dla mnie może zapomniałeś ustawić Html5Mode app.config
źródło