AEM에서 SPA 시작하기 - Angular

SPA(단일 페이지 애플리케이션)는 웹 사이트 사용자에게 훌륭한 경험을 제공할 수 있습니다. 개발자는 SPA 프레임워크을 사용하여 사이트를 구축하고자 하며, 작성자는 SPA 프레임워크을 사용하여 구축된 사이트에서 AEM의 컨텐츠를 매끄럽게 편집하고자 합니다.

SPA 저작 기능은 AEM 내에서 SPA을 지원하는 포괄적인 솔루션을 제공합니다. 이 문서는 Angular 프레임워크에 간소화된 SPA 애플리케이션을 제공하며 이를 통합하는 방법을 설명하여 SPA을 신속하게 사용하여 작업을 시작할 수 있습니다.

소개

이 문서는 간단한 SPA의 기본적인 기능과 최소 기능을 사용하여 실행할 수 있도록 알아야 하는 사항을 요약합니다.

AEM에서 SPA을 사용하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오.

• SPA 소개 및 연습

• SPA 제작 소개

• SPA 블루프린트

이 문서는 간소화된 SPA의 구조를 자세히 설명하고 작동 방식을 설명하므로 SPA에 이러한 이해를 적용할 수 있습니다.

종속성, 구성 및 빌드

예상 각도 종속성 외에도 샘플 SPA은 추가 라이브러리를 활용하여 SPA을 보다 효율적으로 만들 수 있습니다.

종속성

package.json 파일은 전체 SPA 패키지의 요구 사항을 정의합니다. 필요한 최소 AEM 종속성은 여기에 나와 있습니다.

"dependencies": {
  "@adobe/aem-angular-editable-components": "~1.0.3",
  "@adobe/aem-spa-component-mapping": "~1.0.5",
  "@adobe/aem-spa-page-model-manager": "~1.0.3"
}

aem-clientlib-generator은(는) 빌드 프로세스의 일부로 클라이언트 라이브러리를 자동으로 만드는 데 사용됩니다.

"aem-clientlib-generator": "^1.4.1",

