Toepassingen voor één pagina single-page-applications

Toepassingen met één pagina (SPA) een kritische massa hebben bereikt, die algemeen wordt beschouwd als het meest effectieve patroon voor het opbouwen van naadloze ervaringen met webtechnologie. Door een SPA te volgen kunt u een toepassing maken die dezelfde prestaties levert als een bureaubladtoepassing of mobiele toepassing, maar die een groot aantal apparaatplatforms en formulierfactoren bereikt vanwege de basis in open webstandaarden.

In het algemeen, SPA lijken krachtiger dan traditionele op pagina's gebaseerde websites omdat zij typisch een volledige pagina van de HTML laden slechts één keer (met inbegrip van CSS, JS, en het steunen doopvontinhoud), en laad dan slechts precies wat noodzakelijk is telkens als een verandering van staat in app voorkomt. Wat nodig is voor deze verandering van staat kan variëren gebaseerd op de gekozen reeks technologieën, maar omvat typisch één enkel fragment van HTML om de bestaande "mening"te vervangen, en de uitvoering van een blok van code JS om de nieuwe mening omhoog te telegraferen en om het even welke cliënt zijmalplaatje uit te voeren die noodzakelijk kan zijn. De snelheid van deze statuswijziging kan zelfs nog verder worden verbeterd door mechanismen voor het in cache plaatsen van sjablonen te ondersteunen, of zelfs offline toegang tot sjablooninhoud als Adobe PhoneGap wordt gebruikt.

AEM 6.1 ondersteunt de bouw en het beheer van SPA via AEM Apps. Dit artikel zal een inleiding geven op de concepten achter de SPA en hoe zij gebruik maken van AngularJS om uw merk naar de App Store en Google Play te brengen.

SPA in AEM apps spa-in-aem-apps

Met het toepassingsframework voor één pagina in AEM Apps kunt u de hoge prestaties van een AngularJS-app verhogen en tegelijkertijd auteurs (of ander niet-technisch personeel) de mogelijkheid bieden om de inhoud van de app te maken en te beheren via de voor aanrakingen geoptimaliseerde omgeving voor slepen en neerzetten die traditioneel is gereserveerd voor het beheer van websites. Hebt u al een site gebouwd met AEM? U zult merken dat het opnieuw gebruiken van uw inhoud, componenten, werkschema's, activa, en toestemmingen met AEM Apps gemakkelijk is.

AngularJS Application Module angularjs-application-module

AEM Apps behandelt veel van de configuratie AngularJS voor u, met inbegrip van het samenstellen van de top-level module van uw app. Deze module heeft standaard de naam 'AEMAngularApp' en het script dat verantwoordelijk is voor de generatie ervan is te vinden (en te bedekken) op /libs/mobileapps/components/angular/ng-page/angular-app-module.js.jsp.

Een deel van de initialisatie van uw app bestaat uit het opgeven van welke AngularJS-modules de toepassing afhankelijk is. De lijst met modules die door uw app worden gebruikt, is opgegeven door een script op /libs/mobileapps/components/angular/ng-page/angular-module-list.js.jsp en kan worden bedekt door de paginacomponent van uw eigen apps om extra AngularJS-modules in te schakelen die uw app nodig heeft. Als voorbeeld, vergelijk het bovengenoemde manuscript met de implementatie van de Geometrixx (die in /apps/geometrixx-outdoors-app/components/angular/ng-geometrixx-page/angular-module-list.js.jsp wordt gevestigd).

Om navigatie tussen de verschillende staten in uw app te steunen, herhaalt het angular-app-module manuscript door alle afstammende pagina's van uw hoogste niveau app pagina om een reeks "routes"te produceren en elke weg op de dienst te vormen $routeProvider van de Angular. Neem voor een voorbeeld van hoe dit er in de praktijk uitziet, een blik op het angular-app-module script dat is gegenereerd door het voorbeeld van de Geometrixx Outdoors-app: (voor een koppeling is een lokale instantie vereist) http://localhost:4502/content/phonegap/conference-app/en/home.angular-app-module.js

Door in te schrijven naar de gegenereerde AEMAngularApp, ziet u een reeks routes die als volgt worden opgegeven:

