33

私は AngularJs を使用するまったくの初心者であり、チュートリアルを完了しましたが、まだ答えられていない質問が頭の中にたくさんあります。現在の主な関心事は、アプリケーションをモジュールに分割する方法です。

基本的に、さまざまなアプリへのポータルとして機能するアプリを構築する必要があり、それぞれがビジネス機能を表します (互いにほとんどまたはまったく関係がない場合もあります)。

チュートリアルでは、複数のビューを持つ 1 つのアプリを作成する方法を示しています。私が必要としているのは、複数のモジュールを備えた 1 つのアプリで、各モジュールには独自のビューがあります (おそらく共有ビューもあるでしょう)。

そのような構造のアプリに取り組んだ人はいますか? あなたの経験と、物事をどのように整理したかを教えていただけますか?

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

4

5 に答える 5

31

[編集] ブログに記事を書いて、より詳細に説明しました。

sam-dev.net でそれを読むと、パート IIをコード サンプルとともに読む ことができます。

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

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

  • アプリ
    • ビジネスモジュール
      • コントローラー
        • 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']);

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

繰り返しますが、それが最善のアプローチであるかどうかはわかりませんが、私にとっては間違いなく機能します。多分それは他の人に刺激を与えることができます。

編集

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;
    }
}
于 2013-04-18T08:30:58.830 に答える
11

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

Miško による最近のAngularjs のベスト プラクティスのビデオで、モジュールの構造をレイアウトして、テストとスケーリングを容易にする方法を示しています。モジュールをどのように構成するかは、angular アプリ内のパフォーマンスに影響を与えるとは想定されていないことに注意してください。

角度のあるアプリの開発から、前述の理由からベスト プラクティスの方法を使用することをお勧めします。当分の間、コントローラーなどを生成する独自のノード スクリプトを作成することをお勧めします。これには、コントローラーを作成するモジュールと名前を含めることができます。これにより、コントローラーが自動生成され、適切なテスト スペックが作成されます。

セットアップについて詳しく読みたい場合は、プロジェクトが向かう方向に基づいてプロジェクトをセットアップすることに関する優れた投稿がここにあります。

于 2013-04-19T00:12:55.313 に答える
3

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

于 2013-04-11T09:39:20.357 に答える
2

興味のある方のために、Misko のベスト プラクティスにより適合する「モジュール化された」バージョンの Angular Seed を作成しました: https://github.com/sanfordredlich/angular-brunch-seed-modularized

Brunch でセットアップされているため、ページのリロード、テストの実行などを非常に迅速に行うことができます。迅速に開発でき、コードのパターンに従っていれば、アプリケーションは適切にスケーリングされるはずです。楽しみ！

于 2013-08-04T06:19:29.850 に答える
1

yeoman ジェネレーターが採用するアプローチに対して私が見つけた欠点は、実際には angular モジュールと整列していないため、まとまりがあまり感じられないことです。そのため、プロジェクトが大きくなり、特定のコンポーネントに取り組んでいるときに、ソース ツリーを何度もめくっていることに気付きました。

私は最近、ここで別のアプローチに出くわしました。このアプローチは、Angular モジュールごとにファイルをグループ化し、よりまとまりを感じます。これの考えられる欠点の 1 つは、サイトをその場で実行するだけではなく、サイトを構築する必要があるという事実です。ただし、そのプロジェクトの grunt watch タスクはこれに役立ちます。

于 2013-04-12T02:52:50.833 に答える