10 Reasons Why You Should Use AngularJS(中文翻译)

原文作者 DMitri Lau 2013年9月5日
假如你还没有尝试过angularjs , 那么你可能不理解人们为什么说js 是世界上最灵活的语言。Angular 是一个框架,她让人不再觉得MVC只是给一直猪涂上红。目前大多数框架只是简单的将已有的哦您根据进行打包封装,他们只是集成工具包,不显得那么优雅。Angular 是下一代的框架,angular的每一个工具的设计都是为了配合其他工具的工作,以下是10条为什么需要使用angularjs的原因。
1. 真正的MVC
大多数框架实现mvc时,要求你将自己的应用按照MVC模块进行分割,然后再使用代码将他们结合在一起,这需要花费很多工作。Angular 实现MVC仅要你将自己的APP按照MVC模块进行分割,然后接下来的工作都交给Angularjs 了。Angularjs 替你管理你的模块,同时提供相应的管道来链接他们。
因为Angularjs 扮演者媒介的作用,开发者不会觉得有兴趣去写组件间的捷径来用来解决抽象,使得他们看起来更简单。

2.一个清晰(陈述性)的用户接口
Angular使用Html 来定义应用的用户界面,Html是一个标记性语言,她更加的直观而且比js定义的用户程序驱动的用户界面更加易懂。而且html编写的界面代码比js编写的界面代码有更强的健壮性,这意味着程序不容易出错。同时,你可以让更多的ui开发人员假如来编写html,而不是难懂的js。
html同时也定义了app的执行,在html中特殊的属性定义了哪个控制器将会被使用在元素中。这些属性定义了什么需要载入而不是怎么载入,这种定义方式极大简化了wysiwyg(你所看见的就是你所获取到的)的应用开发方式,你只要简单的定义你想要什么然后angular就会帮你管理这些依赖关系,而不用花费时间在程序执行流或者什么需要优先载入等。

3.数据模式是简单的js对象(pojo plain old javascript objects)
Angularjs 的数据模型是pojo,不需要额外不必要的getter 和 setter方法。你可以直接添加或者更改对象的属性,同时可以更具自己的兴趣来遍历对象和数组。你的代码将会看起来更加的清晰和直观。
传统的数据模型只是数据的守门员(这个应该是数据过滤器的意思)负责数据的持久化和服务器同,。这些数据模型的行为像聪明的数据提供者。但是,由于angular的数据模型是简单对象,他们的行为更像一个软木塞,一个cork board就是一个临时提供给人们存储和取回数据的零时存储区。然而,angular 的cork boards和controller和view紧密一起工作。为了和传统的数据模型进行区别,angular称她为scope。
所有在scope对象上的属性都能自动的绑定到angular的view中,这意味着angularjs 会自己默默的监听这些属性值的变化,根据属性值的变化自动更新视图。
scope没有初始化数据同时依赖于控制器根据业务需求将数据填充到scope中去。

4.指令行为(behavior with directives)
指令是angular给html带来额外函数的途径,想象一下html有那么多丰富多彩的元素,可是我们没有办法去手动定制dom去模拟他们,我们能做的只能是通过给以后的元素添加属性然后给相应的元素绑定函数功能。
指令器允许我们创造自己的html 元素,通过将所有的dom操作代码放入directive中,我们就可以将他们从我们的mvc框架应用中分割出来,这样允许我们mvc应用只要关心根据数据来更新自己的视图,之后视图有什么行为只和指令器有关了。

指令形式和传统html元素一样
<myticker>  </myticker>
传统的属性模式
<div data-mytricker>    </div>
传统类名模式
<div class="mytricker"></div>
允许像正常的html元素一样使用它们
指令器是为了实习重用某个元素,这个元素应该可以从你的app中直接分割出来(这个理解,说明我在快读课程中指令器的耦合度太高!)。事实上,假如一个特殊的元素已经被html5标准所接受的话,假如你移除他不会影响你的应用。
记住,作为拇指的角色!你的controller控制器不要直接操作dom结构,所有的dom操作都用过放在directive中!

5.灵活的过滤器
过滤器在数据到达页面之前对数据进行过滤,可以对数据进行格式化,翻转数组,基于数据的参数进行处理,或者实现分页等。过滤器设计理念也是也是单独的工具函数,和app无关,类似于directive,但是过滤器之和数据转化相关。
过滤器十分的足智多谋,使不使用js代码来构建一个排好序的html表格成为可能(这个还真没有试过额!)

