了解如何将Adobe Experience Manager(AEM)Maven项目用作与AEM SPA编辑器集成的Angular应用程序的起点。
在本章中,将根据 AEM项目原型. AEM项目正在启动,其起点非常简单,只需AngularSPA。 本章中使用的项目将用作实施WKND SPA的基础,并在将来的章节中构建。
经典的“你好世界”消息。
查看设置 本地开发环境. 确保以 作者 模式。
有多个选项可用于为AEM创建Maven多模块项目。 本教程使用最新 AEM项目原型 作为教程代码的基础。 为了支持多个版本的AEM,已对项目代码进行了修改。 请查阅 关于向后兼容性的说明.
最佳做法是使用 最新 版本 原型 为实际实施生成新项目。 AEM项目应使用 aemVersion
原型的属性。
通过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项目原型使用启动程序引导项目 Angular代码库 与AEM SPA Editor一起使用时,不会将其标记为“隐藏”。
接下来,使用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
要构建项目并将其部署到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实例。 默认情况下,此包将部署到端口上本地运行的AEM实例 4502 并拥有 管理员:管理员.
导航到 包管理器 在本地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 Core Components可在此处找到.
接下来,打开由原型生成的起始SPA,并更新一些内容。
导航到 站点 控制台: http://localhost:4502/sites.html/content.
WKND SPA包括基本站点结构,其中包含国家/地区、语言和主页。 此层次结构基于的 language_country
和 isSingleCountryWebsite
. 这些值可通过更新 可用属性 生成项目时。
打开 us > en > WKND SPA Angular Home Page 页面,方法是选择页面并单击 编辑 按钮:
A 文本 组件已添加到页面。 您可以像在AEM中编辑任何其他组件一样编辑此组件。
添加其他 文本 组件。
请注意,创作体验与传统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输出,您应该能够找到表示 文本 组件。
...
":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的工具。