混合Angular和ASP.NET MVC / Web API?


40

我来自使用ASP.NET MVC / Web API,现在我开始使用Angular,但不清楚混合它们的正确方法。

一旦我使用Angular,MVC服务器端概念是否仍然提供任何价值?还是我应该严格使用Web API来纯粹获取角度HTTP调用的数据?

如果VS模板添加了很多我不需要的东西,也许我应该使用更简化的起点吗?

我喜欢严格区分服务器端=纯数据和客户端=纯HTML处理的想法。


Answers:


17

考虑它的最简单方法是服务器提供状态。Angular可以管理收集到该状态的更新,并将其发送到服务器上的Web / API。如果您想使用更多单页应用程序,则服务器端代码将只是您应用程序的初始状态。

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并结合使用角度的好途径
punkouter 2013年

添加了到演示项目的链接,也是我第一次开始研究Angular的地方。我将撰写有关SPA的博客,以及一些在未来几个月内解决其架构难题的更好的模式/库。我会在以后更新我的帖子。
QueueHammer

刚得到您的链接..观看了演示。看起来不错..第一个问题是..所以..您正在将ASP.NET MVC功能保持在开始的主页面上..在该页面之外,其他所有内容都是角局部视图。.是否可以有两个主ASP。 NET MVC视图?换句话说,.. ASP.NET MVC视图是角形局部视图的父级。例如,..也许我不希望一个ASP.NET视图下的所有局部视图..这样做有意义吗?你能告诉我吗?那是什么让我处于一个起点,我认为...。或者也许我说的是没有道理的?
punkouter 2013年

而partialsController.cs的意义何在,因为它从不调用其中任何一个?
punkouter 2013年

您可以将分音符放在几乎任何地方。您可以通过每个视图执行一个动作来制作更多的控制器,我使用了一个“ partialsController.cs”项目中的路由与angular app模块中定义的视图相匹配。因此,partial / view1会调用partials控制器并获取操作viewOne,然后再获取视图ViewOne。在动作中,您可以调用View(); 用字符串参数传递视图的位置。因此,您几乎可以按照自己的方式灵活地组织它。
QueueHammer 2013年

18

如果VS模板添加了很多我不需要的东西,也许我应该使用更简化的起点吗?

这些VS模板非常适合在开始时减少初始设置和学习曲线,但是您需要根据实际项目需求自定义它们。

例如,在此网站http://www.reviewstoshare.com上,我的朋友AngularJS与一起使用ASP.NET MVC。请记住,此网站已经根据需要使用ASP.MVC + Jquery进行了页面内交互。

另一方面,该站点仍有一些“ Ajaxy”性质,例如评论,投票,标记等。与Stackoverflow本身没有太大区别。在AngularJS之前,$(document).ready()回调中的Jquery插件和功能一团糟,更不用说JS代码了。

总体而言,适当地结合使用这两种方法可以使您的网站更加流畅和正常运行。

在此处输入图片说明

一些值得参考的参考


或者,如果在有角度的部分页面的集合下有一些常规的MVC视图不会有帮助(就像我在上面的评论中提到的那样)
punkouter 2013年

的确如此,SEO问题已通过全新更新得以解决。
EL Yusubov

3
因此,不是要批评,而是图表上的否定陈述实际上不会在x轴下方吗?那将使图表看起来像一个不断扩大的罪恶浪潮。我知道它不是您的图表,而是坏科学。
QueueHammer 2013年

12
QueueHammer,您在聚会上一定很有趣。:-)
Thomas Stock

1
我完全陷入了“非常酷!”波浪的两个低点。泡沫,就像一个肮脏的有角地狱一样。
MetaGuru 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.