6.写更少的代码
所有的重点指导现在,都告诉你写更少的代码(也就是代码的复用率更高了!)。你不比自己编写MVC管道,视图(view)通过html进行定义,这样更加简洁!数据模型只是简单的可写,没有使用getters或者setter。数据绑定意味着你不需要手动的在页面中加入数据,由于指令器(directive)是可以和应用分开的,这样就可以通过抽象出最小集,进行各个项目间的复用!过滤器允许你在视图(view)上操作数据却不用使用控制器(controller )。

7.dom 在属于他们的地方进行操作(DOM manipulations where they belong)
传统上,视图(view)修改dom来展示数据或者进行事件绑定等行为操作,在angular中,dom操作的代码需要在指令器中而不是在视图中。angular只是将视图(view)看成另一个html页面对数据进行占位的,这种对视图的方式有利用用户界面设计师的操作。
通过将dom操作和jquery调用进行分离出来,视图界面设计师就可以全身心的关注界面设计而不用管其他的东西。
将你的MVC应用仅仅是将数据导入视图中( By making your MVC app purely about presenting business data into views,  )不用关系dom结构的操作,网页应用开发瞬间变得更加有趣。

8.服务提供者(  Service providers where they belong
angular 中的控制器只有一个功能,那就是操作scope,例如:你可以使用它将来着服务器或者其他实现业务逻辑地方的数据存入到scope中,不像其他的框架,控制器不是一个对象(object)也没有继承自任何地方。
当控制器如此的简单的时候,那么繁重的任务需要谁来操作,angular 引入了services来解决这个。服务器做的就和她的名称一样,她不参与你的MVC应用,只是简单的提供外围的API来导入任何你想导入的东西,多数情况下它是用来与服务器同步来保持离线数据的存储、提供方法来完成数据向服务器的推送和拉取。或者他可以用来创建多个controller共享数据的资源。(这个就是service的功能?)
services被设计为单独的对象不依赖于你的应用,使得你的控制器可以保持简洁的同时可以分配给视图和scope你需要分配的内容。当然,实现services不是必须的,而且她也可以用来实现一些轻量级的应用来避免你的controller国语复杂。

9.情境感知的通信(context aware communication)(其实就是消息机制)
一个信息分发系统是一个运行减少对话的良好的通用工具,大多数基于web实现的的pubsub(订阅发布)不是情境感知的,有时你想要(订阅发布)信息只能在某个特殊节点中刻度或者被某个特殊节点的祖先节点可读,换句话说你不希望不相关的MVC组件能够读到你的信息。
(订阅发布系统)在angular十分方便,.broadcast()将会将信息发布给他所有的子controller(控制器),emit()将会将信息冒泡给所有的祖先。
但是(pubsub)订阅发布不实唯一一种controller间通信方式。事实上,假如你所要做的只是当属性变化告诉其他控制器更新他们的视图,你应该使用数据绑定。我们已经知道数据可以绑定当前controller上的数据属性,但是我还没有告诉你scope从他们的父scope继承属性,当一个子scope更改时,他会影响所有继承子同一个父scope的属性从而造成数据的更改。这种自动化方式,比消息机制好用。

10.准备单元测试(或者说可以进行单元测试!)

没有介绍angular的单元测试,那就不算完整的介绍了angularjs。整个angular通过数据依赖链接在一起(Dependency Injection),通过使用它来管理控制器(controller)和scope。因为你所有的控制器都是通过DI数据依赖来传递数据,angular的单元测试可以通过DI来实现单元测试,通过注入模拟数据到你的控制器中然后检查输出和行为。事实上,angular已经有一个模拟http的提供者(provider)来注入假的服务器返回给控制器。
angular的单元测试完全改变了原来测试web app的方式,原来通过创建一个独立的测试页面来查看各个组件是否正常工作的时代已经过去。

这十条理由告诉你angular为什么这么powerful,不是所有的网页应用都需要使用angular。比如,假如你需要写一个网页游戏或者计算量比较大的数学程序,这就完全没有历史使用angular。当时对于通用的web应用,她可以当做通用框架来快速构建网站。




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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值