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, iż 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><h1>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 adekwatności to:
- controler – określa funkcję kontrolera lub zarejestrowany kontroler, jeżeli 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 adekwatnoś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> <h1>{{ 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> <h1>{{ 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> <h1>User: {{ id }}</h1> </div>userCtrl
app.controller("userCtrl", function ($scope, $routeParams) { var ctrl = $scope; ctrl.id = $routeParams.id; });W przypadku usera, pobieramy identyfikator dzięki 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 w tej chwili 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.
