web-dev-qa-db-ja.com

AngularとASP.NET MVC / Web apiの混在?

私はASP.NET MVC/Web APIを使用しているので、Angularを使用し始めましたが、それらを適切に混合する方法がわかりません。

Angularを使用しても、MVCサーバー側の概念はまだ値を提供しますか?または、angular HTTP電話?

VSテンプレートが不要なものをたくさん追加している場合に使用する必要がある、より簡素化された開始点はありますか?

サーバー側=純粋なデータとクライアント側=純粋なHTML処理を厳密に分けるという考え方が好きです。

40
punkouter

それを考える最も簡単な方法は、サーバーが状態を提供することです。 Angularは、その状態への更新の収集を管理し、サーバー上のWeb/APIに送信できます。より多くの単一ページアプリに移動する場合は、サーバー側のコードが最初のコードになりますアプリの状態。

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

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

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

今日の初めにあなたのコメントを読み、私が最初に述べたことを示すためにデモソリューションを一緒に投げました。 Angular and Bootstrap を追加すると、コアライブラリとそこからのすべての派生が得られますが、これはトレードオフです。) nuGetを使用します。

ご覧ください: https://github.com/QueueHammer/AngularWithPartialViewViews

学習中Angular Angular-Seedプログラムはかなり役に立ちました。特に、サイトでデモを試した後です。サンプルプロジェクトは、学習に役立つほど十分に異なっています。その後、 Angular-Require-Seedですが、それは別の投稿ですAngularステップバイステップ http://docs.angularjs.org/tutorial Angular =シード: https://github.com/angular/angular-seed

17
QueueHammer

VSテンプレートが不要なものをたくさん追加している場合に使用する必要がある、より簡素化された開始点はありますか?

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

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

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

全体として、両方の適切な混合があると、サイトは滑らかで機能的になります。

enter image description here

見栄えの良い参照

18
Yusubov