AngularとASP.NET MVC / Web APIを混合していますか?


40

私はASP.NET MVC / Web APIを使用してきましたが、現在、Angularを使用し始めていますが、それらを混合する適切な方法については明確ではありません。

Angularを使用しても、MVCサーバー側の概念にはまだ価値がありますか?または、厳密にWeb APIを使用して、角度付きHTTP呼び出しのデータを取得する必要がありますか?

VSテンプレートに不要なものがたくさん追加されている場合に使用する必要のある開始点はもっと少なくなっていますか?

サーバー側=純粋なデータとクライアント側=純粋なHTML処理の厳密な分割のアイデアが好きです。


回答:


17

それについて考える最も簡単な方法は、サーバーが状態を提供することです。Angularは、その状態に対する更新の収集を管理し、サーバー上のweb / apiに送信できます。さらに1ページのアプリに移行したい場合、サーバー側のコードはアプリの初期状態にすぎません。

Web APIは、データをアプリに取り込むための出発点として最適な場所です。最終的には、デフォルトのルートを更新して、環境の設計要件を満たし、必要に応じて厳密に休憩を取ります。

ASP4がデフォルトで含まれていたいくつかのライブラリが必要であり、それらはMVC4テンプレートにも含まれていました。本当に不要なものがページに含まれているだけでなく、プロジェクトに含まれているだけでなく、デフォルトページで参照されることもありません。jQuery以外のすべてを安全に削除する必要があり、jQueryUIを削除することもできます。デフォルトの多くは意味がありますが、ドメインの知識を入力し始めると、特定のニーズを満たすライブラリを使用します。

厳密な分割があっても、サーバー側のmvcは、単一ページアプリの非常にクリーンなバッキングであることがわかります。ページとAPI呼び出しを配信する際の効果的なルーティングは、代表的な例です。別の便利な機能は、マスターページを使用しないビューまたは部分的なビューのみを返すコントローラーです。Angularにはテンプレートで埋めることができる「ビュー」があります。これは、静的ファイルまたはルートのいずれかのパーシャルにすることができます。

本日前にあなたのコメントを読み、私が最初に言及したことを示すためにデモソリューションをまとめました。ソリューションでは、AngularとBootstrapを追加するときにコアライブラリとそこから派生するすべてのものを取得しますが、元の「綿毛」の一部も削除されます。これは、nuGetを使用することのトレードオフです。

チェックしてくださいhttps : //github.com/QueueHammer/AngularWithPartialViewViews

Angularの学習では、Angular-Seedプログラムがかなり役立つことがわかりました。特に彼らのサイトでデモを試した後。サンプルプロジェクトは、学習に役立つほど十分に異なっています。その後、Angular-Require-Seedを見ましたが、それは別の投稿です。Angular Step by Step http://docs.angularjs.org/tutorial Angular Seed:https : //github.com/angular/angular-seed


したがって、MVCが通常どのように機能するかを示すサーバー側のビューをいくつか持つことは理にかなっています。そして、それらのビューのそれぞれに対して、複数のクライアント側の角度ビューがあります(特定のエンティティの作成/詳細/編集)。もしそうなら、MVCと
アンギュラーを

デモプロジェクトへのリンクを追加し、Angularを最初に調べ始めました。一般的なSPAと、今後数か月にわたってアーキテクチャ上の課題を解決する優れたパターン/ライブラリのいくつかについてブログに投稿します。投稿を更新します。
QueueHammer

リンクを取得しました。デモをご覧ください。よさそうです。最初の質問は..です。ASP.NETMVCの機能を開始するメインページとして維持します。そのページを超えて他のすべては角度部分ビューです。メインASPが2つありますか。 NET MVCビュー?つまり、ASP.NET MVCビューは角度部分ビューの親です。たとえば、1つのASP.NETビューの下にあるすべての部分ビューが必要ではないかもしれません。それは理にかなっていますか。見せてくれますか?私が思う出発点に私を良い場所に置いたのは…。
パンクアウター

そして、これらのいずれも呼び出さないため、partialsController.csのポイントは何ですか?
パンクアウター

パーシャルはほとんどどこにでも置くことができます。ビューごとのアクションでより多くのコントローラーを作成することができます。プロジェクトのルートが角度アプリモジュールで定義されたビューと一致する1つの「partialsController.cs」を使用しました。したがって、partial / view1はパーシャルコントローラーを呼び出し、アクションviewOneを取得してから、ビューViewOneを取得します。アクションでは、View()を呼び出すことができます。文字列パラメータを使用して、ビューの場所を渡します。そのため、ほぼすべての方法で柔軟に整理できます。
QueueHammer

18

VSテンプレートに不要なものがたくさん追加されている場合に使用する必要のある開始点はもっと少なくなっていますか?

これらのVSテンプレートは、最初の初期設定と学習曲線を整えるのに適していますが、実際のプロジェクトのニーズに合わせてカスタマイズする必要があります。

たとえば、このサイトhttp://www.reviewstoshare.comでは、友人がAngularJSとともに使用していASP.NET MVCます。このサイトは、必要に応じてASP.MVC + Jqueryを使用してページ内での対話を既に構築していることに注意してください。

一方、コメント、投票、フラグ設定など、サイトにはまだ「Ajaxy」という性質があります。Stackoverflow自体とあまり変わりません。AngularJSの前は、$(document).ready()コールバック内のJqueryプラグインと関数の混乱でした。JS コードはあまりテストできませんでした。

全体として、両方を適切に組み合わせると、サイトが滑らかで機能的になります。

ここに画像の説明を入力してください

見栄えの良い参考資料


または、角度のある部分的なページのコレクションの下に、通常のMVCビューがいくつかない場合(上記のコメントで述べたように)
-punkouter

これは事実であり、SEOの問題は新たな更新によって解決されました。
ELユスボフ

3
だから、批判するのではなく、チャート上の否定的な声明は実際にx軸の下にありませんか?これにより、チャートは拡大し続ける罪の波のように見えます。私はそれがあなたのチャートではなく、悪い科学であることを知っています。
QueueHammer

12
QueueHammerあなたはパーティーで本当に楽しくなければなりません。:-)
トーマスストック

1
「Very Cool!」の両側の波の2つの低いポイントに完全に詰まっています。バブル、1つの結合されたくだらない角地獄。
MetaGuru 14
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.