angularjs使用_为什么要使用AngularJS的10个理由

angularjs使用

如果您还没有尝试过Angular,那么您会错过为什么人们说JavaScript是世界上最灵活的语言的原因。

Angular是唯一不会使MVC看起来像在猪上涂口红的框架。

如今,大多数框架只是现有工具的捆绑。 它们是一个集成的工具集,但不是很优雅。 Angular是下一代框架,在该框架中,每个工具都设计为可以相互联系的方式与其他工具一起使用。

这是您今天应该使用Angular的10个原因。

1. MVC做对了

大多数框架通过要求您将应用程序拆分为MVC组件,然后要求您编写代码以将它们再次串在一起来实现MVC。 这是很多工作。 Angular通过要求您将应用程序拆分为MVC组件来实现MVC,然后让Angular完成其余工作。 Angular可以为您管理组件,也可以用作连接它们的管道。

由于Angular充当中介者,因此开发人员也不会试图在破坏抽象的组件之间编写快捷方式,以使它们更容易适应。

2.声明性用户界面。

Angular使用HTML定义应用程序的用户界面。 HTML是一种声明性语言,比在JavaScript中以程序方式定义接口更直观,更容易混淆。 与用JavaScript编写的接口相比,HTML的重组也较不易碎,这意味着发生问题的可能性较小。 另外,当视图以HTML编写时,您可以引入更多的UI开发人员。

HTML还用于确定应用程序的执行。 HTML中的特殊属性确定每个元素要使用哪个控制器。 这些属性确定“加载了什么”,而不确定“如何加载”。 这种声明性方法以一种所见即所得(所见即所得)的方式极大地简化了应用程序的开发。 您无需花时间在程序的运行方式上以及应该首先加载的内容上,而是只需定义所需的内容,Angular就会处理依赖项。

3.数据模型是POJO

Angular中的数据模型是普通的旧JavaScript对象(PO​​JO),不需要多余的getter和setter函数。 您可以直接在其上添加和更改属性,并可以随意遍历对象和数组。 您的代码看起来会更加自然直观,更加简洁直观。

传统的数据模型是数据的守门员,负责数据持久性和服务器同步。 这些数据模型的行为类似于智能数据提供者。 但是由于Angular的数据模型是普通对象,因此它们的行为更像是软木板。 软木板仅是人们放置和检索数据的临时存储区域。 但是,Angular的软木板与控制器和视图紧密配合。 为了将其与传统的数据模型概念区分开来,Angular称它们为“范围”。

范围对象上找到的所有属性均由Angular自动绑定到视图。 这意味着,Angular会静静地监视这些属性的更改并自动更新视图。

作用域没有任何数据开始,而是依赖于控制器根据业务逻辑需求向其提供数据。

4.指令行为

指令是Angular将其他功能引入HTML的方式。 想象一下一个世界,其中HTML具有如此丰富的元素(例如<accordion></accordion><grid></grid><lightbox></lightbox>等),我们再也不必操纵DOM进行模拟了他们。 我们的应用程序需要做的就是将属性分配给元素,以实现任何功能。

指令通过使我们能够发明自己HTML元素来实现这一目标。 通过将所有DOM操作代码放入指令中,我们可以将它们与MVC应用程序分开。 这样一来,我们的MVC应用就可以只关注用新数据更新视图。 视图随后的行为方式取决于指令。

指令以自定义HTML元素的形式出现

<myticker></myticker>

自定义属性

<div data-myticker></div>

和自定义类名称

<div class="myticker"></div>

允许它们像常规HTML元素一样使用。

指令设计为独立于您的应用程序的可重用元素。 实际上,如果某个特定元素被HTML5标准采用,则它就像删除您的自定义指令一样简单,并且您的应用程序的行为应完全相同,而无需更改您的应用程序。

免费学习PHP!

全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

请记住,根据经验,您的控制器不应直接操作DOM。 所有DOM操作均应通过指令执行。

5.过滤器的灵活性

过滤器会在数据到达视图之前对其进行过滤,并且可能涉及一些简单的事情,例如格式化数字的小数位,反转数组的顺序,基于参数过滤数组或实现分页。 过滤器被设计为独立于应用程序的独立功能,类似于指令,但仅与数据转换有关。

过滤器资源丰富,可以仅使用过滤器来创建可排序HTML表,而无需编写任何JavaScript。

