web-dev-qa-db-ja.com

推奨されるスケーラブルなAngularJSプロジェクト構造？

私はいくつかのAngularJSプロジェクトテンプレートを見ました：公式ウェブサイトで シードプロジェクト 、 Yeoman が生成され、 AngularFun 。

他に見たい（未）意見のあるテンプレートや、スケーラブルなAngularJSプロジェクトに提案する関連パターンはありますか？

スケーラブルとは

  • コントローラー、ディレクティブ、フィルターなどを独自のファイルに分割できる。
  • ブラウザがすべてをロードするのではなく、これらのファイルをオンデマンドでロードできること。
  • 共通のプロジェクト間コンポーネント（共通のディレクティブ、フィルター、サービスなど）を持つことができる。
templatesarchitectureprojectangularjs
46
luisfarzati

Pawel Kozlowskiと私が一緒に作成しているデモアプリケーションをご覧ください： https://github.com/angular-app/angular-app 。

オンデマンドでのファイルのロードはサポートされていませんが、モジュールを個別のファイルに分割し、テストをファーストクラスコンポーネントとして設定していることがわかります。 jsファイルを連結（およびリリース時に縮小）し、ユニットおよびエンドツーエンドのテストを実行できるビルドプロセス（Gruntを使用）があります。

モジュールを、ディレクティブ、フィルター、サービスなどに単純に分割するのではなく、機能アプリケーション領域と共通のクロスカッティングライブラリコードの2つのグループに分割することを選択しました。機能領域の側面には、いくつかのサービス、ディレクティブ、コントローラー、テンプレートがあります。

これにより、関連するすべてのアイテムが1か所にまとめられるため、機能領域に対する開発が容易になります。

このプロジェクトは、単純なnodeJSサーバーに依存してファイルを配信し（HTML5モードのディープリンクをサポート）、認証および承認サービスを提供します。

30
Pete BD

Ng-boilerplateを試してください。大規模なAngularJSプロジェクト向けの最も有望なキックスタートテンプレート： http://joshdmiller.github.io/ng-boilerplate/#/home

8
ottsch

少なくともAngularに変更を加えなくても、すべてのポイントを簡単に達成できると思います。

  • コントローラー、ディレクティブ、フィルターなどを独自のファイルに分割できる。

もちろん、これは基本的なAngularで行うことができます。必要な数のコントローラ/サービスにスクリプトタグを含めることができます。もちろん、まったくスケーラブルではないため、RequireJSなどのAMDモジュールを使用するのが最善の選択肢です。これは、この種の構成を持つシードの1つです。 https://github.com/elsom25/angular-requirejs-html5boilerplate-seed

  • ブラウザがすべてをロードするのではなく、これらのファイルをオンデマンドでロードできること。

pkozlowskiがコメントで示唆しているように、すでに問題の説明が記載されたエントリがあり、これを解決するために取り組んでいたことがわかります。実際にいくつかの結果がありました。 RequireJSを使用してオンデマンドでコントローラー、テンプレート、ディレクティブを読み込む実例があります およびresolveルート構成のパラメーター。

  • 共通のプロジェクト間コンポーネント（共通のディレクティブ、フィルター、サービスなど）を持つことができる

以前のポイントを解決しておくと、RequireJsモジュールを使用して簡単に達成できます。

私は、agularjs-lazy-seedプロジェクトを開始するのは良い考えかと思っていましたか？それに対する需要はありますか？さらに進めて、ルート構成を通常の構成の外に移動することもできます。たとえば、アプリケーションに含めるビューを含むviews.jsonファイル（理想的にはjsonで応答するサービス）があるとします。

{
    "views" : {
        ....
        "account" : {             
             "path" : "/account" // route path
             "name" : "Account", // view name
             "partial" : "views/account/account.html", // partial file
             "controller" : "account/main" // RequireJS module
             "directives" : [ "directives/version", "directives/menu" ] // directives used in the view
        }
        ....
    }
}

この方法で：

  • ビューを分離して開発し、このjsonブートストラップに基づいてアプリケーションをビルドします
  • いくつかの一般的なディレクティブとコンポーネントがあります
  • when bootstrap=ログイン後、ユーザーに表示を許可するビューをフィルタリングできます
  • ngView内のすべてがオンデマンドでロードされます

もちろん、この追加作業をすべて行うことが理にかなっているように、アプリケーションは本当に大きくなければなりません;）

8
matys84pl

私は他の人々がこれまでに言った点に同意します。物事を個別のモジュールに非常に簡単に分割し、通常のAngularJSのものでモジュールを互いに依存させることができます。その後、JSコードを任意のファイルとディレクトリツリーに分割できます。

私は、AngularJSに基づいたオープンソース hawtio プロジェクトで何をしているのかを言及すると思いました。モジュール性を極度に少し高めました:) hawtioは plugins を使用します。これは実行中のサーバーで実行時に検出できます（たとえば、実行時にUI関数を展開および展開解除します）。いくつかのRESTクエリまたはJMX検出に基づいて、プラグインを動的に、または削除できます。

例えばここにすべてがあります 現在のデフォルトプラグイン

レイアウトの観点では、各プラグインにはコード（js）、htmlパーシャル（html）、およびその他のもの（css/imgディレクトリなど）用の独自のディレクトリがあり、簡単でモジュール化された状態を簡単に維持できます。例えばここに camel plugin があり、独自のhtml、js、imgフォルダーがあります。

次に、特定のプラグインが独自のAngularJSモジュール、ディレクティブ、フィルターを定義し、他のモジュールに依存することができます。

これまでのところ、ソースファイルに対して非常に多くの有用な 命名規則 を思いつきませんでしたが:)。コントローラごとにファイルを書くのが最も簡単だと思います。しかし、fooPlugin.tsファイルとhelpers.tsファイル（一般的なモジュール固有のヘルパー関数用）以外には、これまでに他の意味のある命名規則はまだ見つかっていません。

4
James Strachan

警告：恥知らずなプラグ。

generator-angular-xl を必ずチェックしてください。

特に、コードを論理的にグループ化し、単体テストを足場化し、jsおよびcssファイルをindex.htmlなどに自動的に挿入することにより、大規模なAngularJSアプリケーションを作成することを目的としています。本格的なアプリケーションになるまで生き残ることができるプロトタイプを開発するときの良い選択です。バックエンドコードは生成されないため、必要なバックエンドテクノロジーを自由に選択できます。

1
Kenneth Lynne

このプロジェクトは有望に聞こえます http://vesparny.github.io/ng-kickstart

機能ごとにコードベースを分割し、コードを再利用可能な状態に保つことができます。また、カスタムGruntタスクのおかげでライブリロードが可能になります。

このプロジェクトはユニットテスト指向でもあり、最適化された本番用リリースを作成できるカスタム「distタスク」が付属しています。

1
Alessandro Arnodo