SPA Integración de una

Última actualización: 2023-12-01

Temas:
SPA Editor
Ver más sobre este tema

Creado para:
Beginner

Developer

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.

AEM Nuevo encabezado en el

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:

$ 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.

Enfoque de integración

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.

arquitectura de alto nivel ui.frontend

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

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.

Añadir un componente de encabezado

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
```
PRECAUCIÓN

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 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.

Implementación del encabezado inicial

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

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:4502AEM , 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.

Servidor de desarrollo de Webpack: simulación de API de 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:
```
|-- 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"
      },
  ...

Actualización de desarrollo de compilación de JSON de angular

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.

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.
```
$ 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"
   ],
```

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:
```
$ 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.

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:
```
$ 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.

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

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.

Página anterior

SPA Integración de una

Objetivo

Qué va a generar

Requisitos previos

Obtener el código

Enfoque de integración

Inspect SPA la integración de la

Añadir un componente de encabezado

Servidor de desarrollo de Webpack: proxy de la API de JSON

Servidor de desarrollo de Webpack: simulación de API de JSON

Agregar estilos con Sass

Actualizar estilos de encabezado

SPA AEM Implementar actualizaciones de la en el

Enhorabuena.

Pasos siguientes

En esta página

Ver siguiente:

Aprender

Documentación

Comunidad

Asistencia

Recursos

Cuenta de Adobe

Adobe