jQuery开发者眼中的AngularJS

文章来源:http://blog.jobbole.com/76265/

AngualrJS是一个很贴心的web应用框架。它有很不错的官方文档和示例;经过在现实环境中的测试著名的TodoMVC project,它在海量的框架中脱颖而出;而且网上到处都是很不错演示或者展示。但是对于一个没有接触过和AngularJS相似的框架而且还是几乎都在使用像jQuery这样的JavaScript类库的开发者来讲,要从jQuery的思想转变成AngularJS的思想是有点困难的。至少对于我来说是这样的,所以我想要分享一些学习笔记希望帮到一些开发者。

Ng不是一个库(library)

要理解AngularJS,第一件要做得事情就是要明白这是一个根本上就和jQuery不一样的工具。jQuery是一个库而AngularJS是一个框架。使用库是指,你的代码决定什么时候从库中调用一个特定的方法;使用框架则是,你实现了一些回调方法,到了特定的时候框架会去调用这些方法。

当你思考下在runtime的时候会发生什么以后你就可以理解这个不同点了。jQuery在与runtime的时候会发生什么?大部分情况下,什么时候都不会发生。jQuery代码的执行是作为触发了DOM事件上绑定的jQuery方法的响应。

在加载的时候,Angular会将你的DOM树和JavaScript转向一个angular app。包含着Angular指令和过滤器的HTML会被编译成一个视图树,响应的范围和控制器会被附加上这个树上,内部的应用循环确保了视图和模型之间的数据绑定。这是一个真正的MVC例子,视图控制器和模型之间是被彻底分离了。你可以认为主要的事件/渲染/绑定循环是一个例子,它持续在运行,只有在需要的时候才调用你的控制器。

每次模型被更新(可以是通过AJAX请求,也可以是直接操作控制器),Angular会重新运行它的$digest循环,更新数据绑定确保所有东西都是同步的。

是声明,而不是命令

不像有些库或者框架,Angualr从不把HTML或者JS当作一个需要修复的bug(我正看着你呢),而是用一个自然的方式让你都不能相信自己并没有在思考。这一点还是让我用代码告诉你吧。

举个例子,我们想要根据checkbox的状态隐藏/显示某一个元素。用jQuery,我们会这么做:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<div>

   <input id="toggleShowHide" type="checkbox"><div id=”specialParagraph”>

   This content will disappear and reappear if you click the checkbox above

</div>

