了解如何使用Adobe Experience Manager(AEM)Maven專案,作為與AEM SPA編輯器整合之Angular應用程式的起點。
在本章中,將根據AEM專案原型部署新的AEM專案。 AEM專案將以AngularSPA的簡單起點啟動。 本章中使用的項目將作為實施WKND SPA的基礎,並將在以後的章節中構建。
經典的「你好世界」訊息。
查看設定本地開發環境所需的工具和說明。 請確定以author模式啟動的新Adobe Experience Manager例項在本機執行。
為AEM建立Maven多模組專案有數個選項。 本教學課程使用最新的AEM專案原型作為教學課程程式碼的基礎。 已修改專案程式碼,以支援多個版本的AEM。 請查看關於向後相容性的說明。
最佳實務是使用原型的最新版本,為實際實作產生新專案。 AEM專案應使用原型的aemVersion
屬性來鎖定單一AEM版本。
透過Git下載本教學課程的起始點:
$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/create-project-start
下列資料夾和檔案結構代表本機檔案系統上Maven原型產生的AEM專案:
|--- 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
從AEM專案原型產生AEM專案時,已使用下列屬性:
屬性 | 值 |
---|---|
aemVersion | 雲端 |
appTitle | WKND SPAAngular |
appId | wknd-spa-angular |
groupId | com.adobe.aem.guides |
frontendModule | angular |
套件 | com.adobe.aem.guides.wknd.spa.angular |
includeExamples | n |
請注意frontendModule=angular
屬性。 這會告訴AEM專案原型引導專案,使用要與AEM SPA編輯器搭配使用的起始程式碼基底Angular程式碼基底。
接下來,使用Maven編譯、建置專案程式碼,並將其部署至AEM的本機執行個體。
請確定AEM例項在連接埠4502上本機執行。
從命令行終端驗證是否安裝了Maven:
$ 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
從aem-guides-wknd-spa
目錄中運行以下Maven命令以生成項目並將其部署到AEM:
$ mvn -PautoInstallSinglePackage clean install
如果使用AEM 6.x:
$ mvn clean install -PautoInstallSinglePackage -Pclassic
應將專案的多個模組編譯並部署至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配置檔案autoInstallSinglePackage編譯項目的各個模組,並將單個包部署到AEM實例。 依預設,此套件會部署至本機在連接埠4502上執行,且憑證為admin:admin的AEM執行個體。
導覽至您本機AEM例項上的套件管理器:http://localhost:4502/crx/packmgr/index.jsp。
您應該會看到wknd-spa-angular.all
、wknd-spa-angular.ui.apps
和wknd-spa-angular.ui.content
的三個套件。
專案所需的所有自訂程式碼都會整合至這些套件中,並安裝在AEM執行階段。
您也應該會看到spa.project.core
和core.wcm.components
的數個套件。 原型會自動包含這些相依性。 如需AEM核心元件的詳細資訊,請前往這裡。
接下來,開啟由原型產生的啟動器SPA,並更新部分內容。
導覽至Sites主控台:http://localhost:4502/sites.html/content。
WKND SPA包含基本網站結構,內含國家、語言和首頁。 此階層是以language_country
和isSingleCountryWebsite
的原型預設值為基礎。 在產生專案時,可更新可用屬性以覆寫這些值。
選擇頁面並按一下菜單欄中的Edit按鈕,開啟us > en > WKND SPA Angular Home Page頁:
已將Text元件新增至頁面。 您可以像編輯AEM中的其他元件一樣編輯此元件。
將其他Text元件新增至頁面。
請注意,製作體驗與傳統AEM Sites頁面的類似。 目前可使用的元件數目有限。 在本教學課程中將新增更多內容。
接下來,使用瀏覽器的開發人員工具確認這是單頁應用程式。
在頁面編輯器中,按一下頁面資訊功能表> 檢視為已發佈:
這會開啟一個查詢參數?wcmmode=disabled
的新索引標籤,有效地關閉AEM編輯器:http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled
檢視頁面的來源,並注意找不到文字內容Hello World或其他任何內容。 反之,您應該會看到如下的HTML:
...
<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
是載入至頁面的AngularSPA,負責轉譯內容。
內容來自何處?
返回索引標籤:http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled
開啟瀏覽器的開發人員工具,並在重新整理期間檢查頁面的網路流量。 檢視XHR請求:
應該會有http://localhost:4502/content/wknd-spa-angular/us/en.model.json的要求。 這包含所有將驅動SPA的內容(以JSON格式)。
在新索引標籤中,開啟http://localhost:4502/content/wknd-spa-angular/us/en.model.json
請求en.model.json
代表將驅動應用程式的內容模型。 Inspect JSON輸出,您應該能夠找到代表Text元件的程式碼片段。
...
":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"
},
...
在下一章中,我們將檢查JSON內容如何從AEM元件對應至SPA元件,以形成AEM SPA編輯器體驗的基礎。
安裝瀏覽器擴充功能以自動格式化JSON輸出可能會很有幫助。
恭喜,您剛剛建立了第一個AEM SPA Editor專案!
現在相當簡單,但在接下來的幾章中,將新增更多功能。
整合SPA — 了解SPA原始碼如何與AEM專案整合,並了解可用來快速開發SPA的工具。