AngularJS：複数のng-appsを使用したWebアプリケーションの構造化

40

ブロゴスフィアには、AngularJSアプリの構造化ガイドラインに関するトピックに関する以下のような記事があります。

ただし、ガイドラインとベストプラクティスについてまだ触れていないシナリオの1つは、複数の「ミニスパ」アプリを含む大規模なWebアプリケーションがあり、ミニスパアプリはすべて一定量のコードを共有している場合です。

ng-app同じページに複数の宣言をしようとする場合については言及していません。むしろ、私は、独自の独自のng-app宣言がある大規模サイトのさまざまなセクションを意味します。

Scott AllenがOdeToCodeブログで次のように書いています。

あまりうまく対処できていないシナリオの1つは、同じ優れたWebアプリケーションに複数のアプリが存在し、クライアントで共有コードを必要とするシナリオです。

推奨されるアプローチ、避けるべき落とし穴、またはあなたが指し示すことができるこのシナリオの良いサンプル構造はありますか？

更新-2015年9月10日
興味深い組織戦略を持つプロジェクトの1つに、MEAN.JSとそのモジュールフォルダーがあります。
https://github.com/meanjs/mean
https://github.com/meanjs/mean/tree/master/modules

別の例は、ASP.NET Music Store SPAの例です。 https://github.com/aspnet/MusicStore https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps

design web-applications angularjs

— mg1075
ソース

5

何と一緒に行くことにしましたか？私は、アプリケーションの分離をいくつかの小さな自己完結型アプリに分割する同じ立場にいます

— 。StephenPatten 14

8

これが私が使用しているデザインです。私が構築した2つのより大きなプロジェクトで有用であり、これまでのところ障害はありませんでした。

フォルダー構造

your-project/
  apps/
    global.html
    app1/
      index.html
      app1.module.js
      app1.js
      parts/
        foo.js
        foo.html
        ...
    app2/
  libs
    lib1/
      lib1.module.js
      parts/
        directive1.js
        directive1.html
    lib2/
  third-party/

見つけるために、サーバーのWebフレームワークを構成するapps/app1/index.htmlための要求がとき/app1に入っています。利用優しいのURL（例えばthe-first-application/代わりにapp1/、必要に応じて、サーバー・テクノロジーを使用してそれらをマッピングします。
サーバー技術が含まれている必要がありますglobal.htmlでindex.html、それはベンダーが含まれて含まれているため（下記参照）。
それぞれのアプリに必要なアセットindex.htmlを以下に含めます。
ng-appとをルート<div ui-view></div>に入れindex.htmlます。
すべてのアプリとライブラリは個別の角度モジュールです。
すべてのアプリ<app-name>.module.jsは、角度モジュール定義と依存関係リストを含むファイルを取得します。
すべてのアプリ<app-name>.jsは、モジュールの構成と実行ブロック、およびその一部としてルーティング構成を含むファイルを取得します。
すべてのアプリは、特定のアプリにとって意味のある構造でparts、アプリケーションのコントローラー、ビュー、サービス、ディレクティブを含むフォルダーを取得します。私のようなサブフォルダ考慮していない、彼らはスケーリングしないので、などは参考になりましたが、メーリングリストへ。controllers/views/
Libはアプリと同じ構造に従いますが、不要なものは除外します（明らかに）。

使用されるアプリ内のサービスとディレクティブから始めます。別のアプリでも何かが必要になったらすぐに、ライブラリにリファクタリングします。すべてのディレクティブまたはすべてのサービスのライブラリだけでなく、機能的に一貫したライブラリを作成してください。

資産

リリースビルド用にJSファイルとCSSファイルの両方を縮小しますが、開発中は縮小されていないファイルを使用します。これをサポートするセットアップを次に示します。

ベンダーの管理は、グローバルに含まれていglobal.htmlます。これにより、SPA間を移動するときにキャッシュから重いものをロードできます。キャッシュが適切に機能することを確認してください。
SPAごとのアセットはで定義されていindex.htmlます。これには、アプリ固有のファイルと使用済みのライブラリのみを含める必要があります。

上記のフォルダー構造により、ミニファイビルド手順に適したファイルを簡単に見つけることができます。

— theDmi
ソース

7

シングルページアプリ（SPA）は、メインアプリケーション内の非常に大規模なアプリケーションと複数のミニSPAで提案している方法で使用することを意図したものではありません。最大の問題は、すべてを事前にロードする必要があるため、ページのロード時間になります。

これに取り組む1つの方法は、個々のSPAに移動するナビゲーションページを使用することです。ナビゲーションページは非常に軽量で、選択内容に基づいて一度に1つのSPAのみをロードします。各SPA内のナビゲーションリンクを備えたリンクバーを提供して、ユーザーが別のエリアに移動する必要があるときにナビゲーションページに戻る必要がないようにすることができます。

このアプローチを使用すると、SPA間で情報を保持する際にいくつかの課題が生じる可能性があります。しかし、SPAが意図していないことについて話しているのです。クライアント側のデータ永続化に役立つフレームワークがいくつかあります。ブリーズは頭に浮かぶ最初のものですが、他にもあります。

レイアウトについて-いくつかのプログラマーの質問は、特定のニーズに応じて、大規模なプロジェクトレイアウトに対処します。私はこれとこれに出会いました。これらの質問で既に答えられているものを超えて、アプリケーションのレイアウトに影響を与えるSPAについて魔法のようなものはありません。

とはいえ、さまざまなプロジェクトに最適なさまざまなアプローチがあります。アンギュラーシードプロジェクトが提供する基本レイアウトを使用することをお勧めします。カスタムパッケージとソースコード用に、提供されているものとは別のフォルダーを作成します。ソースフォルダー内で、ニーズに合ったプロジェクトレイアウトを使用します。

— コミュニティ
ソース

-1

アプリケーションが同じページで複数のng-app宣言を必要とする場合、以下に示すようにモジュール名を挿入することにより、手動でAngularJSモジュールをブートストラップする必要があります。

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

このプランカーは、 AngularJSを手動でブートストラップする方法を詳しく説明しています。

— バサバラジカブレ
ソース

5

mg1075はそうではないことは明らかでした。「同じページで複数のng-app宣言をしようとする場合ではなく、独自の一意のngを持つ大規模サイトの異なるセクションを意味します。 -app宣言。」

— cincodenada 14