<script>

   $(function() {

        function toggle() {

           var isChecked = $(‘#toggleShowHide‘).is(‘:checked‘);

           var specialParagraph = $(‘#specialParagraph‘);

           if (isChecked) {

               specialParagraph.show();

           } else {

               specialParagraph.hide();

           }

       }

       $(‘#toggleShowHide‘).change(function() {

           toggle();

       });

       toggle();

   });

</script>

注意!以上的JS代码是用一种命令的方式操作DOM:拿到某一个节点和某一个属性,查看它的值,然后做这做那。现在来看看Angular是怎么做相同的事情的:


1

2

3

4

<input ng-model="showSpecial" type="checkbox">

<div ng-show=”showSpecial”>

   This content will disappear and reappear if you click the checkbox above

</div>

就是上面那段,根本没有什么代码,只是一个非常清楚的声明绑定和规则的方式。这里有个线上版本,你可以来试试.

DOM的直接操作不仅是不必要的,它在Angular中是不被提倡的。DOM由视图管理,data在scope中,方法在控制器里,任何non-trivial的变换在你重写的过滤器和指令里。这样的分离在一开始看上去是要花大量精力去消化,但是当项目变大的时候,它的回报是很可观的:代码容易维护,容易被放入模块中,方便测试和查错。

依赖注入

原谅我这么说听起来有点固执了,但是Angular拥有全世界最优雅的处理数据依赖的方式。你有一个JSON的数据源被放在$resource在Angular中:


1

DataSource = $resource(url, default_params, method_details)

如果要知道更多细节请看文档。任何需要这个JSON数据的控制器,可以通过将DataSource作为一个控制器参数传入的方式来使用它。这就是你需要做的全部事情。如果你需要在控制器中写一个异步的HTTP请求。将$http作为一个控制器参数。如果你需要在console中打印什么,将$log作为你的控制器方法的参数。

在Angular内部的流程是这样的:Angular分析你的代码,找到这些参数,然后将你的代码中所需要的服务推送给你。

数据获取

当Angular给了你控制模型层的全部自由以后(你可以随意结合普通数据变量,对象,和数组的时候)。它提供了一个便捷的方式与服务器的REST API交互。举个例子,下面这个方式是用来定义和使用一些来检索和保存用户记录的调用的。


1

2

3

4

5

var User = $resource(‘/user/:userId‘, {userId:‘@id‘});

var user = User.get({userId:123}, function() {

   user.abc = true;

   user.$save();

});

Angular给获取,设置,删除和查询数据都预定义了合理的默认值设置,用参数表示的URL让你可以根据需求来制定数据获取的方式。

Angular还有很多值得一提但这篇文章还没有说的东西,比如表单验证,单元测试还有angular-ui库,也许在以后的文章里我会说一说的。

时间: 2024-08-24 13:03:01

jQuery开发者眼中的AngularJS的相关文章

转载:开发者眼中最好的 22 款 GUI 测试工具

对于很多同学来说gui程序的测试是一个难点,所以我从网上转载了一篇关于gui测试的一篇文章,里面罗列的很多工具,大家可以尝试一下学习学习. 英文原文:22 best GUI testing tools for developer 译文来自:开发者眼中最好的22款GUI测试工具 1.Abbot - Java GUI 测试框架 Abbot是一个基于GUI的简单的Java测试框架,它能够帮助开发者测试Java用户界面. 它提供事件自动生成和验证Java GUI组件,使您能够轻松地启动,探索和控制应用程

向产品宣战——开发者眼中的Android UI Design

向产品宣战--开发者眼中的Android UI Design 准备了半个月,思考产品设计.交互设计,见证了公司的产品.UE和开发的撕逼,将自己的思考.感悟,整理成下文,谨代表广大程序猿,向设计狮.产品X开战.希望广大程序猿能够坚持贯彻Google的Material Design,切实认真负责的执行Android的设计思想,将MD设计带到产品中去,不做中国特色的App,将Android的开发风气带到正轨,树立正确的开发观.设计观. 希望广大程序猿朋友在博客后面留言.签名,规范Android设计.树

移动端开发者眼中的前端开发流程变迁与前后端分离

写在最开始 移动端与前端的区别 前端开发的混沌时代 后端 MVC MVC 方案实现 MVC 的缺点与改进 前端只写 Demo HTML 模板 后端 MVC 架构总结 AJAX 与前端 MVC 前后端分离的缺点 双端 MVC 不统一 SEO 性能不够 集中 Or 分离 Nodejs 前后端分离的哲学 Nodejs 分层 实战应用 风险控制 总结 参考资料 写在最开始 这是一篇面向移动端开发者的科普性文章,从前端开发的最初流程开始,结合示范代码,讨论开发流程的演变过程,希望能覆盖一部分前端开发技术栈

开发者眼中的Spring与Java EE

本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/07/spring-javaee 在Java社区中,Spring与Java EE之争是个永恒的话题.在这场争论中,来自两个阵营的布道师.架构师与铁杆粉丝都在不遗余力地捍卫着本方的尊严,并试图说服对方加入到自己的阵营当中,但结果却是双方都很难说服对方,每一方都有充分的理由表明自己的选择是正确的.参与到这场争论的有一些架构师,他们负责着平台的选择.那么对于普通开发者来说该如何思考

一个ZFS开发者眼中的苹果最新文件存储系统APFS

前言: 本文翻译自曾参与ZFS文件系统开发.现Delphix公司CTO,阿达姆 莱文索(Adam Leventhal),的一片博客文章:APFS详解(APFS in Detail). APFS文件系统是苹果公司准备2017年正式推出的继HFS+之后最新的文件系统,据现有公开资料显示,这个文件系统具备当代其它文件管理系统所具备的诸多先进功能,它将是统一所有苹果产品生态系统的唯一文件系统,可见它是苹果未来十数年最为重要的一个技术更新.(参考>1) ZFS文件系统是广为业界知晓的当代先进文件系统之一,

10个web前端jQuery开发者必备的源码组件

1.Conditioniz – 探测浏览器并条件加载 JavaScript 和 CSS Conditioniz 是一个快速.轻量级(3KB)的 JavaScript 工具,用于探测浏览器和分辨率并条件加载 JavaScript 和 CSS 文件.Conditioniz 从它的 jQuery 前身重建,现在速度要快50%.结合类名添加和 Conditionizr 集成的脚本和样式加载功能,允许你为不同的浏览器指定想加载的脚本和样式.浏览器嗅探通常被认为是不可靠的,Conditionizr 的建立就

开发者眼中最好的 22 款 GUI 测试工具

1.Abbot - Java GUI 测试框架 Abbot是一个基于GUI的简单的Java测试框架,它能够帮助开发者测试Java用户界面. 它提供事件自动生成和验证Java GUI组件,使您能够轻松地启动,探索和控制应用程序.开发者可通过脚本和编译代码两种方式来使用Abbot框架,这就是为什么它被认为是在开发者的系统 测试和QA的功能测试中都能用到的最完美的GUI测试工具. 2.EggPlant - GUI自动化测试工具 EggPlant 是一个QA的GUI自动化测试工具,它是为使专业商业软件的

【转载】开发者眼中的Spring与Java EE

转载自:http://www.infoq.com/cn/news/2015/07/spring-javaee 在Java社区中,Spring与Java EE之争是个永恒的话题.在这场争论中,来自两个阵营的布道师.架构师与铁杆粉丝都在不遗余力地捍卫着本方的尊严,并试图说服对方加入到自己的阵营当中,但结果却是双方都很难说服对方,每一方都有充分的理由表明自己的选择是正确的.参与到这场争论的有一些架构师,他们负责着平台的选择.那么对于普通开发者来说该如何思考这场旷日持久的Spring与Java EE之争

游戏开发者眼中的Unity 3D网页游戏测评报告

目前,能够实现3D页游的主流技术有Silverlight.XNA.Flash.HTML5和Unity3D.其中,Unity3D作为一款专注于3D游戏的浏览器插件,近期在国内外页游产品线骚动异常:本人从多方收集到可注册的Unity3D页游测试发现,当下的Unity3D技术应用尤其在国内正遭遇着尴尬而无奈的窘迫境地,原因为何?大伙不妨先看看其中7款游戏测试数据: <骑士的远征>(国产) 类型:SLG 模型与场景环境:低 性能:一般 下载体验:动态加载UI和模型动画,但很卡,耗时久 操作:典型的保姆