AngularJSモジュールのアーキテクチャ

Question

私の会社のアプリケーションでいくつかのモジュールを作成する予定であり、モジュールのアーキテクチャを設計する際に問題があります。私は研究を行っており、ページごとに1つのモジュールを使用するか、他のすべてのモジュールに依存する「マスター」モジュールを作成する必要があるようです。私はこのアプローチが気に入らないのは、すべての単一ページのアプリケーションのすべての面について、すべてのJavaScriptをロードする必要があるからです。それは本質的に間違っているように見えますが、ページ上の複数の場所で1つのモジュールを使用する必要がある場合、それを他の方法で処理する方法もわかりません。たとえば、私はメンバーシップモジュールを持っており、私は自分のWebページのヘッダーセクションに付いています。これは、ログイン、登録、「パスワードを忘れた」タイプのワークフローを実行するためのものです。

パスワードの変更専用の別のページ（リセットリンクから）にもヘッダーがありますが、パスワードリセット機能をメンバーシップモジュールに含める必要があります。私はあなたのアプリケーションを設計する一つの方法論が機能性/機能であることを読んだ。私はメンバーシップが適切なアプリケーションだと思っていましたが、特定のページに複数回メンバーシップモジュールを適用することができないので、今は分かりません。

私は適切な道にいるのですか、これに適した方法はありますか？私はヘッダーとページの残りのための別のモジュールを持っている必要がありますか？私は弾丸を噛んですべてをロードするべきですか？ （私は願っていません...）

これはASP.Net MVCアプリケーションであり、まだビューと部分的なビューを提供するためにMVCに依存していることにも注意してください。そのため、私はレンダーjavascriptセクションを使用して、そのページが機能するために必要なjavascriptのみを動的にロードしたいと考えました。これは茶番ですか？

<header ng-app="membership"> 
    //stuff for header membership functions 
</header> 

<div ng-app="membership"> 
    //somewhere else that needs membership, outside of header 
</div> 

Answer 1

役立ちますミニのSPA（サイロ）代わりのフルSPA。 Miguel A Castro's videoを見ることができ、彼のwebsiteでソースをダウンロードできます。

リクエストが来たら、まずASP.Net MVC Routeに行きます。次に、Angular Routeが残りを引き継ぎます。それは非常に滑らかなデザインです。

FYI

：角2は、右隅の周りにあるので、私は後で簡単に角度2に変換することができるように、私は先に行って、角1.5 Compotentにそれらを更新しました。

必要に応じて、ここで停止できます。私は一歩前進し、Matt Honeycutt's Building Strongly-typed AngularJS Apps with ASP.NET MVC 5アプローチを使用して厳密に型指定されたビューを使用します。

次に、Axel Zarate's ANGULAR.NET – HELPERS FOR ASP .NET MVC 4のような角度ヘルパーを実装しました。

Answer 2

角度アプリケーションでは、単一ページアプリケーションであるため、すべてのJavaScriptを読み込む必要があります。これはアプリケーションのコードであり、必要です。これは最初のページの読み込み時に1回だけ実行されます。 あなたは常に同じページにいますが、別の状態です。

良いアプローチの1つは、他のすべてのモジュールを含むマスターモジュールを定義することです。これらのモジュールには、必要な他の「サブモジュール」も含めることができます。

angular.module('App', [ 
    'App.Membership' 
    // ... 
    // All others modules you need, including 3rd party modules 
]) 

次に、各モジュールの上に、あなたはまた、ヘッダのような常に存在している要素を、処理するために、グローバルコントローラを追加することができます異なる関連状態とそのコントローラ

angular.module('App.Membership', [ 
    // Module dependencies 
]) 
.config(['$stateProvider', function($stateProvider) { 

    //State definition 
    $stateProvider.state('membership', { 
    parent: 'app', 
    url: '/member', 
    controller: 'MembershipCtrl', 
    template: '<ui-view/>' 
    }); 
}]); 

を定義することができます。

ホープこれは私が個人的に好きな