SPA Proyecto de editor de create-project

Descargue el punto de partida para este tutorial mediante Git:

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

AEM La siguiente estructura de carpetas y archivos representa el proyecto de generado por el arquetipo de Maven en el sistema de archivos local:

|--- 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 Se utilizaron las siguientes propiedades al generar el proyecto de la a partir del arquetipo del proyecto de la base de datos:

AEM Asegúrese de que una instancia de la se esté ejecutando localmente en el puerto 4502.

Desde el terminal de la línea de comandos, compruebe que Maven está instalado:

$ 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 Ejecute el siguiente comando Maven desde el directorio aem-guides-wknd-spa para generar e implementar el proyecto en las siguientes:

$ mvn -PautoInstallSinglePackage clean install

AEM Si se usa 6.x:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

AEM Los múltiples módulos del proyecto deben ser compilados e implementados para su implementación en los distintos entornos de trabajo del proyecto de la comunidad de trabajo de la comunidad de.

[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] ------------------------------------------------------------------------

AEM El perfil de Maven autoInstallSinglePackage compila los módulos individuales del proyecto e implementa un paquete único en la instancia de la. AEM De forma predeterminada, este paquete se implementa en una instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de admin:admin con las credenciales de admin:admin.

AEM Vaya a Administrador de paquetes en la instancia de la aplicación local de: http://localhost:4502/crx/packmgr/index.jsp.

Debería ver tres paquetes para wknd-spa-angular.all, wknd-spa-angular.ui.apps y wknd-spa-angular.ui.content.

SPA

AEM Todo el código personalizado necesario para el proyecto se incluye en estos paquetes y se instala en el tiempo de ejecución de la.

También debería ver varios paquetes para spa.project.core y core.wcm.components. Son dependencias incluidas automáticamente por el tipo de archivo. AEM Encontrará más información sobre componentes principales aquí.

Vaya a la consola de Sites: http://localhost:4502/sites.html/content.

SPA El WKND incluye una estructura básica del sitio con un país, un idioma y una página de inicio. Esta jerarquía se basa en los valores predeterminados del tipo de archivo para language_country y isSingleCountryWebsite. Estos valores se pueden sobrescribir actualizando las propiedades disponibles al generar un proyecto.

Para abrir la página us > en > WKND SPA Angular Home Page, seleccione la página y haga clic en el botón Editar de la barra de menús:

Ya se agregó un componente Texto a la página. AEM Puede editar este componente como cualquier otro componente de la lista de componentes de la lista de componentes

Agregue un componente Text adicional a la página.

Tenga en cuenta que la experiencia de creación es similar a la de una página de AEM Sites tradicional. Actualmente hay un número limitado de componentes disponibles para su uso. Se agregarán más en el curso del tutorial.

En el Editor de páginas, haga clic en el menú Información de la página > Ver como publicado:

AEM Se abrirá una nueva ficha con el parámetro de consulta ?wcmmode=disabled que desactiva el editor de consultas: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled

Vea el origen de la página y observe que no se encuentra el contenido de texto Hello World o cualquiera de los demás contenidos. En su lugar, debería ver un HTML como el siguiente:

...
<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 es el Angular SPA en el que se carga el contenido en la página y es el responsable de la representación del contenido.

¿De dónde proviene el contenido?

Vuelva a la ficha: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled

Abra las herramientas para desarrolladores del explorador e inspeccione el tráfico de red de la página durante una actualización. Ver las solicitudes XHR:

Debe haber una solicitud a http://localhost:4502/content/wknd-spa-angular/us/en.model.json. SPA Contiene todo el contenido, con formato JSON, que impulsará la creación de la.

En una ficha nueva, abra http://localhost:4502/content/wknd-spa-angular/us/en.model.json

La solicitud en.model.json representa el modelo de contenido que controlará la aplicación. Inspect usa la salida JSON y debería poder encontrar el fragmento que representa los componentes Texto.

...
":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"
},
...

AEM SPA AEM SPA En el siguiente capítulo analizaremos cómo se asigna el contenido JSON de los componentes de la a los componentes de la para formar la base de la experiencia del editor de la.