2017-02-08 3 views
2

AngularJS2をMagnolia CMSに統合したい(私はAngularJSを初めて使う)。 quickstart Project localyを試しました.npm startで正しく動作します。Magnolia CMSでAngularJS 2を使用する方法

npm tscを使用して.jsファイルが動作するかどうかをテストするためにMagnoliaのファイルを使用するようにしました。すべてのnode_modulesファイルはunpkg.comで取得されています(クイックスタートプロジェクトで使用されていたファイルをターミナルに閉じ込めて、すべてを統合しました)。 ftlテンプレート内の<my-app>タグと同じ場所にあるすべてのスクリプトを追加します(App-jsファイルはmagnolia自体から読み込まれます)。これはうまくいかなかったので、私は何が欠けているのか分からない。

また、thisと似たようなことを試みました(しかし、angular2ベータの代わりに@angularを使用しています)。

クイックスタートは(npm startで)動作しますが、tomcatサーバーでは動作しないので、これが可能かどうかはわかりません。私は問題がtomcatサーバーかもしれないと思った。

Iはまた、ちょうど構造は以下の通りであったこのコード切り取ら、と任意のサーバなしにそれを試してみました:

テスト/ test.htmlという

テスト/アプリ/ app.component.js & app.module & main.js

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<!-- Update these package versions as needed --> 
 
\t <script src="https://unpkg.com/[email protected]/dist/zone.js"></script> 
 
\t <script src="https://unpkg.com/[email protected]/dist/system.src.js"></script> 
 
\t <script src="https://unpkg.com/[email protected]/client/shim.min.js"></script> 
 
\t <script src="https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script> 
 
\t <script src="https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script> 
 
\t <script src="https://unpkg.com/@angular/core/bundles/core.umd.js"></script> 
 
\t <script src="https://unpkg.com/@angular/common/bundles/common.umd.js"></script> 
 
\t <script src="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/symbol/observable.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/Observable.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/Subject.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/util/root.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/util/toSubscriber.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/Subscriber.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/Subscription.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/util/ObjectUnsubscribedError.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/SubjectSubscription.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/symbol/rxSubscriber.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/Observer.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/util/isFunction.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/util/isArray.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/util/isObject.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/util/tryCatch.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/util/errorObject.js"></script> 
 
\t <script src="https://unpkg.com/rxjs/util/UnsubscriptionError.js"></script> 
 
\t <script src="app/app.component.js"></script> 
 
\t <script src="app/app.module.js"></script> 
 
\t <script src="app/main.js"></script> 
 
<script> 
 
     System.import('app').catch(function(err){ console.error(err); }); 
 
    </script> 
 
<title>Title</title> 
 
</head> 
 
<body> 
 
\t <my-app>Loading AppComponent content here ...</my-app> 
 
</body> 
 
</html>

しかしトンを.jsファイル彼はまた働きませんでした。

私はREST APIを使用して、フォーミュラなどの検証ツールを取得しました。しかし、今私は公式のためのページを構築する必要があります。私はこのページをどのように構築できるか分かりません。それはftlでマグノリアの中でそれを行うことは可能ですか? ここで最高の解決策は何ですか

答えて

1

マグノリアCMSテンプレートとは統合しません。 Magnolia CMS REST APIを使用して、それと対話するアングルアプリを作成した方が良いでしょう。

+0

私はREST APIを使用して、フォーミュラなどの検証ツールを取得しました。 しかし、今私は公式のためのページを構築する必要があります。ここで最善の目的は何ですか?多分私に良い方法を教えてもらえますか? – EagleT

0

この[plunker] [1]で、AngularJSをnode.jsなしで実行することができました。 前に私の.tsファイルをgulpでコンパイルしようとしました。コンパイルはうまくいきましたが、フォーマットが間違っていたファイル(ここでは[例] [2])はすでにjsにコンパイルされたfilsを使っていました(このファイルは私がすでに質問したクイックスタートプロジェクトからのものです)。

[1]: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=preview 


[2]: https://plnkr.co/edit/8lOtCy4GPsq9hZH6D38E?p=preview 
1

マグノリアライトモジュール(Magnolia CLI(NPM))をビルド設定出力の一部としてMagnolia CLI(NPM)でビルドして、/ webresourcesフォルダに移動するとどうしてですか?
こうしてコンパイルすると、マグノリアはあなたのためにjsファイルを提供し、セキュリティを設定し、実行時にマグノリアがあなたのために通常行うすべての他のものをリロードします。

さらに詳しい情報CLI,Light Module structureおよびlight development in generalである。

+0

ライトモジュールのアイデアをありがとう。多分、マグノリアでアプリのコンテンツを埋め込むための良い方法がありますか?私が現時点で動作させるために唯一管理した唯一の方法は、magnoliaの直接コンポーネントレンダリングを使用することです。これはコンテンツのhtmlコンポーネントを提供します。しかし、私はまだこれを解決するためのより良い方法を探しています。 – EagleT

+0

「CMSのコンテンツを消費してAngularアプリで表示する」のように「コンテンツを埋め込む」のは、HTMLの代わりにJSONとしてコンテンツを取得する方がいいでしょうか?そうだとすると、コンポーネントは、リクエストされたときにw/.js(またはそれに類似した拡張子)がjsonとしてレンダリングされると、そのようになります。例:https://gist.github.com/47fc19d0e66c6cb8bbcaa07b1c66dcedコンテンツをjsonとしてレンダリングするスクリプトの例:https ://gist.github.com/e78f74c425f1904490ad57f725f46d5c https://github.com/rah003/neat-jsonfnから入手できるjsonfnを使用します。 – Jan

+0

はいコンテンツを入力します。これは、CMSのコンテンツを使用してそれを使用することを意味しますAngularAppテンプレート(もちろん、Angularテンプレートはhtmlでなければならないので)htmlは大丈夫ですが、現時点ではこのバインディングはコンポーネントの直接レンダリングへのリンクをコピーするだけで動作します。これを縛る方法。 罪私はAngularJS 2(と1)の新機能です。これがJSONファイルでも動作するのかどうかはわかりません。 – EagleT