web-dev-qa-db-ja.com

AngularJSアプリケーションの構造化

私はAngularJsを使用するのが初めてなので、チュートリアルは完了しましたが、未解決の質問がたくさんあります。私の主な関心事は、アプリケーションをどのようにモジュールに分割するかです。

基本的に、さまざまなアプリのポータルとして機能するアプリを作成する必要があります。各アプリはビジネス機能を表します（時には、互いにほとんどまたはまったく関係がない）。

チュートリアルでは、複数のビューを持つ1つのアプリを作成する方法を示します。必要なのは、複数のモジュールを持つ1つのアプリです。各モジュールには独自のビューがあります（おそらく共有ビューもあります）。

誰もがそのような構造のアプリで作業しましたか？あなたの経験と、どのように物事を整理したかを教えてください。

AngularJS Seedプロジェクト（ https://github.com/angular/angular-seed ）は良いですが、実際には複雑なアプリケーションの構築方法を示していません。

html5moduleangularjs
33
Sam

[編集]詳細を説明するためにブログに記事を書きました。

sam-dev.netで読む そして、今すぐ パートIIを読む 、コードサンプルで。

私自身の質問に答えます。それが最良のアプローチだと思うからではなく、私が決めたものだからです。

これは、ビジネスモジュールをフォルダーに分割する方法です。

  • アプリ
    • businessModule
      • コントローラー
        • index.js
        • firstCtrl.js
        • secondCtrl.js
      • 指令
      • サービス
      • 景色
      • フィルター
    • anotherBusinessModule
    • 共有した
    • app.js
    • index.html

各モジュールには、コントローラー、ディレクティブなどの独自のフォルダー構造があります...

各フォルダーにはindex.jsファイルがあり、次に各コントローラー、各ディレクティブなどを分離する他のファイルがあります...

Index.jsファイルには、モジュールの定義が含まれています。たとえば、上記のbusinessModuleのコントローラーの場合：

angular.module('myCompany.businessModule.controllers', []);

ここには依存関係はありませんが、存在する可能性があります。

次に、firstCtrl.jsで、そのモジュールを再利用して、コントローラーを追加できます。

angular.module('myCompany.businessModule.controllers').controller('firstCtrl',     

        function(){
});

次に、app.jsは、アプリケーションに必要なすべてのモジュールを依存関係配列に追加して集約します。

 angular.module('myApp', ['myCompany.businessModule', 'myCompany.anotherBusinessModule']);

共有フォルダーには、ビジネスモジュールに固有ではなく、どこでも再利用できるディレクティブやその他のものが含まれています。

繰り返しますが、それが最良のアプローチであるかどうかはわかりませんが、それは間違いなく私のために動作します。たぶん、それは他の人々を刺激することができます。

[〜＃〜] edit [〜＃〜]

Index.jsファイルにはモジュール宣言が含まれているため、他のアプリケーションスクリプトの前にHTMLページで参照する必要があります。そのために、ASP.NET MVC 4のIBundleOrdererを使用しました。

 var bundle = new ScriptBundle("~/bundles/app") { Orderer = new AsIsBundleOrderer() };
 bundles.Add(bundle.IncludeDirectory("~/app", "*.js", true));

public class AsIsBundleOrderer : IBundleOrderer
{
    public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        files = files.OrderBy(x => x.Name == "index.js" ? 0 : 1);
        return files;
    }
}
31
Sam

サムの方法は、ほとんどの場合に行く方法のようです。現在のAngularドキュメントには、各コントローラー、サービスなどのモジュールとしてセットアップされていますが、これはGoogleのMiško自身によって矛盾しています。

Miškoによる最近のAngularjs Best Practicesビデオで、彼はテストの容易さのためにモジュールの構造をどのようにレイアウトできるかを示していますスケーリングも簡単です。モジュールの構造は、angular app。

開発中のangularアプリでは、前述の理由からベストプラクティスメソッドを使用することをお勧めします。当面は、独自のノードスクリプトを作成してコントローラーなどを生成することをお勧めします。コントローラーを作成するモジュールと名前。これにより、コントローラーが自動生成され、適切なテスト仕様が作成されます。

セットアップに関する優れた資料が必要な場合は、ここに優れた投稿を参照してください。それは見出しになります。

11
Ryan Q

yeomanに移動する必要があります https://github.com/yeoman/yeoman およびyeomanジェネレーター構造： https://github.com/yeoman/generator-angular 、これは、角度の付いたシードよりもアプリケーションをセットアップするための優れたソリューションになります。ビジネスモジュールごとに、異なるアプリを作成し、サービスとディレクティブを共有する必要があります

3
Stéphane Busso

興味のある人のために、私はAngular Seed Miskoのベストプラクティスに適したもの： https：// github.com/sanfordredlich/angular-brunch-seed-modularized

Brunchを使用してセットアップされているため、ページの再読み込み、テスト実行などをすばやく実行できます。迅速に開発することができ、コードのパターンに従えば、アプリケーションは合理的に適切にスケーリングするはずです。楽しい！

2
Sanford Redlich

Yeomanジェネレーターが採用するアプローチに見つけた欠点は、angularモジュールと実際に並んでいないので、私にはあまりまとまりがないと感じていることです。より大きく、特定のコンポーネントで作業している場合、ソースツリーで多くのことを確認しています。

私は最近、別のアプローチに遭遇しました こちら 。このアプローチは、ファイルをangularモジュールでグループ化し、私にとってよりまとまりがあります。これに対する1つの潜在的な欠点は、その場で実行できないサイトを構築する必要があるという事実です。ただし、そのプロジェクトのうっとりする監視タスクはこれに役立ちます。

1
rgaskill