RaVns Blog | Webmastering, xHTML, CSS, PHP, MySQL, SEO/SEM, Windows i inne


 Smartwatch LG G Watch R W110 - okrągła koperta - 570 zł !!!
 Wentylator biurkowy HB 25Wat DF2302BR "nowy" - 68 zł !!!

sty/17

22

Angular URL bez hashtag

Angular URL bez hashtag

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:

var app = angular.module('app', ['ngRoute']); // aplikacja

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

RewriteEngine On  
# 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

<html data-ng-app="app">
    <head>
        <title>Strona</title>
        <meta charset="UTF-8">
        <link href="css/styles.css" rel="stylesheet">
        <base href="/">
    </head>
    <body data-ng-controller="categoriesCtrl">
    ...
    </body>
</html>
VN:F [1.9.22_1171]
Rating: 6.0/6 (1 vote cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
Angular URL bez hashtag, 6.0 out of 6 based on 1 rating
Podziel się wpisem na:
  • Facebook
  • Śledzik
  • Twitter
  • email
  • Google Bookmarks
  • Google Buzz
  • Flaker
  • MySpace
  • Blip
  • Wykop
  • Poleć
  • co-robie
  • Spis
  • Spinacz
  • Wahacz
  • LinkedIn
  • Mój biznes
ustaw opis GG

Tagi: · · · · ·

Podobne wpisy:

Instalacja Apache, PHP i MySQL w systemie Windows
Instalacja Apache, PHP i MySQL w systemie Windows cz.2
Instalacja Apache, PHP i MySQL w&nbsp;systemie Windows cz.3
Instalacja Certyfikatu SSL dla domeny
Znasz najprostszą poprawną strukturę dokumentu HTML5?
Skrypt informujący o wykorzystywaniu Cookies na stronie

Starszy post <<




Nie skomentowano jeszcze.

Skomentuj :-)

*

Powered by RaVns


Unikalnych: odwiedzających!
Dziękuję za zainteresowanie :)