자세한 내용은 GitHub](https://github.com/wcm-io-frontend/aem-clientlib-generator)에서 [을 참조하십시오.

aem-clientlib-generator은 다음과 같이 clientlib.config.js 파일에 구성됩니다.

module.exports = {
    // default working directory (can be changed per 'cwd' in every asset option)
    context: __dirname,

    // path to the clientlib root folder (output)
    clientLibRoot: "./../content/jcr_root/apps/my-angular-app/clientlibs",

    libs: {
        name: "my-angular-app",
        allowProxy: true,
        categories: ["my-angular-app"],
        embed: ["my-angular-app.responsivegrid"],
        jsProcessor: ["min:gcc"],
        serializationFormat: "xml",
        assets: {
            js: [
                "dist/**/*.js"
            ],
            css: [
                "dist/**/*.css"
            ]
        }
    }
};

빌드

실제로 앱을 빌드하면 자동 클라이언트 라이브러리 생성을 위한 aem-clientlib-generator 외에도 전달을 위해 Webpack이 활용됩니다. 따라서 빌드 명령은 다음과 같습니다.

"build": "ng build --build-optimizer=false && clientlib",

패키지가 빌드되면 AEM 인스턴스에 패키지를 업로드할 수 있습니다.

AEM 프로젝트 전형

모든 AEM 프로젝트는 React 또는 Angular를 사용하여 SPA 프로젝트를 지원하고 SPA SDK를 활용하는 AEM Project Tranype을 활용해야 합니다.

응용 프로그램 구조

앞에서 설명한 바와 같이 종속성 및 앱 빌드를 포함하면 AEM 인스턴스에 업로드할 수 있는 작업 중인 SPA 패키지가 표시됩니다.

이 문서의 다음 섹션에서는 AEM의 구조, 애플리케이션을 유도하는 중요한 파일 및 이러한 파일을 함께 사용하는 방법을 살펴봅니다.

간소화된 이미지 구성 요소가 예로 사용되지만 응용 프로그램의 모든 구성 요소는 동일한 개념을 기반으로 합니다.

app.module.ts

SPA의 시작점은 중요한 컨텐츠에 집중할 수 있도록 여기에 간소화된 app.module.ts 파일입니다.

// app.module.ts
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SpaAngularEditableComponentsModule } from '@adobe/aem-angular-editable-components';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [ BrowserModule.withServerTransition({ appId: 'my-angular-app' }),
    SpaAngularEditableComponentsModule,
    AppRoutingModule,
    BrowserTransferStateModule ],
  providers: ...,
  declarations: [ ... ],
  entryComponents: [ ... ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

app.module.ts 파일은 앱의 시작점으로 초기 프로젝트 구성을 포함하고 AppComponent을 사용하여 앱을 부트스트래핑합니다.

정적 인스턴스화

구성 요소 템플릿을 사용하여 구성 요소가 정적으로 인스턴스화되는 경우 해당 값을 모델에서 구성 요소의 속성으로 전달해야 합니다. 모델의 값은 나중에 구성 요소 속성으로 사용할 수 있도록 속성으로 전달됩니다.

app.component.ts

app.module.ts 부트스트래핑하면 AppComponent을(를) 시작할 수 있습니다. 이 앱은 여기에서 간단한 버전으로 표시되므로 중요한 콘텐츠에 집중할 수 있습니다.

// app.component.ts
import { Component } from '@angular/core';
import { ModelManager } from '@adobe/aem-spa-page-model-manager';
import { Constants } from "@adobe/aem-angular-editable-components";

@Component({
  selector: 'app-root',
  template: `
    <router-outlet></router-outlet>
  `
})

export class AppComponent {
  items;
  itemsOrder;
  path;

  constructor() {
    ModelManager.initialize().then(this.updateData.bind(this));
  }

  private updateData(model) {
    this.path = model[Constants.PATH_PROP];
    this.items = model[Constants.ITEMS_PROP];
    this.itemsOrder = model[Constants.ITEMS_ORDER_PROP];
  }
}

main-content.component.ts

페이지를 처리하면, app.component.ts은 여기에 나열된 main-content.component.ts을(를) 단순화된 버전으로 호출합니다.

import { Component } from '@angular/core';
import { ModelManagerService }     from '../model-manager.service';
import { ActivatedRoute } from '@angular/router';
import { Constants } from "@adobe/aem-angular-editable-components";

@Component({
  selector: 'app-main',
  template: `
    <aem-page class="structure-page" [attr.data-cq-page-path]="path" [cqPath]="path" [cqItems]="items" [cqItemsOrder]="itemsOrder" ></aem-page>
  `
})

export class MainContentComponent {
  items;
  itemsOrder;
  path;

  constructor( private route: ActivatedRoute,
    private modelManagerService: ModelManagerService) {
    this.modelManagerService.getData({ path: this.route.snapshot.data.path }).then((data) => {
      this.path = data[Constants.PATH_PROP];
      this.items = data[Constants.ITEMS_PROP];
      this.itemsOrder = data[Constants.ITEMS_ORDER_PROP];
    });
  }
}

MainComponent은 페이지 모델의 JSON 표현을 인제스트하고 페이지의 각 요소를 래핑/장식하기 위한 컨텐츠를 처리합니다. Page에 대한 자세한 내용은 SPA Blueprint 문서에 있습니다.

image.component.ts

Page은(는) 구성 요소로 구성됩니다. 인제스트된 JSON을 사용할 때 Page은 여기에 표시된 것처럼 image.component.ts과 같은 구성 요소를 처리할 수 있습니다.

/// image.component.ts
import { Component, Input } from '@angular/core';

const ImageEditConfig = {

    emptyLabel: 'Image',

    isEmpty: function(cqModel) {
        return !cqModel || !cqModel.src || cqModel.src.trim().length < 1;
    }
};

@Component({
  selector: 'app-image',
  templateUrl: './image.component.html',
})

export class ImageComponent {
  @Input() src: string;
  @Input() alt: string;
  @Input() title: string;
}

MapTo('my-angular-app/components/image')(ImageComponent, ImageEditConfig);

AEM의 기본 아이디어는 SPA 구성 요소를 AEM 구성 요소에 매핑하고 컨텐츠가 수정될 때(또는 그 반대로) 구성 요소를 업데이트하는 것입니다. 이 통신 모델에 대한 요약은 SPA 편집기 개요 문서를 참조하십시오.

MapTo('my-angular-app/components/image')(Image, ImageEditConfig);

MapTo 메서드는 SPA 구성 요소를 AEM 구성 요소에 매핑합니다. 단일 문자열 또는 문자열 배열을 사용할 수 있습니다.

ImageEditConfig 편집기가 자리 표시자를 생성하는 데 필요한 메타데이터를 제공하여 구성 요소의 작성 기능을 활성화하는 데 기여하는 구성 개체입니다.

내용이 없으면 빈 컨텐츠를 나타내는 자리 표시자로 레이블이 제공됩니다.

동적으로 전달된 속성

모델에서 나오는 데이터는 구성 요소의 속성으로 동적으로 전달됩니다.

image.component.html

마지막으로 이미지를 image.component.html에서 렌더링할 수 있습니다.

// image.component.html
<img [src]="src" [alt]="alt" [title]="title"/>

SPA 구성 요소 간 정보 공유

단일 페이지 애플리케이션 내의 구성 요소가 정보를 공유하려면 정기적으로 필요합니다. 다음과 같이 복잡성이 증가하는 데 권장되는 여러 방법이 있습니다.

• 옵션 1: util 클래스를 순수한 객체 지향 솔루션으로 사용하여 로직과 브로드캐스트를 필요한 구성 요소로 중앙에서 처리합니다.
• 옵션 2: NgRx와 같은 상태 라이브러리를 사용하여 구성 요소 상태를 공유합니다.
• 옵션 3: 컨테이너 구성 요소를 사용자 지정하고 확장하여 객체 계층 구조를 활용합니다.

다음 단계

직접 SPA을 만드는 단계별 안내는 AEM SPA Editor 시작하기 - WKND 이벤트 자습서를 참조하십시오.

AEM용 SPA을 개발하기 위해 자신을 구성하는 방법에 대한 자세한 내용은 AEM용 SPA 개발 문서를 참조하십시오.

동적 모델을 구성 요소로 매핑하는 방법 및 AEM에서 작동하는 방식에 대한 자세한 내용은 SPA](/docs/experience-manager-64/sites-developing/spa-dynamic-model-to-component-mapping.html?lang=ko)의 구성 요소 매핑에 대한 동적 모델 집필을 참조하십시오.[

React 또는 Angular 이외의 프레임워크를 위해 AEM에서 SPA을 구현하거나 AEM용 SPA SDK의 작동 방식을 자세히 살펴보려면 SPA Blueprint 문서를 참조하십시오.