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

Question

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

私はもう一度見てみましょう（un）と思われるテンプレートや、スケーラブルなAngularJSプロジェクトのために提案する関連パターンはありますか？スケーラブルなことで

私は

• が自分のファイルになどのコントローラ、ディレクティブ、フィルターを、分割することができることを意味します。
• ブラウザはすべてをロードするのではなく、必要に応じてこれらのファイルを読み込むことができます。共通プロジェクト間コンポーネント（共通ディレクティブ、フィルタ、サービスなど）を持つことができます。

Answer 1

あなたはパヴェルコズロウスキーと私は一緒に入れているデモ・アプリケーションを見てとることができます。 https://github.com/angular-app/angular-appを。

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

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

これは、関連するすべてのアイテムが1か所にあるため、機能領域に対する開発を容易にします。

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

Answer 2

私はあなたのポイントはすべて、少なくともAngularを変更することなく、簡単に達成できると言います。自分のファイルになどのコントローラ、ディレクティブ、フィルターを、分割することができるという

• 。

これはあなたが望むとおりに、コントローラ/サービスと同様に多くのスクリプトタグを含めることができるよう、基本的な角度で行わ当然のものとすることができます。もちろん、スケーラビリティはまったくないので、RequireJSのようなAMDモジュールを使用するのが最善の選択肢です。これは、このような構成を持つ種子のいずれかです。https://github.com/elsom25/angular-requirejs-html5boilerplate-seed

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

としてpkozlowskiはコメントで提案し、すでに問題のいくつかの説明のエントリがあり、私はまた、これを解決するために働いて、そして実際にいくつかの結果を有していたことがわかります。I have a working example of loading controllers, templates and directives on demand using RequireJSおよびは、パラメタのルート設定を解決します。一般的な、クロスプロジェクトの構成要素（例えば、共通の指示、フィルタまたはサービス）が容易RequireJsモジュールを使用してachivedことができる解決以前点を有する

を有することができること

• 。

  ---

  私は、agularjs-lazy-seedプロジェクトを開始することが良いアイデアかどうか疑問に思っていましたか？それに対する要求はありますか？さらに構成を外して、経路構成を移動することもできます。たとえば、view.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に基づいてアプリケーションが
  • をブートストラップは
  • とき、ブートストラップは、ログインした後、あなたは可能性がいくつかの共通のディレクティブとコンポーネントを持っていますユーザーはオンデマンドでロードされますngView内部
  • すべてのものを見ることが許可されていることをビューにフィルタを適用
  もちろん

  アプリケーションはその後、本当に大きなでなければなりませんので、その意味を成していただろう、この追加作業のすべてを行う;）

  を

Answer 3

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

AngularJSに基づいたオープンソースhawtioプロジェクトで私たちがやっていることを言いたいと思いました。私たちは極端に少しずつモジュール化しました:) hawtioは実行中のサーバで実行時に発見されるpluginsを使用します（実行時にUI関数をデプロイしたりアンデプロイするなど）。したがって、RESTクエリやJMX検出に基づいて、プラグインを動的に削除したり削除したりすることができます。

ここにすべてがありますcurrent default plugins

レイアウトに関して、各プラグインは、コード（js）、htmlパーシャル（html）その他のもの（例：css/imgディレクトリ）のための独自のディレクトリを備えています。モジュラー。例えばここにはcamel pluginのhtml、js、imgフォルダがあります。

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

これまでのところ、ソースファイルには非常に多くの役に立ちましたnaming conventionsがありません:)。コントローラごとのファイルを書くのが最もシンプルなようです。 fooPlugin.tsファイルとhelpers.tsファイル（一般的なモジュール特有のヘルパー関数用）以外は、今までのところ他に意味のある命名規則は見つかりませんでした。

Answer 4

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

Answer 5

は、このプロジェクトは、有望なhttp://vesparny.github.io/ng-kickstart

に聞こえるそれは機能して、コードベースを分割し、コードの再利用可能なを保つためにあなたができるようになり、同様にカスタム面倒な作業のおかげでlivereloadingそれのために。

このプロジェクトはユニットテストの指向でもあり、最適化されたプロダクション対応のリリースを作成するカスタム "distタスク"が付属しています。

Answer 6

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

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

これは、論理的にコードをグループ化し、単体テストをテストし、自動的にjsやcssファイルをindex.htmlなどに挿入することで、大規模なAngularJSアプリケーションを作成することを目的としています。また、データのモックバックエンドフル・ブロー・アプリケーションにも生きることができるプロトタイプを開発する際に、効果的にその選択肢を有効にします。バックエンドコードは生成されませんので、必要なバックエンド技術を自由に選択することができます。