Sivusiirtymien toteutus SPA-portletissa

Kuten jQueryn osalta oli laita, niin yksinkertaisin SPA-arkkitehtuurin ratkaisu Angularin kanssakin on kirjoittaa kaikkien vaihtoehtoisten moduleiden määritys sivulle peräkkäin ja hallita sitten Javascript-koodissa, mitä tai mitä osiot haluaa näyttää. Tämä on tehokas ja yksinkertainen keino, eikä mitään Angularin $routea tarvita. Mutta ongelmana on se, että jokainen käyttäjä voi lukea selaimesta kaiken lähdekoodin. Tätä mahdollisuutta on käsitelty aiemmissa blogeissa.

Angularin $route-service tarjoaa yleisen ja myös hyvin kompaktin ratkaisun. Tarvittava route-tiedosto (angular-route.min.js) on määriteltävä liferay-portlet.xml -tiedostoon. Avaavan JSP-sivun määritys SPA-kehykselle oli:

<div id=”<portlet:namespace />div0″ ng-controller=”<portlet:namespace />dataGridCon” ng-view />

Angularin $routeProvider-palvelun avulla voidaan määritellä SPA-portletin sivunvaihto keskitetysti yhteen Javascript-tiedostoon:

var ns = gsPortletinNimiNS; // siirto helppoon lokaaliin muuttujanimeen
console.log(”javascript-tiedoston-nimi: ” + ns);

ns.partsMod.config([ ”$routeProvider”,
function($routeProvider)
{
  // tähän määritellään sivunvaihdot, ks. alla

}]);

Tässä esimerkki sivunvaihdoista, kyseessä on vaihtelu taulukkosivun (gridisivun) ja ylläpitosivun (itemsivun) välillä:

$routeProvider

.when(ns.hashGrid, {
  templateUrl : ns.contextPath + ns.dataGridPage,
  controller : ns.namespace + ”dataGridCon”
})

.when(ns.hashItem + ”/:active”, {
  templateUrl : ns.contextPath + ns.dataItemPage,
  controller : ns.namespace + ”dataItemCon”
})

.otherwise({
  redirectTo : ns.hashGrid
})

Edellä:
– templateUrl antaa yksiselitteisen URLin kehykseen ladattavalle JSP-sivulle
– controller on kyseisen sivun kontrolleri
– otherwise antaa oletussivun
– ns.xxxx antaa globaaleja arvoja, jotka on määritelty avaavalla JSP-sivulla
– ns.hashItem on esimerkki yksiöivästä sivun tunnuksesta (määritelty esim. ”/” + ns.namespace + ”/item”)
– ”/:active” on esimerkki parametrien antamisesta avautuvalle sivulle

Miten Javascript-koodissa kutsutaan edellä olevaa määritystä, kun sivu halutaan vaihtaa? Tässä esimerkki gridisivun kutsusta:

var address = ”#” + ns.hashGrid;
window.location.assign(address);

Tässä puolestaan menee myös parametri item-sivulle (huom. JSON-oliossa voit viedä mitä ja miten paljon vaan):

var address = ”#” + ns.hashItem + ”/” + JSON.stringify($scope.company);
window.location.assign(address);

Miten Angularin kontrollerissa on toimittava kutsun vastaanottamiseksi? Kyse on normaalista controllerin latauksesta, ja ainut mihin pitää erikseen toteuttaa on sivunvaihtoparametrien lukeminen. Tämä tapahtuu näin, luenta kontrollerin alkuun, niin tieto on kontrollerissa muualla käytettävissä:

$scope.company = JSON.parse($routeParams.active);

Seuraavaksi käymme läpi $http-palvelukutsujen käytön Angularissa ja muutamia Javascript-koodauksen vinkkejä.