SPA create-project

Hämta startpunkten för den här självstudiekursen via Git:

$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/create-project-start

Följande mapp- och filstruktur representerar det AEM projektet som genererades av Maven-typen i det lokala filsystemet:

|--- aem-guides-wknd-spa
    |--- all/
    |--- core/
    |--- dispatcher/
    |--- ui.apps/
    |--- ui.apps.structure/
    |--- ui.content/
    |--- ui.frontend /
    |--- it.tests/
    |--- pom.xml
    |--- README.md
    |--- .gitignore
    |--- archetype.properties

Följande egenskaper användes när det AEM projektet genererades från projekttypen AEM:

Kontrollera att en instans av AEM körs lokalt på port 4502.

Kontrollera att Maven är installerad från kommandoradsterminalen:

$ mvn --version
Apache Maven 3.6.2
Maven home: /Library/apache-maven-3.6.2
Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home

Kör kommandot nedan Maven från katalogen aem-guides-wknd-spa för att skapa och distribuera projektet till AEM:

$ mvn -PautoInstallSinglePackage clean install

Om du använder AEM 6.x:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Projektets flera moduler ska kompileras och distribueras till AEM.

[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for wknd-spa-angular 1.0.0-SNAPSHOT:
[INFO]
[INFO] wknd-spa-angular ................................... SUCCESS [  0.473 s]
[INFO] WKND SPA Angular - Core ............................ SUCCESS [ 54.866 s]
[INFO] wknd-spa-angular.ui.frontend - UI Frontend ......... SUCCESS [02:10 min]
[INFO] WKND SPA Angular - Repository Structure Package .... SUCCESS [  0.694 s]
[INFO] WKND SPA Angular - UI apps ......................... SUCCESS [  6.351 s]
[INFO] WKND SPA Angular - UI content ...................... SUCCESS [  2.885 s]
[INFO] WKND SPA Angular - All ............................. SUCCESS [  1.736 s]
[INFO] WKND SPA Angular - Integration Tests Bundles ....... SUCCESS [  2.563 s]
[INFO] WKND SPA Angular - Integration Tests Launcher ...... SUCCESS [  1.846 s]
[INFO] WKND SPA Angular - Dispatcher ...................... SUCCESS [  0.270 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------

Maven-profilen autoInstallSinglePackage kompilerar de enskilda modulerna i projektet och distribuerar ett paket till AEM. Som standard distribueras det här paketet till en AEM som körs lokalt på port 4502 och med autentiseringsuppgifterna för admin:admin.

Navigera till Package Manager på din lokala AEM: http://localhost:4502/crx/packmgr/index.jsp.

Du bör se tre paket för wknd-spa-angular.all, wknd-spa-angular.ui.apps och wknd-spa-angular.ui.content.

All anpassad kod som krävs för projektet paketeras i dessa paket och installeras i AEM.

Du bör också se flera paket för spa.project.core och core.wcm.components. Detta är beroenden som automatiskt inkluderas av arketypen. Mer information om AEM kärnkomponenter finns här.

Navigera till Sites-konsolen: http://localhost:4502/sites.html/content.

WKND-SPA innehåller en grundläggande webbplatsstruktur med land, språk och hemsida. Den här hierarkin baseras på arkivtypens standardvärden för language_country och isSingleCountryWebsite. Dessa värden kan skrivas över genom att uppdatera de tillgängliga egenskaperna när du genererar ett projekt.

Öppna sidan us > en > WKND SPA Angular Home Page genom att markera sidan och klicka på knappen Edit i menyraden:

En Text-komponent har redan lagts till på sidan. Du kan redigera den här komponenten på samma sätt som andra komponenter i AEM.

Lägg till ytterligare en Text-komponent på sidan.

Observera att redigeringsupplevelsen liknar den på en traditionell AEM Sites-sida. För närvarande finns ett begränsat antal komponenter att använda. Mer läggs till under kursen.

I Page Editor klickar du på menyn Page Information > View as Published:

Då öppnas en ny flik med frågeparametern ?wcmmode=disabled som inaktiverar AEM: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled

Visa sidans källa och observera att textinnehållet Hello World eller något annat innehåll inte hittas. Du ska i stället se HTML så här:

...
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="spa-root"></div>
    <script type="text/javascript" src="/etc.clientlibs/wknd-spa-angular/clientlibs/clientlib-angular.min.js"></script>
    ...
</body>
...

clientlib-angular.min.js är den SPA som läses in på Angularna och som ansvarar för återgivningen av innehållet.

Varifrån kommer innehållet?

Återgå till fliken: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled

Öppna utvecklarverktygen i webbläsaren och inspektera nätverkstrafiken på sidan under en uppdatering. Visa XHR-begäranden:

Det bör finnas en begäran till http://localhost:4502/content/wknd-spa-angular/us/en.model.json. Detta innehåller allt innehåll, formaterat i JSON, som SPA.

Öppna http://localhost:4502/content/wknd-spa-angular/us/en.model.json på en ny flik

Begäran en.model.json representerar innehållsmodellen som kör programmet. Inspect JSON-utdata och du bör kunna hitta kodavsnittet som representerar Text-komponenten.

...
":items": {
    "text": {
        "text": "<p>Hello World! Updated content!</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-angular/components/text"
    },
    "text_98796435": {
        "text": "<p>A new text component.</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-angular/components/text"
},
...

I nästa kapitel kommer vi att undersöka hur JSON-innehållet mappas från AEM till SPA komponenter för att utgöra grunden för AEM SPA.