2017-08-06 1 views
1

を統合することが可能であることは、私が心配です:が、それは私がここに、私はタイトルへの答えを必要とするすべてのものを含めることはできませんAngular.js(角1)及びAEM(アドビ経験マネージャー6.2)

  • AEMを開発する際には、クライアント側のフレームワーク/ libが必要ですか?もしそうなら、最良のものはAEMに適合し、開発には簡単です(Angular.jsは、それが「十分な」十分で良いと思う方法です)。 angular.jsを使用する場合には
  • 、私はいくつかの疑問を持っている: (ng-appで初期化される)と、AEMコンポーネントが分離されているので、我々はそれをロードし、私はほとんどをロードすることはできませんどのように最もoutterアプリです
    • それらのいずれかで外出する。
    • IMO、ほとんどの外出先ng-appがテンプレートに読み込まれます(これはすべてのコンポーネントで必要ですが、理論上のみです(わかりません)。テンプレートをロードしてJS、CSSファイルをロードする(コンポーネントを作成するのではなく、明確にする)
    • 別の方法では、各AEMコンポーネントは分離された角度モジュールになり、手動でブートストラップされます。明確化)

なく、少なくとも最後に、あなたが使用される例(複雑なことに、世界ハロー好きではない)、または生産プロジェクトを持っている場合このスタック(完璧!)は、私の最大の関心事は「できるか」であるので、私に知らせてください。

多くの方々に感謝します。

+1

https://www.capella.edu/online-degrees。あなたの正確な要件はわかりませんが、jqueryの代わりに使用してすべてのstuffを行います。メインテンプレートのng-appを追加すると、そこから作成されたすべてのページにng-appにアクセスできるようになります。任意のコンポーネント。 –

+0

あなたのページは管理者が作成できますか(どのコンポーネントをドラッグ・アンド・ドロップするか)? – thelonglqd

+0

センターピース全体がバックエンドサービスのJsonに基づいて自分自身をロードする単一のコンポーネントです –

答えて

2

現在、AEMを使用した角型JSを使用しています。

これは、ng-appで初期化された最も優れたアプリケーションであり、AEMコンポーネントが分離されているため、どのようにロードするのですか。

ans:この目的のためにレンダラーコンポーネントを作成して外部アプリケーションとして作成し、必要なクライアントライブラリを追加することができます。その後レンダラースコープを通常の角度アプリケーションとして使用することができます。

IMOでは、ほとんどのout-ng-appがテンプレートに読み込まれます(これはすべてのコンポーネントで必要ですが、それは理論上です(私はそれについてはわかりません)。私はどのように

ANS(単に明確にするために、構成要素ではない創造)テンプレートの作成にJS、CSSファイルをロードしますをむしろテンプレートでそれをロードすることは非常に簡単クライアントlibの理由として、コンポーネントにそれを追加しますよりも、 AEMのjs/cssのようなものすべてをクライアントのライブラリとして追加することができます

代替アプローチとして、各AEMコンポーネントは分離された角度モジュールになり、手動でブートストラップされます(I 'はい、あなたは角アプリケーションとしてコンポーネントを作成することができますし、別々に、私は角度1を使用していた

Here is the directory structure for a clientlib

+0

実際には、その時点で安全のためにjQueryを選択しましたが、次回はAEMでソリューションを使用します。 – thelonglqd

0

それをブートストラップすることができ:あまりにも、)明確にするために助けてください

ANS、よく分かりません。 xをAEM 6.xで実行し、SPA(シングルページアプリケーション)を作成しました。また、Angular 1.xを使用してAEM画面アプリケーションを作成しました。ngのアプリ

  1. AEMページテンプレート(bodyタグ)とのための角度依存性を追加しました - :

    あり、それを行うには多くの方法かもしれないが、私は次のようなアプローチを踏襲していますサイト(clientlib角度1.1)

  2. module.js言うあなたのサイトのclientlib(JS)で角度のモジュールを定義し、 example: var app = angular.module('app', ['ui.router', 'ngAnimate','ui.bootstrap.tpls','ui.bootstrap.modal']);
  3. 異なるパスに対応する状態プロバイダを定義することもできますapp.config(function ($stateProvider, $urlRouterProvider) {});
  4. 各コンポーネント固有のモジュール/コントローラを特定のclientlib(js)ファイルで定義します。その使用ここで example (html): <div ng-controller="LoginCtrl" /> example (client lib(js)) - app.controller('LoginCtrl', function ($scope) {});
関連する問題