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.
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
Revise las herramientas y las instrucciones necesarias para configurar una entorno de desarrollo local.
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/integrate-spa-start
AEM Implemente el código base en una instancia de local mediante Maven:
$ mvn clean install -PautoInstallSinglePackage
Si se usa AEM.x añada el classic
perfil:
$ 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
.
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í.
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 archivo ui.frontend/package.json
En el dependencies
debería ver varias relacionadas con @angular
:
"@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
:
"@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 varios scripts
están definidas:
"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 de ui.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 el ui.frontend
carpeta en una módulo Maven. El pom.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
en ui.frontend/src/app/app.component.ts
:
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 al pageModel
(el contenido JSON) en la aplicación.
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:
$ 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.
$ npm install -g @angular/cli
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 Angular ng generate component
desde el interior del ui.frontend
carpeta.
$ 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 carpeta ui.frontend/src/app/components/header
.
Abra el archivo header.component.html
y reemplace el contenido por lo siguiente:
<!--/* 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 el app-header
:
<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 el npm run build
comando:
$ 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
. Debajo ui.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:
$ 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.
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
.
[
{
"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 mediante localhost: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.
<base href="/">
Abra una ventana de terminal y vaya a ui.frontend
carpeta. Ejecute el comando npm start
:
$ 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
en ui.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:
<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.
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:
|-- 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:
[
{
"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:
/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.
"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:
...
"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.
"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:
$ 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.
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.
$ 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:
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
Instalar normalize-scss
para normalizar los estilos en los distintos exploradores:
$ npm install normalize-scss --save
Vuelva al IDE y debajo de ui.frontend/src
cree una nueva carpeta con el nombre styles
.
Cree un nuevo archivo debajo de ui.frontend/src/styles
nombrado _variables.scss
y rellénelo con las siguientes variables:
//_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:
/* 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.
"styles": [
- "src/styles.css"
+ "src/styles.scss"
],
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:
$ 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:
@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:
...
@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.
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:
$ 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.
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
.
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.