6.写更少的代码

到目前为止,所有要点都意味着您可以减少编写代码。 您不必编写自己的MVC管道。 视图是使用HTML定义的,这更加简洁。 没有getter / setter的数据模型更易于编写。 数据绑定意味着您不必手动将数据放入视图中。 由于指令与应用程序代码是分开的,因此它们可以由另一个团队并行编写,而集成问题最少。 过滤器使您可以在视图级别上操作数据,而无需更改控制器。 是的,这只是一个要点,但是编写更少的代码很重要!

7. DOM操作所属的地方

传统上,视图会修改DOM来显示数据并操纵DOM(或调用jQuery)以添加行为。 对于Angular,DOM操作代码应位于指令内部,而不应位于视图中。 Angular将视图视为具有占位符的另一个HTML页面。 这种查看视图的方法与用户界面设计人员很好地配对。

通过抽象出DOM操作和jQuery调用,用户界面设计人员可以专注于视图而不会产生干扰。

通过使您的MVC应用纯粹是将业务数据呈现到视图中,而不必担心操纵DOM,Web应用开发突然变得更加有趣。

8.他们所属的服务提供商

Angular中的控制器是简单的功能,仅具有一项工作,即操纵范围。 例如,您可以使用它来将数据从服务器预填充到作用域中,或实施业务逻辑验证。 与其他框架不同,控制器不是对象,也不继承任何东西。

如果控制器是如此简单,那么应该在哪里执行所有繁重的工作? Angular为此引入了Services。

服务就是他们听起来的样子。 他们不参与应用程序的MVC,而只是提供一个向外的API来公开您想要公开的任何内容。 在大多数情况下,它会同步到服务器以维护脱机数据存储,并公开将数据推入和拉出服务器的方法。 或者它可以用来创建资源共享服务,该服务允许多个控制器共享相同的资源。

服务被设计为独立于您的应用程序的独立对象,并允许您的控制器保持精简并专用于分配给它的视图和范围。 当然,不需要实现服务,并且在控制器内部进行一些轻巧的举动以避免过度复杂是完全可以接受的。

9.情境感知交流

PubSub系统是一种非常常见的工具,可以实现去耦通信。 网络上的大多数PubSub实现都不支持上下文。 有时,您希望PubSub消息仅可由特定节点的子级读取,或仅可由特定子级的祖先读取。 换句话说,有时您不希望无关的MVC组件读取您的消息。

Angular中的PubSub系统正是这样。 broadcast()将向所有子控制器发送一条消息,而emit()将向所有祖先发送一条消息。

但是PubSub不是控制器之间进行通信的唯一方法。 实际上,如果您要做的只是告诉其他控制器在属性更改时更新其视图,那么您应该依靠数据绑定。 我们已经知道,视图可以绑定到当前作用域上的属性。 但是我没有告诉您的是,作用域继承了其父作用域的属性。 这意味着,如果父级作用域上存在一个属性,而子级作用域对其进行了修改,则从同一父级继承的所有其他作用域也将看到相同的修改,并且它们的视图将由Angular自动更新! 这种自动化方式随时都可以使用PubSub来完成。

10.单元测试准备就绪

如果不谈论Angular的单元测试准备情况,对Angular的描述是完整的吗? 整个Angular通过依赖注入(DI)链接在一起。 它就是用来管理控制器和范围的工具。 由于您的所有控制器都依赖DI传递信息,因此Angular的单元测试可以通过将模拟数据注入到控制器中并测量输出和行为来篡改DI来执行单元测试。 实际上,Angular已经有一个模拟HTTP提供程序,可以将虚假的服务器响应注入到控制器中。

通过创建单独的测试页面来调用一个组件,然后与之交互以查看其是否有效,从而击败了测试Web应用程序的更传统的方式。

这10个原因应该使您了解Angular为何如此强大。 并非所有的Web应用程序都应使用Angular。 例如,如果您正在编写游戏或需要大量计算的数学程序,则Angular没有理由适合您的特定问题领域。 但是对于通用Web应用程序,它应该作为可行的框架来构建。

http://www.angularjs.org/

本文的评论已关闭。 有关于Angularjs的问题吗? 为什么不在我们的论坛上提问呢?

翻译自: https://www.sitepoint.com/10-reasons-use-angularjs/

angularjs使用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值