$routeProvider
.when('/content/phonegap/geometrixx-outdoors/en/home/products/:id', {
    templateUrl: 'home/products.template.html',
    controller: 'contentphonegapgeometrixxoutdoorsenhomeproducts'
})

Het bovenstaande voorbeeld illustreert met name een voorbeeld van het doorgeven van een parameter als onderdeel van het pad. In dit voorbeeld geven we aan dat wanneer een pad wordt aangevraagd dat voldoet aan het opgegeven patroon (https://experienceleague.adobe.com/content/phonegap/geometrixx-outdoor/en/home/products/:id?lang=nl), het moet worden afgehandeld door de sjabloon home/products.template.html en de controller 'contentphonegapgeometrixxoutdoorsenhomeproducts' moet gebruiken.

Het malplaatje te laden wanneer deze route wordt gevraagd wordt gespecificeerd door het templateUrl bezit. Dit malplaatje zal de HTML van AEM componenten bevatten die op de pagina zijn inbegrepen, evenals om het even welke richtlijnen AngularJS noodzakelijk voor de bedrading omhoog de cliëntkant van de toepassing. Neem bijvoorbeeld een voorbeeld van een AngularJS-instructie in een Geometrixx-component, kijk naar regel 45 van template.jsp (https://experienceleague.adobe.com/apps/geometrixx-outdoors-app/components/swipe-carousel/template.jsp?lang=nl) van de veegbeweging-carrousel.

Paginacontrollers page-controllers

In de eigen woorden van Angular, "is een Controlemechanisme een JavaScript aannemersfunctie die wordt gebruikt om het Toepassingsgebied van de Angular te verhogen." (bron) Elke pagina in een AEM wordt automatisch getelegrafeerd tot een controlemechanisme dat door om het even welke controlemechanisme kan worden uitgebreid die een specificeert frameworkType van angular. Bekijk de ng-text component als voorbeeld (https://experienceleague.adobe.com/libs/mobileapps/components/angular/ng-text?lang=nl), met inbegrip van de cq:template knoop die ervoor zorgt telkens als deze component aan een pagina wordt toegevoegd het dit belangrijke bezit omvat.

Voor een complexer controllervoorbeeld opent u het script ng-template-page controller.jsp (dat zich bevindt op /apps/geometrixx-outdoor-app/components/angular/ng-template-page). Van bijzonder belang is de javascript-code die wordt gegenereerd wanneer deze wordt uitgevoerd, die als volgt wordt weergegeven:

// Controller for page 'products'
.controller('contentphonegapgeometrixxoutdoorsenhomeproducts', ['$scope', '$http', '$routeParams',
    function($scope, $http, $routeParams) {
        var sku = $routeParams.id;
        var productPath = '/' + sku.substring(0, 2) + '/' + sku.substring(0, 4) + '/' + sku;
        var data = $http.get('home/products' + productPath + '.angular.json' + cacheKiller);

        /* ng-product component controller (path: content-par/ng-product) */
        data.then(function(response) {
            $scope.contentparngproduct = response.data["content-par/ng-product"].items;
        });

        /* ng-image component controller (path: content-par/ng-product/ng-image) */
        data.then(function(response) {
            $scope.contentparngproductngimage = response.data["content-par/ng-product/ng-image"].items;
        });
    }
])

In het bovenstaande voorbeeld merkt u op dat we een parameter uit de $routeParams en deze vervolgens in de mappenstructuur te masseren waarin onze JSON-gegevens zijn opgeslagen. Door met de sku om te gaan id op deze manier, kunnen wij één enkel malplaatje van het Product leveren dat de productgegevens voor potentieel duizenden verschillende producten kan teruggeven. Dit is een veel scalable model dat een individuele route voor elk punt in (potentieel) massaal productgegevensbestand vereist.

Er zijn ook twee onderdelen aan het werk: ng-product vergroot het toepassingsgebied met de gegevens die het uit het bovenstaande haalt $http vraag. Deze pagina bevat ook een ng-afbeelding die het bereik vergroot met de waarde die het ophaalt uit het antwoord. Op grond van de Angular $http de dienst, zal elke component geduld wachten tot het verzoek wordt gebeëindigd en de belofte het wordt gecreeerd vervuld.

De volgende stappen the-next-steps

Als u meer hebt geleerd over de toepassingen voor één pagina, raadpleegt u Apps ontwikkelen met PhoneGap CLI.