AEM中的SPA快速入門- Angular

單頁應用程式(SPA)可為網站使用者提供引人入勝的體驗。 開發人員希望能夠使用SPA架構建立網站，而作者則想在AEM中為使用SPA架構建立的網站順暢地編輯內容。

SPA製作功能提供完整的解決方案，以支援AEM中的SPA。 本文介紹Angular架構上的簡化SPA應用程式，並說明其組合方式，讓您快速啟動並執行自己的SPA。

簡介

本文摘述了簡單SPA的基本功能，以及您需要瞭解的最低功能，以便讓您的SPA運作。

如需SPA在AEM中運作的詳細資訊，請參閱下列檔案：

• SPA簡介與逐步說明
• SPA製作簡介
• SPA藍圖

本檔案將逐步介紹簡化的SPA結構，並說明其運作方式，讓您將此理解套用至您自己的SPA。

相依性、配置和構建

除了預期的Angular相依性外，範例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上這裡找到。

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命令將類似：

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

建立後，套件就可以上傳至AEM例項。

AEM Project Archetype

任何AEM專案都應運用AEM Project Archetype，它支援使用React或Angular的SPA專案，並運用SPA SDK。

應用程式結構

納入相依性並依照先前所述建立應用程式，將會留下您可上傳至AEM例項的正常SPA套件。

本檔案的下一節將帶您瞭解AEM中的SPA結構、驅動應用程式的重要檔案，以及它們如何搭配運作。

以簡化的影像元件為例，但應用程式的所有元件都是以相同的概念為基礎。

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的核心理念是將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編輯器快速入門- WKND事件教學課程。

如需如何組織您自己為AEM開發SPA的詳細資訊，請參閱文章「為AEM開發SPA」。

如需動態模型至元件對應的詳細資訊，以及它在AEM中SPA中的運作方式，請參閱文章SPA的動態模型至元件對應。

如果您想要在AEM中實作React或Angular以外的架構的SPA，或只想深入瞭解AEM的SPA SDK的運作方式，請參閱SPA Blueprint文章。