SPA Integración de una integrate-spa
SPA Comprenda cómo el código fuente de una aplicación de una sola página () escrita en Angular se puede integrar con un proyecto de Adobe Experience Manager AEM (). SPA AEM Aprenda a utilizar herramientas front-end modernas, como un servidor de desarrollo de Webpack, para desarrollar rápidamente la contra la API del modelo JSON de la red de aplicaciones de la red de aplicaciones de JSON de la red de aplicaciones de la red (JSON) de la red de archivos de datos.
Objetivo
- SPA AEM Comprender cómo el proyecto de está integrado con las bibliotecas del lado del cliente y la forma en que lo hace.
- Aprenda a utilizar un servidor de desarrollo local para el desarrollo front-end dedicado.
- Explorar el uso de un proxy y estático burlar de AEM archivo para desarrollar con la API del modelo JSON de
Qué va a generar
Este capítulo añadirá un Header
SPA componente a la. En el proceso de creación de esta estática Header
AEM SPA componente se utilizan varios enfoques para el desarrollo de la.
SPA La se amplía para agregar una estática Header
componente
Requisitos previos
Revise las herramientas y las instrucciones necesarias para configurar una entorno de desarrollo local.
Obtener el código
-
Descargue el punto de partida para este tutorial mediante Git:
code language-shell $ git clone git@github.com:adobe/aem-guides-wknd-spa.git $ cd aem-guides-wknd-spa $ git checkout Angular/integrate-spa-start
-
AEM Implemente el código base en una instancia de local mediante Maven:
code language-shell $ mvn clean install -PautoInstallSinglePackage
Si se usa AEM.x añada el
classic
perfil:code language-shell $ mvn clean install -PautoInstallSinglePackage -Pclassic
Siempre puede ver el código terminado en GitHub o compruebe el código localmente cambiando a la rama Angular/integrate-spa-solution
.
Enfoque de integración integration-approach
AEM Se crearon dos módulos como parte del proyecto de: ui.apps
y ui.frontend
.
El ui.frontend
El módulo es un webpack SPA proyecto que contiene todo el código fuente de la. SPA La mayoría de las pruebas y el desarrollo de la se realizan en el proyecto de Webpack. SPA Cuando se activa una compilación de producción, la generación de la se compila mediante Webpack. Los artefactos compilados (CSS y Javascript) se copian en la variable ui.apps
AEM que luego se implementa en el tiempo de ejecución de la.
SPA Una descripción de alto nivel de la integración de la.
Puede obtener información adicional sobre la versión del front-end encontrado aquí.
Inspect SPA la integración de la inspect-spa-integration
A continuación, inspeccione el ui.frontend
SPA para comprender la que ha generado automáticamente el módulo AEM Arquetipo de proyecto.
-
AEM SPA En el IDE de su elección, abra el Proyecto de para el WKND. Este tutorial utilizará el IDE de código de Visual Studio.
-
Expanda e inspeccione el
ui.frontend
carpeta. Abra el archivoui.frontend/package.json
-
En el
dependencies
debería ver varias relacionadas con@angular
:code language-json "@angular/animations": "~9.1.11", "@angular/common": "~9.1.11", "@angular/compiler": "~9.1.11", "@angular/core": "~9.1.11", "@angular/forms": "~9.1.10", "@angular/platform-browser": "~9.1.10", "@angular/platform-browser-dynamic": "~9.1.10", "@angular/router": "~9.1.10",
El
ui.frontend
El módulo es un aplicación de angular generado mediante el uso de Herramienta CLI de angular que incluye enrutamiento. -
También hay tres dependencias con el prefijo
@adobe
:code language-json "@adobe/cq-angular-editable-components": "^2.0.2", "@adobe/cq-spa-component-mapping": "^1.0.3", "@adobe/cq-spa-page-model-manager": "^1.1.3",
Los módulos anteriores conforman el AEM SPA SDK de JS de Editor de SPA AEM y proporcionan la funcionalidad para hacer posible la asignación de componentes de la a componentes de la.
-
En el
package.json
archivar variosscripts
están definidas:code language-json "scripts": { "start": "ng serve --open --proxy-config ./proxy.conf.json", "build": "ng lint && ng build && clientlib", "build:production": "ng lint && ng build --prod && clientlib", "test": "ng test", "sync": "aemsync -d -w ../ui.apps/src/main/content" }
Estos scripts se basan en Comandos CLI de angular AEM pero se han modificado ligeramente para que funcionen con el proyecto de mayor envergadura de la.
start
: ejecuta la aplicación de Angular localmente mediante un servidor web local. AEM Se ha actualizado para representar el contenido de la instancia local de.build
: compila la aplicación de Angular para la distribución de producción. La adición de&& clientlib
SPA es responsable de copiar los datos compilados en la interfaz de usuario deui.apps
como una biblioteca del lado del cliente durante una compilación. El módulo npm aem-clientlib-generator se utiliza para facilitar esto.Se pueden encontrar más detalles sobre los scripts disponibles aquí.
-
Inspect el archivo
ui.frontend/clientlib.config.js
. Este archivo de configuración lo utiliza aem-clientlib-generator para determinar cómo generar la biblioteca de cliente. -
Inspect el archivo
ui.frontend/pom.xml
. Este archivo transforma elui.frontend
carpeta en una módulo Maven. Elpom.xml
se ha actualizado el archivo para utilizar el frontend-maven-plugin hasta prueba y generar SPA la configuración de la aplicación durante una compilación de Maven. -
Inspect el archivo
app.component.ts
enui.frontend/src/app/app.component.ts
:code language-js import { Constants } from '@adobe/cq-angular-editable-components'; import { ModelManager } from '@adobe/cq-spa-page-model-manager'; import { Component } from '@angular/core'; @Component({ selector: '#spa-root', // tslint:disable-line styleUrls: ['./app.component.css'], templateUrl: './app.component.html' }) export class AppComponent { ... constructor() { ModelManager.initialize().then(this.updateData); } private updateData = pageModel => { this.path = pageModel[Constants.PATH_PROP]; this.items = pageModel[Constants.ITEMS_PROP]; this.itemsOrder = pageModel[Constants.ITEMS_ORDER_PROP]; } }
app.component.js
SPA es el punto de entrada de la.ModelManager
AEM SPA es proporcionado por el SDK de JS de Editor de. Es responsable de llamar e inyectar alpageModel
(el contenido JSON) en la aplicación.
Añadir un componente de encabezado header-component
SPA AEM A continuación, añada un nuevo componente a la e implemente los cambios en una instancia de local para ver la integración.
-
Abra una nueva ventana de terminal y vaya al
ui.frontend
carpeta:code language-shell $ cd aem-guides-wknd-spa/ui.frontend
-
Instalar CLI DE ANGULAR globalmente Se utiliza para generar componentes de Angular, así como para crear y ofrecer la aplicación de Angular a través de ng comando.
code language-shell $ npm install -g @angular/cli
note caution CAUTION La versión de @angular/cli utilizado por este proyecto es 9.1.7. Se recomienda mantener las versiones de CLI de Angular sincronizadas. -
Crear un nuevo
Header
al ejecutar la CLI de Angularng generate component
desde el interior delui.frontend
carpeta.code language-shell $ ng generate component components/header CREATE src/app/components/header/header.component.css (0 bytes) CREATE src/app/components/header/header.component.html (21 bytes) CREATE src/app/components/header/header.component.spec.ts (628 bytes) CREATE src/app/components/header/header.component.ts (269 bytes) UPDATE src/app/app.module.ts (1809 bytes)
Esto creará un esqueleto para el nuevo componente Encabezado de Angular en
ui.frontend/src/app/components/header
. -
Abra el
aem-guides-wknd-spa
proyecto en el IDE que elija. Navegue hasta la carpetaui.frontend/src/app/components/header
. -
Abra el archivo
header.component.html
y reemplace el contenido por lo siguiente:code language-html <!--/* header.component.html */--> <header className="header"> <div className="header-container"> <h1>WKND</h1> </div> </header>
Tenga en cuenta que esto muestra contenido estático, por lo que este componente de Angular no requiere ningún ajuste en el contenido generado predeterminado
header.component.ts
. -
Abra el archivo app.component.html en
ui.frontend/src/app/app.component.html
. Añada elapp-header
:code language-html <app-header></app-header> <router-outlet></router-outlet>
Esto incluirá lo siguiente
header
componente sobre todo el contenido de la página. -
Abra un terminal nuevo y navegue hasta el
ui.frontend
y ejecute elnpm run build
comando:code language-shell $ cd ui.frontend $ npm run build Linting "angular-app"... All files pass linting. Generating ES5 bundles for differential loading... ES5 bundle generation complete.
-
Navegue hasta la carpeta
ui.apps
. Debajoui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/clientlibs/clientlib-angular
SPA debería ver que los archivos compilados de la se han copiado desde elui.frontend/build
carpeta. -
Vuelva a la terminal y navegue hasta la
ui.apps
carpeta. Ejecute el siguiente comando Maven:code language-shell $ cd ../ui.apps $ mvn clean install -PautoInstallPackage ... [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 9.629 s [INFO] Finished at: 2020-05-04T17:48:07-07:00 [INFO] ------------------------------------------------------------------------
Esto implementará el
ui.apps
AEM a una instancia local en ejecución de la aplicación de la aplicación de la. -
Abra una pestaña del explorador y vaya a http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Ahora debería ver el contenido de la
Header
SPA componente que se muestra en la lista de componentes de.
Pasos 7-9 se ejecutan automáticamente al activar una compilación de Maven desde la raíz del proyecto (es decir, mvn clean install -PautoInstallSinglePackage
). SPA AEM Ahora debería comprender los conceptos básicos de la integración entre las bibliotecas del lado del cliente de la y la de la segmentación de datos Observe que aún puede editar y agregar Text
AEM componentes en el entorno de, sin embargo, el Header
el componente no se puede editar.
Servidor de desarrollo de Webpack: proxy de la API de JSON proxy-json
AEM Como se ha visto en los ejercicios anteriores, llevar a cabo una compilación y sincronizar la biblioteca de cliente con una instancia local de lleva unos minutos. SPA Esto es aceptable para las pruebas finales, pero no es ideal para la mayoría del desarrollo de la.
A servidor de desarrollo de webpack SPA se puede utilizar para desarrollar rápidamente la. SPA AEM La está impulsada por un modelo JSON generado por el grupo de informes de. AEM En este ejercicio, el contenido JSON de una instancia en ejecución de es el siguiente en proxy en el servidor de desarrollo configurado por proyecto de angular.
-
Vuelva al IDE y abra el archivo proxy.conf.json en
ui.frontend/proxy.conf.json
.code language-json [ { "context": [ "/content/**/*.(jpg|jpeg|png|model.json)", "/etc.clientlibs/**/*" ], "target": "http://localhost:4502", "auth": "admin:admin", "logLevel": "debug" } ]
El aplicación de angular proporciona un mecanismo fácil para las solicitudes de API de proxy. Los patrones especificados en
context
se procesan como proxy mediantelocalhost:4502
AEM , el inicio rápido local de la. -
Abra el archivo index.html en
ui.frontend/src/index.html
. Este es el archivo HTML raíz que utiliza el servidor dev.Observe que hay una entrada para
base href="/"
. El etiqueta base es fundamental para que la aplicación resuelva direcciones URL relativas.code language-html <base href="/">
-
Abra una ventana de terminal y vaya a
ui.frontend
carpeta. Ejecute el comandonpm start
:code language-shell $ cd ui.frontend $ npm start > wknd-spa-angular@0.1.0 start /Users/dgordon/Documents/code/aem-guides-wknd-spa/ui.frontend > ng serve --open --proxy-config ./proxy.conf.json 10% building 3/3 modules 0 active[HPM] Proxy created: [ '/content/**/*.(jpg|jpeg|png|model.json)', '/etc.clientlibs/**/*' ] -> http://localhost:4502 [HPM] Subscribed to http-proxy events: [ 'error', 'close' ] ℹ 「wds」: Project is running at http://localhost:4200/webpack-dev-server/ ℹ 「wds」: webpack output is served from / ℹ 「wds」: 404s will fallback to //index.html
-
Abra una nueva pestaña del explorador (si no está abierta todavía) y vaya a http://localhost:4200/content/wknd-spa-angular/us/en/home.html.
AEM Debería ver el mismo contenido que en el caso de los recursos de creación, pero sin ninguna de las capacidades de creación habilitadas.
-
Vuelva al IDE y cree una nueva carpeta denominada
img
enui.frontend/src/assets
. -
Descargue y añada el siguiente logotipo de WKND a
img
carpeta: -
Abrir header.component.html en
ui.frontend/src/app/components/header/header.component.html
e incluir el logotipo:code language-html <header class="header"> <div class="header-container"> <div class="logo"> <img class="logo-img" src="assets/img/wknd-logo-dk.png" alt="WKND SPA" /> </div> </div> </header>
Guardar los cambios en header.component.html.
-
Vuelva al explorador. Debería ver reflejados inmediatamente los cambios en la aplicación.
Puede seguir realizando actualizaciones de contenido en AEM y verlas reflejadas en servidor de desarrollo de webpack, ya que estamos procesando el contenido. Tenga en cuenta que los cambios de contenido solo son visibles en la servidor de desarrollo de webpack.
-
Detenga el servidor web local con
ctrl+c
en la terminal.
Servidor de desarrollo de Webpack: simulación de API de JSON mock-json
Otro enfoque para el desarrollo rápido es utilizar un archivo JSON estático para actuar como modelo JSON. AEM Al "burlarse" del JSON, eliminamos la dependencia de una instancia local de. También permite a un desarrollador front-end actualizar el modelo JSON para probar la funcionalidad y dirigir cambios en la API JSON que luego implementaría un desarrollador back-end.
La configuración inicial del JSON de prueba sí AEM requiere una instancia de local.
-
En el explorador, vaya a http://localhost:4502/content/wknd-spa-angular/us/en.model.json.
AEM Este es el JSON exportado por el usuario que está impulsando la aplicación. Copie la salida JSON.
-
Vuelva al IDE y navegue hasta
ui.frontend/src
y agregue nuevas carpetas con el nombre burlas y json para que coincida con la siguiente estructura de carpetas:code language-plain |-- ui.frontend |-- src |-- mocks |-- json
-
Cree un nuevo archivo llamado en.model.json debajo
ui.frontend/public/mocks/json
. Pegue la salida JSON desde Paso 1 aquí. -
Crear un nuevo archivo proxy.mock.conf.json debajo
ui.frontend
. Rellene el archivo con lo siguiente:code language-json [ { "context": [ "/content/**/*.model.json" ], "pathRewrite": { "^/content/wknd-spa-angular/us" : "/mocks/json"} , "target": "http://localhost:4200", "logLevel": "debug" } ]
Esta configuración proxy reescribirá las solicitudes que empiecen por
/content/wknd-spa-angular/us
con/mocks/json
y servirá el archivo JSON estático correspondiente, por ejemplo:code language-plain /content/wknd-spa-angular/us/en.model.json -> /mocks/json/en.model.json
-
Abra el archivo angular.json. Añadir un nuevo dev con una configuración actualizada activos matriz para hacer referencia a burlas carpeta creada.
code language-json "dev": { "assets": [ "src/mocks", "src/assets", "src/favicon.ico", "src/logo192.png", "src/logo512.png", "src/manifest.json" ] },
Creación de un dev La configuración de garantiza que la burlas AEM La carpeta de solo se utiliza durante el desarrollo y nunca se implementa en una compilación de producción de la que se haya realizado una implementación de la misma.
-
En el angular.json , actualice el archivo browserTarget configuración para utilizar el nuevo dev configuración:
code language-diff ... "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { + "browserTarget": "angular-app:build:dev" - "browserTarget": "angular-app:build" }, ...
-
Abra el archivo
ui.frontend/package.json
y añada un nuevo inicio:simulado para hacer referencia al proxy.mock.conf.json archivo.code language-diff "scripts": { "start": "ng serve --open --proxy-config ./proxy.conf.json", + "start:mock": "ng serve --open --proxy-config ./proxy.mock.conf.json", "build": "ng lint && ng build && clientlib", "build:production": "ng lint && ng build --prod && clientlib", "test": "ng test", "sync": "aemsync -d -w ../ui.apps/src/main/content" }
Añadir un nuevo comando facilita el cambio entre las configuraciones de proxy.
-
Si se está ejecutando, detenga el servidor de desarrollo de webpack. Inicie el servidor de desarrollo de webpack uso del inicio:simulado script:
code language-shell $ npm run start:mock > wknd-spa-angular@0.1.0 start:mock /Users/dgordon/Documents/code/aem-guides-wknd-spa/ui.frontend > ng serve --open --proxy-config ./proxy.mock.conf.json
Vaya a http://localhost:4200/content/wknd-spa-angular/us/en/home.html SPA y debería ver el mismo contenido, pero ahora se está extrayendo de la misma, pero el contenido se está descargando de la barra de herramientas. burlar de Archivo JSON.
-
Realice un pequeño cambio en la en.model.json archivo creado anteriormente. El contenido actualizado debe reflejarse inmediatamente en la servidor de desarrollo de webpack.
SPA La posibilidad de manipular el modelo JSON y ver los efectos en un modelo en directo puede ayudar a un desarrollador a comprender la API del modelo JSON. También permite que el desarrollo del front-end y del back-end se produzca en paralelo.
Agregar estilos con Sass
A continuación, se añaden al proyecto algunos estilos actualizados. Este proyecto añadirá Sass compatibilidad con algunas funciones útiles como variables.
-
Abra una ventana de terminal y detenga el servidor de desarrollo de webpack si se ha iniciado. Desde dentro de
ui.frontend
carpeta introduzca el siguiente comando para actualizar la aplicación de Angular que se va a procesar .scss archivos.code language-shell $ cd ui.frontend $ ng config schematics.@schematics/angular:component.styleext scss
Esto actualizará el
angular.json
con una nueva entrada en la parte inferior del archivo:code language-json "schematics": { "@schematics/angular:component": { "styleext": "scss" } }
-
Instalar
normalize-scss
para normalizar los estilos en los distintos exploradores:code language-shell $ npm install normalize-scss --save
-
Vuelva al IDE y debajo de
ui.frontend/src
cree una nueva carpeta con el nombrestyles
. -
Cree un nuevo archivo debajo de
ui.frontend/src/styles
nombrado_variables.scss
y rellénelo con las siguientes variables:code language-scss //_variables.scss //== Colors // //## Gray and brand colors for use across theme. $black: #202020; $gray: #696969; $gray-light: #EBEBEB; $gray-lighter: #F7F7F7; $white: #FFFFFF; $yellow: #FFEA00; $blue: #0045FF; //== Typography // //## Font, line-height, and color for body text, headings, and more. $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; $font-family-serif: Georgia, "Times New Roman", Times, serif; $font-family-base: $font-family-sans-serif; $font-size-base: 18px; $line-height-base: 1.5; $line-height-computed: floor(($font-size-base * $line-height-base)); // Functional Colors $brand-primary: $yellow; $body-bg: $white; $text-color: $black; $text-color-inverse: $gray-light; $link-color: $blue; //Layout $max-width: 1024px; $header-height: 75px; // Spacing $gutter-padding: 12px;
-
Cambie el nombre de la extensión del archivo styles.css en
ui.frontend/src/styles.css
hasta styles.scss. Reemplace el contenido por lo siguiente:code language-scss /* styles.scss * / /* Normalize */ @import '~normalize-scss/sass/normalize'; @import './styles/variables'; body { background-color: $body-bg; font-family: $font-family-base; margin: 0; padding: 0; font-size: $font-size-base; text-align: left; color: $text-color; line-height: $line-height-base; } body.page { max-width: $max-width; margin: 0 auto; padding: $gutter-padding; padding-top: $header-height; }
-
Actualizar angular.json y cambie el nombre de todas las referencias a style.css con styles.scss. Debe haber 3 referencias.
code language-diff "styles": [ - "src/styles.css" + "src/styles.scss" ],
Actualizar estilos de encabezado
A continuación, agregue algunos estilos específicos de marca a Header componente con Sass.
-
Inicie el servidor de desarrollo de webpack para ver los estilos actualizándose en tiempo real:
code language-shell $ npm run start:mock
-
En
ui.frontend/src/app/components/header
renombrar header.component.css hasta header.component.scss. Rellene el archivo con lo siguiente:code language-scss @import "~src/styles/variables"; .header { width: 100%; position: fixed; top: 0; left:0; z-index: 99; background-color: $brand-primary; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.24); } .header-container { display: flex; max-width: $max-width; margin: 0 auto; padding-left: $gutter-padding; padding-right: $gutter-padding; } .logo { z-index: 100; display: flex; padding-top: $gutter-padding; padding-bottom: $gutter-padding; } .logo-img { width: 100px; }
-
Actualizar header.component.ts para referencia header.component.scss:
code language-diff ... @Component({ selector: 'app-header', templateUrl: './header.component.html', - styleUrls: ['./header.component.css'] + styleUrls: ['./header.component.scss'] }) ...
-
Vuelva al explorador y a la servidor de desarrollo de webpack:
Ahora debería ver los estilos actualizados agregados al Header componente.
SPA AEM Implementar actualizaciones de la en el
Los cambios realizados en el Header actualmente solo son visibles a través de servidor de desarrollo de webpack. SPA AEM Implemente el actualizado para ver los cambios que se han producido.
-
Detenga el servidor de desarrollo de webpack.
-
Vaya a la raíz del proyecto
/aem-guides-wknd-spa
AEM e implemente el proyecto para que se ejecute de forma más rápida mediante Maven:code language-shell $ cd .. $ mvn clean install -PautoInstallSinglePackage
-
Vaya a http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Debería ver el informe actualizado Header con logotipo y estilos aplicados:
SPA AEM Ahora que la actualización de la se encuentra en la fase de creación, la creación puede continuar.
Enhorabuena. congratulations
SPA AEM ¡Enhorabuena, ha actualizado la y ha explorado la integración con la opción de integración de! SPA AEM Ahora conoce dos enfoques diferentes para desarrollar la contra la API del modelo JSON de la aplicación de datos de la aplicación de modo que se pueda usar una servidor de desarrollo de webpack.
Siempre puede ver el código terminado en GitHub o compruebe el código localmente cambiando a la rama Angular/integrate-spa-solution
.
Pasos siguientes next-steps
SPA AEM Asignación de componentes de a componentes de : Obtenga información sobre cómo asignar componentes de Angular a componentes de Adobe Experience Manager AEM AEM SPA () con el SDK de JS de Editor de. SPA AEM SPA AEM La asignación de componentes permite a los autores realizar actualizaciones dinámicas de los componentes de la de componentes dentro del Editor de componentes, de forma similar a la creación tradicional de los componentes de la aplicación de la creación de.