AngularJS客户端MVC模式?

到目前为止,我主要使用Struts 2SpringJQuery技术堆栈来构buildWeb应用程序。 重点是,提到的堆栈使用服务器端MVC模式。 Web浏览器的主要作用仅限于请求/响应周期(+客户端validation)。 数据检索,业务逻辑,接线和validation主要是服务器端的责任。

我有几个关于AngularJS框架的问题,这些问题受到我读过的引用的启发:


AngularJS教程

对于Angular应用程序,我们鼓励使用模型 – 视图 – 控制器(MVC)devise模式来解耦代码并分离关注点。

维基百科模型视图控制器

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


AngularJS使用客户端MVC模式。 所以我想没有其他的select,然后在客户端以某种方式包含validation逻辑?

编写一个强大的AngularJS应用程序的最佳方法是什么? 客户端的MVC和服务器端的一些MC(模型,控制器)?

这是否意味着MODEL和CONTROLLER是单向复制的(客户机/服务器)?

我知道我的问题有点奇怪,但我认为原因是,我习惯了传统的服务器端MVC模式。 我确定有人已经做了同样的转变。

根本不是一个奇怪的问题 – 我一直在试图把Angular卖给很多java开发者,他们问这个问题。 我在学习的时候问自己(我还在学习,顺便说一句)

如果您按照前面描述的那样使用“常规”的Java Web应用程序并对其进行angular度化,则必须首先将服务器作为RESTful API。 删除JSP等等。实际上,编写一个Angular应用程序是很困难的一部分 – 获取REST API的权利。 确定进入服务器所需的逻辑的关键在于将其视为一种纯粹的API,并暂时忘记它将有一个前端

这个问题真的帮助了我 – 如果有人试图保存一个给定的资源,而且这个资源没有有效的数据,那么就没有前端告诉他们 – 他们直接点击API,所以API需要拒绝它。 所以后端负责深度validation。 这也适用于您的业务逻辑。 假设有人正在使用这个API,它将变得清楚你的服务器需要做什么。

服务器还需要以(可能)json格式(我使用Spring MVC + Jackson)销售数据,所以它负责将模型暴露给Angular,并与数据库进行通信。

那么在angular度上MVC是什么?

  • 模型 :来自REST API的数据。 如果API是自动销售JSON,那么这些对象将已经是第一类javascript对象。
  • 查看 :HTML和指令,当你需要操纵的DOM
  • 控制器 :(和你从控制器中分解出来的定制服务)
    • 查询REST API,并在$ scope上放置View的必要条件
    • 为指令提供callback以响应可能需要调用回服务器的事件。
    • validation:通常通过callback指令。 可能会重叠已经放入服务器的一些validation ,但不希望用户等待服务器validation所有内容 – 客户端应该知道validation的一些信息,以便为用户提供即时反馈。
    • 业务逻辑:几乎和validation一样。

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

  1. 一个REST API需要强大而且没有前端才能使用
  2. 一个graphics用户界面需要立即反馈给用户,而不一定等待服务器。

所以,简短的回答 – 通过忘记将会有一个用户界面来获得REST API,而Angular将会更加清晰。

我认为“商业逻辑”这个词在这里有点用词不当。 客户端应用程序的“业务”是处理用户界面的业务。 这不会是像安全规则和专有逻辑或其他敏感的知识产权的东西。

所以在Angular中,这个部门是(一般):

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

这几乎是MVVM而不是MVC。

至于你的“商业”逻辑或规则……任何需要安全的东西都必须始终在服务器级别进行保护。

理解在MVC模式的某些版本中, 数据以及操作数据的逻辑都位于“模型”层(“控制器”层除了绑定之外什么也不做)是很重要的。 然而,在AngularJS中,数据($ scope)单独驻留在“模型”层中,而操纵数据的逻辑($ scope)驻留在“控制器”层中。

AngularJS“MVC”

我很喜欢@Roy TrueLove说的。 但是让我说,这是使用angularjs的最终方式。 当然,如果你想获得angular度最大的好处,你必须学会​​这样做你的应用程序。 我祈祷有一天会在那里。

与此同时,在你学习的时候,在你充分利用angularjs作为你的客户端主要做事方式的过渡期间,你可以开始用它来做一些小任务,逐渐习惯它,思维。

我鼓励逐渐拥抱它,慢慢地走,但是当然,我保证,肯定。

