AEM での Angular SPA の作成（チュートリアル）

このたびは、 SPA Editor Adobe Experience Manager(AEM) の機能を使用できます。 このチュートリアルでは、架空のライフスタイルブランドである WKND 向けのAngularアプリケーションの実装について説明します。 angularアプリは、AEM SPA Editor を使用してデプロイされるように開発および設計されます。このエディターは、AngularコンポーネントをAEMコンポーネントにマッピングします。 AEMにデプロイされた完成したSPAは、AEMの従来のインライン編集ツールを使用して動的にオーサリングできます。

最終的なSPAの実装

WKND SPAの実装

について

この複数パートから成るチュートリアルの目的は、AEMのSPAエディター機能と連携するAngularアプリケーションを実装する方法を開発者に教えることです。 実際のシナリオでは、開発アクティビティは、多くの場合、 フロントエンド開発者 および バックエンド開発者. AEM SPA Editor プロジェクトに参加するすべての開発者が、このチュートリアルを完了できると便利です。

このチュートリアルは、 AEMas a Cloud Service との後方互換性がある AEM 6.5.4 以降 および AEM 6.4.8 以降. SPAは、次を使用して実装されます。

チュートリアルの各パートの所要時間は 1～2 時間です。

最新のコード

チュートリアルコードはすべて、 GitHub.

この 最新のコードベース は、ダウンロード可能なAEMパッケージとして入手できます。

前提条件

このチュートリアルを開始する前に、次の手順を実行する必要があります。

必須ではありませんが、基本的な理解を持つことは有益です 従来のAEM Sitesコンポーネントの開発.

ローカル開発環境

このチュートリアルを完了するには、ローカルの開発環境が必要です。スクリーンショットとビデオは、Mac OS 環境で動作しているAEMas a Cloud ServiceSDK を使用して、 Visual Studio Code を IDE として使用します。 特に断りのない限り、コマンドとコードはローカルのオペレーティングシステムから独立している必要があります。

メモ

AEM as a Cloud Service は初めてですか？ 以下を確認します。 AEM as a Cloud Service SDK を使用したローカル開発環境の設定に関する以下のガイド.

AEM 6.5 を初めて使用する場合 以下を確認します。 次のガイドでは、ローカル開発環境を設定します.

次の手順

何を待ってる?!チュートリアルを開始するには、 SPA Editor Project この章では、AEMプロジェクトアーキタイプを使用してSPA Editor が有効なプロジェクトを生成する方法について説明します。

後方互換性

このチュートリアルのプロジェクトコードは、AEM as a Cloud Service用に構築されています。 プロジェクトコードをに後方互換性を持たせるため 6.5.4 以上 および 6.4.8 以上 いくつかの変更が加えられました。

この UberJar v6.4.4 は依存関係として含まれています：

<!-- Adobe AEM 6.x Dependencies -->
<dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>uber-jar</artifactId>
    <version>6.4.4</version>
    <classifier>apis</classifier>
    <scope>provided</scope>
</dependency>

という名前の追加の Maven プロファイル classic を追加して、target AEM 6.x 環境のビルドを変更しました。

  <!-- AEM 6.x Profile to include Core Components-->
    <profile>
        <id>classic</id>
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
        <build>
        ...
    </profile>

この classic プロファイルはデフォルトで無効になっています。 AEM 6.x でチュートリアルに従う場合は、 classic Maven ビルドの実行を指示された場合は常に、次のプロファイルを使用します。

$ mvn clean install -PautoInstallSinglePackage -Pclassic

AEM実装用の新しいプロジェクトを生成する場合、常に最新バージョンの AEM Project Archetype を更新し、 aemVersion をクリックして、AEMの意図したバージョンをターゲットにします。

このページ