Witaj Internauto!
Tematyka tego bloga głównie skupia się na wszystkim co związane z projektowaniem stron internetowych. Znajdują się tutaj także artykuły z zakresu informatyki, komputerów.
Będę prowadził dziennik dzieląc się swoimi doświadczeniami, przemyśleniami, wiedzą.
Zapraszam do częstego goszczenia na tej witrynie, a chętnych do współpracy :)
Pozdrawiam Rafał Olszyński, RaVns ;]
Dobry i tani polski hosting Hekko
Kup kurs w Stefa Kursów z linku i otrzymaj 30 zł = 3000 pkt Premium
Chcesz otrzymać kupony na Aliexpress 19 dolarów (dla nowego użytkownika 4 kupony) lub podaj kod w podsumowania koszyka INJFWAPD?
Zwrot z zakupów ze sklepach internetowych (Allegro, MediaMarkt, Aliexpress itp.) sprawdź procent
Nie masz jeszcze konta w Revolut? Załóż i ciesz się dobrym przewalutowaniem i nie tylko
Inwestuj na Mintos wpłać 500 euro i otrzymaj bonus 10 euro - bonus wyższy wraz z wpłatą.
22
Angular URL bez hashtag
Brak komentarzy · Artykuł autorstwa RaVns, kategoria jQuery/JavaScript, Webmastering
Ilość odsłon wpisu: 2 380
Angular without hashtag #
Na początku budowy aplikacji w AngularJS chcąc rozbudować ją o kolejne podstrony (inne kontrolery) zauważamy, że tworzone linki (URL) zawierają #.
Link taki rozpoczyna się np. /#/kategorie lecz nie jest to specjalnie ładny link, ponieważ chcielibyśmy uzyskać taki: /kategorie.
Co na to poradzić?
Rozwiązaniem tego problemu jest wykonanie kilku kroków:
- dodanie do konfiguracji aplikacji (app.config) modułu $locationProvider – (poniżej przykład),
- w $routeProvider włączenie trybu html5Mode – (poniżej przykład),
- w szablonie strony (gdzieś w sekcji <head>) dodanie znacznika
<base href=”/”> albo <base href=”/aplikacja/”>
- jeśli nie chcielibyśmy tego robić należy w html5Mode ustalić requireBase: false, - gdy wykonamy powyższe czynności i odświeżymy stronę będąc na jakiejś podstronie – otrzymamy błąd 404 informujący o braku takiej strony. Ostatnim etapem poprawnego działania aplikacji w przypadku używania serwera Apache powinno być dodanie kilku reguł dla .htaccess.
Gdzie w RewriteRule podajemy ścieżkę do pliku, w którym obsługiwana jest nasza aplikacja (index.php z ng-app=”app”). - oczywiście teraz aby przejść do kategorii, należy wpisać href: <a href=”categories”>Kategorie</a>
Poniżej przykładowy plik app.route.js:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'js/default/default.html'
})
.when('/categories', {
templateUrl: 'js/categories.tpl.html',
controller: 'categoriesCtrl'
})
.otherwise({
template: 'Brak strony...'
});
// Zastosuj HTML5 History API
$locationProvider.html5Mode({
enabled: true,
//requireBase: false
});
}]);
Przykładowy .htaccess
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /aplikacja/index.php
#inny przykład reguł:
#RewriteEngine on
#RewriteCond %{REQUEST_FILENAME} -s [OR]
#RewriteCond %{REQUEST_FILENAME} -l [OR]
#RewriteCond %{REQUEST_FILENAME} -d
#RewriteRule ^.*$ - [NC,L]
#RewriteRule ^(.*) /aplikacja/index.php [NC,L]
Przykładowy plik index.php
Tagi: $locationProvider · Angular · angular hashtag · angular route · Angular without hashtag # · AngularJS
Podobne wpisy:
Starszy post << Zapytania medialne (media queries) nie działają na Internet Explorer