Angularjs旨在为这种方法提供服务,因为它可以在最小的任务上工作,而且可以做到最大的任务。 例如,这是我第一次使用angular是只显示名称,而用户input的ID。

我同意这里的答案。 还有一些意见。 当你写一个应用程序,你首先需要专注于问题领域。 并创build一些真正的业务的软件模型。 例如,如果您的问题域是购物,您需要build模的一些要求可能包括:

  • 信用卡应该是有效的。
  • 如果您使用X品牌的信用卡付款,您将获得10%的折扣。
  • 商店的购物车应至less包含一个项目来执行结帐
  • 在允许用户将商品添加到商店购物车之前,商品必须有库存

这些要求的执行将模拟您的问题域,这是您的业务逻辑。

Angular是一个前端框架和工具包。 这是一个networking前端。 如果你在一个web前端实现这个function,你将会错过从其他前端或者界面重用你的模型的机会,比如移动或者桌面应用。 因此,理想情况下,您的业务逻辑实现需要与任何用户界面框架分离,并与任何持久框架分离。 然后,您将拥有将处理用户界面问题的界面对象,并将与您的业务逻辑对象交stream。 这可以是Spring MVC控制器和/或Angular控制器或服务。

有一个示例应用程序,你可以看看,遵循这里提到的原则。

我似乎也有这个问题,因为有些组织只是热衷于新技术 – “我希望云…等待,我想要轻量级”,它很难certificate是否值得转换到一个较轻的框架。

我一直在使用Spring / JBoss seam / JSF和MVC框架开发Web应用程序。 大多数情况下,Java脚本将驻留在表示层validation中,主要操作类/实体和业务逻辑将驻留在Java代码中。 在Angular上进行了一些基本的实践之后,我开始了解MVC的含义,因为他们在表示层抽象了另一个层次,我们可以在前端拥有自己的视图和控制器。 要回答你的问题,就像每个人的评论一样,最好的方法是把它放在表示层。

就安全angular度而言,我认为重度或敏感的业务规则应该驻留在服务器端,因为我们不想将其暴露给世界。 如果业务逻辑开发得不好,可以很容易地find我们的代码的弱点,并利用它。

这里是我对像Angular这样的框架的思考,就像一个小店/ SOHO处理客户,他们有几个人,真正高效和快速。他们满足面向业务和交付/客户高效接收(REST,JSON)的客户。 他们确实有指定的angular色和任务,但是一些工作者执行的不止是一项任务。 这家商店也很容易受到小偷或强盗的伤害,因为他们通常不会强调重重的安全。

对于像Spring / Struts 2这样的服务器端框架,设想一个具有不同pipe理级别,能够处理更大业务(批量作业,Web服务,企业总线)的现代公司(CMM Level 5)。 他们处理客户,但不直接,经常经过经纪人,甚至零售店。 安全明智的一个公司是更强大的,往往在前门证券,或重要的信息保护在一个安全的(encryption/login)。

我的方法始终是自下而上的方法。 从数据库devise开始,使用正确构造的/相关的表,存储过程(如果需要的话),然后将entity framework添加到解决scheme或使用ADO.Net(如果EF不是选项)。 然后开发业务逻辑和模型来获取数据进出数据库。

随着模型的build立,我们现在可以走两条路线:开发MVC控制器,和/或开发WebAPI控制器。 两个控制器都可以访问模型,只是实例化类和调用方法。

您现在可以select设置由MVC控制器控制的MVC视图,或者完全独立的一组HTML页面或SPA(NodeJS上托pipe的单页面应用程序)。

使用完全独立的一组HTML页面,您将需要使用带有Get,Post,Put和Delete方法的WebAPI控制器,并且确保来回包含令牌以识别您的客户端,并启用CORS(用于跨源请求)

使用MVC视图,您可以使用控制器属性和/或会话来识别客户端,无需担心CORS,甚至可以根据需要使用强制键入的视图。 不幸的是,如果你有一组UI开发人员,他们将不得不使用相同的MVC解决scheme。

在这两种情况下,您都可以使用AngularJS来回传输数据到控制器。

恕我直言AngularJS控制器的概念是不一样的C#MVC或C#WebAPI控制器。 AngularJS控制器包含了所有的javascript逻辑以及通过“ApiFactory”调用端点的function,而C#控制器只是服务器端接受和响应UI请求的端点。