AngularJS为ASP.NET MVC项目提供了什么?

时间:2016-03-30 21:14:39

标签: angularjs asp.net-mvc

我听说很多关于AngularJS如何比jQuery更好地与服务器通信。 但我发现只是用纯客户端javascript文件替换C#控制器和cshtml视图。我对此毫无兴趣。 什么是我失踪的? 我目前正在使用jQuery Ajax通过JSON在客户端和服务器之间进行通信。我期待着为此目的找到更好的解决方案。

3 个答案:

答案 0 :(得分:8)

一旦控制器返回视图,发送到浏览器的内容就是纯HTML。 Razor以HTML格式呈现服务器端。或者您的操作可以返回纯JSON。

因此,无论您是想使用jquery,angularjs还是其他任何基于JS / HTML的库,MVC都没有限制。 从客户端代码的角度来看,控制器操作只是返回返回HTML或JSON的URL。

此外,返回JSON或WebAPI控制器的MVC控制器操作是AngularJS与之交互的完美RESTful端点。如果您需要HTML片段来刷新页面的动态区域,则返回部分视图的控制器操作将作为HTML片段传递给客户端。因此,通过Angular的交互式请求仍然可以利用Controller / Business / Data层的后端架构。

Angular提供什么MVC

AngularJS提供的MVC应用程序与它提供的任何Web应用程序相同。这是用这些元素与后端的交互性来抽象UI元素的呈现的好方法。使用jquery的常见方法的问题是您通过选择器(例如$('.someClass').on(...)对特定HTML元素的交互作出反应,然后在处理程序中从元素收集有关所点击内容的信息并在ajax请求中提交,然后采取响应和更新特定元素$('.areaToUpdate)。html(响应)`。

所以你有三个问题未正确分开:

  • 什么元素响应交互(按钮点击,下拉更改,项目拖放)
  • 与服务器的交互,以编译请求,提交请求并解析响应。
  • 根据服务器的响应更新UI

通常,由于我们尝试使此代码不那么脆弱的方式,您被限制为对象的逻辑层次结构,这些对象也与UI的HTML元素层次结构相匹配。长话短说,缺乏适当的关注点分离意味着改变任何一个会影响一大堆具有多种用途的代码,因此更改更具挑战性,因为你因为缺乏解耦而受到某些限制。

AngularJS通过使用客户端模型作为这些问题之间的中介,为客户端提供了这些问题的分离。 UI交互更新模型,其他代码响应模型的更改并生成响应更新模型的服务器请求,而其他代码可响应这些更改并更新UI以响应模型更改。您可以自由修改UI的结构,并且可以使用更小的代码集进行更新,以便将UI更改连接起来。

AngularJS是从MVC模式建模的事实使得它似乎与ASP.NET MVC互斥。但是,它们有两个不同的用途。 ASP.NET MVC为服务器端查询数据,服务器端模型的大量以及服务器端HTML的呈现提供了关注点分离。它还提供了一种很好的方式来支持可能由客户端交互框架利用的JSON或HTML片段(部分视图)的呈现。 AngularJS提供了一个适合为高度交互的页面编写干净的客户端代码的模型。

就个人而言,我认为它们非常有用。

尝试使用jquery + ASP.NET MVC进行高度交互的页面是可行的并且可以高效,但AngularJS为客户端代码的可维护性增加了很多。 ASP.NET MVC为您的服务器端逻辑提供了一个很好的框架。此外,如果您的简单页面符合更传统的PRG模式或只是呈现HTML内容,那么ASP.NET MVC为您提供了一种快速实现这些页面的有效方法,而无需使用Angular所需的不必要的样板代码。换句话说,您可以选择仅在真正受益于它的页面上使用AngularJS。

答案 1 :(得分:1)

你可以将MVC和angularjs混合在一起,完全删除MVC控制器。例如,如果你的应用程序中有5个模块,则创建父路由MVC路由。(例如学生,教师,出勤等...) 最初渲染你的第一个视图说学生视图渲染通过asp.net MVC然后包含该视图上的所有JS文件(包括与该模块相关的状态)(例如students.cshtml) 与此模块相关的.JS文件可能是 studentModule.js,studentController.js,studentService.js等。 在角度JS上执行所有CRUD操作。 在这里,您的studentService将与MVC控制器交互以进行所有数据库操作。 你得到的好处是

  • 您正在异步与服务器进行交互,您可以使用 所有angularjs功能(指令,资源等)
  • 您可以使用asp.net授权所有MVC控制器操作 身份。
  • - 也可以渲染任何html模板状态,你可以从MVC控制器的templateUrl.return csHtml调用你的MVC控制器动作 动作。

使用asp.net mvc和angular js在现场有很多应用程序。这里有一些我知道的东西。你可以查看一些教程以便更好地理解。 。

答案 2 :(得分:0)

Angular和ASP.net都是MVC框架。它们在某种程度上相互矛盾 - 我在一个Angular / ASP.net项目上工作,我们服务和初始ASP.net视图,然后让Angular SPA路由接管,但它有点像我和我有时哪个将两者分开,并使用Angular前端实现了一个简单的WebApi实现。

将AngularJS用于其Http库就像使用锤子锤子一样。你在下载大量未使用的JS时浪费带宽。

如果您对JQuerys实现不满意,我会寻求一个纯JS库来处理您的Http通信。

Axios是其中一个库的一个惊人的例子,它使用像Angular一样的Javascript承诺 - 这使得整个过程非常简洁。

祝你好运!