Uczę się AngularJS i jest jedna rzecz, która naprawdę mnie denerwuje.
Używam $routeProvider
do deklarowania reguł routingu dla mojej aplikacji:
$routeProvider.when('/test', {
controller: TestCtrl,
templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });
ale kiedy przechodzę do mojej aplikacji w przeglądarce, widzę app/#/test
zamiast app/test
.
Więc moje pytanie brzmi: dlaczego AngularJS dodaje ten skrót #
do adresów URL? Czy można tego uniknąć?
javascript
angularjs
pikkvile
źródło
źródło
Odpowiedzi:
W rzeczywistości potrzebujesz # (hashtag) dla przeglądarek innych niż HTML5.
W przeciwnym razie po prostu wykonają połączenie HTTP z serwerem we wspomnianym href. # To stary skrót przeglądarki, który nie uruchamia żądania, co pozwala wielu frameworkom js zbudować własne przekierowanie po stronie klienta.
Możesz użyć,
$locationProvider.html5Mode(true)
aby powiedzieć angularowi, aby używał strategii HTML5, jeśli jest dostępna.Oto lista przeglądarek obsługujących strategię HTML5: http://caniuse.com/#feat=history
źródło
Jeśli włączyłeś tryb html5, jak powiedzieli inni, i utwórz
.htaccess
plik z następującą zawartością (dostosuj do swoich potrzeb):Użytkownicy zostaną przekierowani do Twojej aplikacji, gdy podążą właściwą trasą, a aplikacja odczyta trasę i przeniesie ją na właściwą „stronę” w jej obrębie.
EDYCJA: Upewnij się, że nie ma konfliktu nazw plików lub katalogów z twoimi trasami.
źródło
/about
stronę, nie działa, chyba że przejdę do niej przez aplikację.Napiszmy odpowiedź, która wygląda prosto i krótko
dzięki @plus - za wyszczególnienie powyższej odpowiedzi
źródło
próbować
Więcej informacji na $ location
Provider Korzystanie z $ location
źródło
Poniższe informacje pochodzą z:
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
Bardzo łatwo jest uzyskać czyste adresy URL i usunąć hashtag z adresu URL w Angular.
Domyślnie AngularJS będzie kierować adresy URL z hashtagiem. Na przykład:
http://www.example.com
http://www.example.com/#/about
http://www.example.com/#/contact
Należy zrobić 2 rzeczy.
Konfigurowanie $ locationProvider
Ustawianie naszej bazy dla linków względnych
Usługa lokalizacji
W Angular usługa lokalizacji $ analizuje adres URL w pasku adresu i wprowadza zmiany w aplikacji i odwrotnie.
Zdecydowanie polecam przeczytanie oficjalnej dokumentacji lokalizacji Angular $, aby poznać usługę lokalizacji i jej usługi.
https://docs.angularjs.org/api/ng/service/$location
$ locationProvider i html5Mode
Zrobimy to podczas definiowania aplikacji Angular i konfigurowania tras.
Co to jest interfejs API historii HTML5? Jest to ustandaryzowany sposób manipulowania historią przeglądarki za pomocą skryptu. Dzięki temu Angular może zmienić routing i adresy URL naszych stron bez odświeżania strony. Aby uzyskać więcej informacji na ten temat, oto dobry artykuł dotyczący interfejsu API historii HTML5:
http://diveintohtml5.info/history.html
Ustawienie linków względnych
<base>
w<head>
swoim dokumencie. Może to być plik root.html Twojej aplikacji Angular. Znajdź<base>
tag i ustaw go na główny adres URL, który chcesz dla swojej aplikacji.Na przykład:
<base href="https://stackoverflow.com/">
Powrót do starszych przeglądarek
Podsumowując
źródło
Jeśli chcesz to skonfigurować lokalnie w systemie OS X 10.8 obsługującym Angular z Apache, możesz znaleźć następujące informacje w pliku .htaccess:
Opcje + FollowSymlinks, jeśli nie jest ustawiony, może spowodować niedozwolony błąd w logach:
Wymagana jest przepisz bazę, w przeciwnym razie żądania zostaną rozstrzygnięte na twoim głównym katalogu serwera, który lokalnie domyślnie nie jest katalogiem projektu, chyba że specjalnie skonfigurowałeś vhosty, więc musisz ustawić ścieżkę, aby żądanie znalazło katalog główny projektu. Na przykład na moim komputerze mam katalog / Users / me / Sites, w którym przechowuję wszystkie moje projekty. Podobnie jak stary system OS X.
Następne dwa wiersze skutecznie mówią, jeśli ścieżka nie jest katalogiem lub plikiem, więc musisz upewnić się, że nie masz plików ani katalogów identycznych ze ścieżkami tras aplikacji.
Następny warunek mówi, że jeśli żądanie nie kończy się na określonych rozszerzeniach plików, dodaj tam, czego potrzebujesz
Ostatni [L] mówi, że ma obsługiwać plik index.html - twoją aplikację dla wszystkich innych żądań.
Jeśli nadal masz problemy, sprawdź dziennik Apache, prawdopodobnie da ci przydatne wskazówki:
źródło
Korzystanie z trybu HTML5 wymaga przepisywania adresów URL po stronie serwera, w zasadzie musisz przepisać wszystkie linki do punktu wejścia aplikacji (np. Index.html). Wymaganie
<base>
znacznika jest również ważne w tym przypadku, ponieważ umożliwia AngularJS rozróżnienie między częścią adresu URL, która jest bazą aplikacji, a ścieżką, którą powinna obsłużyć aplikacja. Aby uzyskać więcej informacji, zobacz AngularJS Developer Guide - Używanie $ location Tryb HTML5 Po stronie serwera .Aktualizacja
Instrukcje: konfigurowanie serwera do pracy z html5Mode 1
Po włączeniu html5Mode
#
znak nie będzie już używany w twoich adresach URL.#
Symbolem jest przydatna, ponieważ nie wymaga konfiguracji po stronie serwera. Bez#
tego adres URL wygląda o wiele ładniej, ale wymaga również przepisania po stronie serwera. Oto kilka przykładów:Apache przepisze
Nginx Przepisuje
Azure IIS przepisze
Express Rewrites
Zobacz też
źródło
W Angular 6 z routerem możesz używać:
źródło
Możesz również użyć poniższego kodu, aby przekierować na stronę główną (główną):
Po określeniu przekierowania jak powyżej możesz przekierować inne strony, na przykład:
źródło
**
** Ponieważ
źródło