AngularJS - Routing - Bugajsky Blog

Podziel się ze znajomymi

W tym wpisie utworzymy po raz pierwszy aplikację SPA (Single Page Application) z wykorzystaniem AngularJS. Będzie to prosta aplikacja, pokazująca jakie możliwości daje nam omawiany framework. Zaczniemy od utworzenia strony głównej naszej aplikacji. Później dodamy nowa podstronę. A na sam koniec utworzymy podstronę odczytującą parametry.

Co to jest routing?

Nim zajmiemy się tworzeniem aplikacji. Chciałbym wyjaśnić do czego służy routing w aplikacjach SPA. Zatem służy on do nawigowania pomiędzy komponentami. Ważne jest, że dzieje się to bez przeładowywania strony. Właśnie to jest mocą aplikacji SPA.

Żeby zobrazować dokładniej o co chodzi, posłużę się przykładem. Piszemy aplikację, jej główna strona jest pod adresem domena/home. Na głównej stronie mamy link do zakładki Autorzy, gdzie po kliknięciu w ten link zostajemy przeniesieni na domena/autorzy. Przejście z podstrony /home na /autorzy odbywa się bez przeładowywania strony, dzieję się tak, dzięki wykorzystaniu routingu.

Implementacja

Na samym początku musimy pobrać i dodać przy tworzeniu instancji aplikacji dodatkowy moduł, który odpowiada za obsługę tworzenia ścieżek w naszej aplikacji. Wspomniany moduł to ngRoute.

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

Kolejnym naszym krokiem jest utworzenie pliku konfiguracyjnego app.rout.js. Plik ten będzie przechowywał wszystkie informacje związane dostępnymi ścieżkami w naszej aplikacji.

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: "./home.tpl.html",
            controller: "homeCtrl"
        })
        .when('/about', {
            templateUrl: "./about.tpl.html",
            controller: "aboutCtrl"
        })
        .when('/user/:id', {
            templateUrl: "./user.tpl.html",
            controller: "userCtrl"
        })
        .otherwise({ template: '<div class="jumbotron"><h1 class="text-center">Error</h1></div>' })
});

Używamy metody config(), gdzie w parametrze podajemy anonimową funkcję wstrzykując do niej $routeProvider. Parametr ten zawiera dwie metody when() i otherwise().

when() – odpowiada za załadowanie odpowiedniej strony pod określonym adresem. Przyjmuje dwa parametry: ścieżkę dostępu oraz obiekt konfiguracyjny.

otherwise() – ładuję określoną treść w chwili, kiedy użytkownik wejdzie na ścieżkę niezdefiniowaną w metodzie when(). Przyjmuje tylko jeden parametr, którym jest obiekt konfiguracyjny.

W przedstawionej powyżej konfiguracji dla ścieżki głównej / zostanie załadowany plik home.tpl.html wraz z kontrolerem homeCtrl.
Dla ścieżki /about zostaną załadowane odpowiednio about.tpl.html oraz aboutCtrl.
Ciekawiej robi się przy kolejnej określonej ścieżce. Otóż, gdy chcemy móc ze ścieżki pobrać dane np. id usera, należy w pliku konfiguracyjnym dodać :, a po dwukropku nazwać parametr. /user/:id wyświetli stronę user.tpl.html oraz użyje kontrolera userCltr.

Obiekt konfiguracyjny

Główne właściwości to:

controler – określa funkcję kontrolera lub zarejestrowany kontroler, jeśli zostanie podana jego nazwa jako łańcuch znaków,
template – określa co ma zostać wyświetlone pod daną ścieżką,
templateUrl – przyjmuje ścieżkę do pliku html zawierającego kod, który ma zostać wyświetlony pod określonym adresem.

Z pozostałymi właściwościami możemy zapoznać się na oficjalnej dokumentacji AngularJS.

Aby routing działał poprawnie, należy na stronie głównej (plik index.html) dodać

<div data-ng-view=""></div>

Po dodaniu dodatkowego modułu oraz skonfigurowaniu ścieżek, pozostaje nam już tylko utworzenie kontrolerów oraz widoków.

Home

home.tpl.html

<div class="jumbotron">
    <h1 class="text-center">{{ name }}</h1>
</div>

homeCtrl

app.controller("homeCtrl", function ($scope) {
    var ctrl = $scope;
    ctrl.name = "Home";
});

Jak widzimy powyżej, mamy tutaj diva wraz z klasą jumbotron (pochodzi z bootstrapa) oraz znacznik h1, w którym to wyświetlana jest nazwa podstrony zaczerpnięta z kontrolera.

About

about.tpl.html

<div class="jumbotron">
    <h1 class="text-center">{{ name }}</h1>
</div>

aboutCtrl

app.controller("aboutCtrl", function ($scope) {
    var ctrl = $scope;
    ctrl.name = "About";
});

Jak możemy zobaczyć, zakładka about jest zbudowana w taki sam sposób jak home.

User

user.tpl.html

<div class="jumbotron">
    <h1 class="text-center">User: {{ id }}</h1>
</div>

userCtrl

app.controller("userCtrl", function ($scope, $routeParams) {
    var ctrl = $scope;
    ctrl.id = $routeParams.id;
});

W przypadku usera, pobieramy identyfikator za pomocą wstrzykniętego parametru $routeParams. Aby uzyskać dostęp do parametru należy odwołać się w taki sposób $routeParams.nazwa_parametru.

Działanie aplikacji

Podsumowanie

W tym wpisie stworzyliśmy pierwszą aplikację ASP. Która wyświetla różne dane w zależności od zakładki na której obecnie jesteśmy. Dodatkowo poznaliśmy sposób w jaki możemy odczytać z pozycji kontrolera parametry zamieszczone w adresie aplikacji. Dzięki temu jesteśmy w stanie teraz napisać rozbudowaną aplikację z wykorzystaniem frameworka AngularJS.

AngularJS – Routing