AngularJS客户端MVC模式?

Pri*_*osK 72 javascript model-view-controller server-side client-side angularjs

到现在为止,我主要是利用Struts 2,Spring,JQuery用于构建Web应用程序技术堆栈.关键是,提到的堆栈使用服务器端MVC模式.Web浏览器的主要作用仅限于请求/响应周期(+客户端验证).数据检索,业务逻辑,布线和验证主要是服务器端的职责.

我对AngularJS框架的几个问题很少受到我读过的以下引文的启发:


来自AngularJS教程:

对于Angular应用程序,我们鼓励使用模型 - 视图 - 控制器(MVC)设计模式来分离代码并分离关注点.

来自维基百科模型 - 视图 - 控制器:

模型 - 视图 - 控制器(MVC)是一种将信息表示与用户与之交互分离的体系结构.该模型由应用程序数据和业务规则组成,控制器调解输入,将其转换为模型或视图的命令


AngularJS使用客户端MVC模式.所以我想没有其他选择那么以某种方式也将验证逻辑包含在客户端?

编写健壮的AngularJS应用程序的最佳方法是什么?客户端的MVC和服务器端的某种MC(型号,控制器)?

这是否意味着,MODEL和CONTROLLER在某种程度上是重复的(客户端/服务器)?

我知道我的问题有些奇怪,但我认为原因是,我在某种程度上习惯了传统的服务器端MVC模式.我确信有人已经完成了相同的过渡.

Roy*_*ove 117

根本不是一个奇怪的问题 - 我一直试图将Angular出售给很多Java开发人员,他们问这个问题.我在学习的时候自己问过(我还在学习,顺便说一句)

如果你按照你所描述的那样采用"传统的"java webapp并对其进行Angular-ize,你必须首先使用你的服务器并使其成为一个RESTful API.删除JSP等.这实际上是IMO编写Angular应用程序的难点 - 让REST API正确.我决定进入服务器需要什么逻辑的关键是把它当作一个纯粹的api而忘记它会有一个前端.

这个问题确实对我有所帮助 - 如果有人试图保存给定资源并且该资源没有有效数据,那么没有前端告诉他们 - 他们直接点击API,因此API需要拒绝它.因此,后端负责深度验证.这也适用于您的业务逻辑.假设有人使用刚刚 API和你的服务器需要做到这一点会变得清晰.

服务器还需要以(可能)json格式(我使用Spring MVC + Jackson)来提供数据,因此它负责将模型公开给Angular,并与数据库进行通信.

那么什么是MVC然后在Angular方面呢?

  • 模型:来自REST API的数据.如果API出售JSON,那么这些对象已经是第一类javascript对象.
  • 查看:HTML和指令,当您需要操作DOM时
  • 控制器 :(以及您从控制器中分解出来的自定义服务..)
    • 查询REST API并在$ scope上放置View所需的内容
    • 为指令提供回调,以响应可能需要调用回服务器的事件.
    • 验证:通常通过回调指令. 可能会有些重叠,你已经把服务器验证的,但你不希望你的用户等待服务器来验证一切-客户应该知道的东西有关验证给用户的即时反馈.
    • 业务逻辑:与验证几乎相同的故事.

但为什么在客户端和服务器中重复逻辑?主要是因为你没有写一个应用程序,你写的是两个独立的东西:

  1. 一个REST API,需要在没有前端的情况下健壮且可用
  2. 需要立即向用户提供反馈而不必等待服务器的GUI.

所以,简短的回答 - 通过忘记将有一个用户界面来获得REST API,进入Angular的内容将更加清晰.

  • 下一代框架解决了客户端和服务器中的逻辑重复问题,请参阅meteor.com (2认同)

Ben*_*esh 13

我认为"商业逻辑"一词在这里有点用词不当.客户端应用程序的"业务"是处理用户界面的业务.它不会像安全规则和专有逻辑或其他敏感知识产权那样.

所以在Angular中,这个部门(通常)是:

  • 控制器(控制器):用于操作UI后面的数据(范围).
  • 指令:用于设置DOM以通过范围与控制器通信,以及操作DOM.
  • 模板(视图):将指令分配给DOM的元素.
  • 范围(model或viewmodel):用于在系统的所有部分之间传输数据.
  • 服务:可注入,可重复使用的代码.通常用于处理Ajax,cookie或其他I/O的依赖项.

它几乎是MVVM而不是MVC.

至于你的"业务"逻辑或规则......任何需要安全性的东西都必须始终在服务器级别得到保护.

  • 上述评论引自AngularJS团队的帖子:https://plus.google.com/app/basic/stream/z13vzzzh2kzuhzoac04cenmhysaottkoxz00k (5认同)

Nik*_*lic 8

重要的是要理解在MVC模式的某些版本中,数据以及操纵数据的逻辑都驻留在"模型"层中("控制器"层除了绑定之外什么都不做).但是,在AngularJS中,数据($ scope)单独驻留在"model"层中,而操作数据的逻辑($ scope)驻留在"controller"层中.

AngularJS