对angular.js的一点理解
2015-01-14 13:18 by MrGeorgeZhao, 317 阅读, 4 评论, 收藏, 编辑
最近一直在学习angular.js。不得不说和jquery相比有很大不同,有很多的不同点,之前也用过Knockout.js 但是两者还是有一定的区别的,首先knockout.js是基于Mvvm的,是几乎纯粹的dom 绑定没有一个架构一样的东西。而angular.js 则有dom 绑定还有mvc 架构的支持。
一 angular.js 和以前的js 框架有的区别:
1 传统的前端开发思维:
以jquery 为例,它是以dom 为中心的,是dom 元素的操作,更多的是关注dom 的变化和用户的操作。
2 新一代的前端开发思维
以angular.js 为例,它是以data 为中心的,关心的是数据的变化。
比如如果要实现一个三级联动的下拉框:
jquery 的实现是:
1 分别监听省市县的下拉框的change 事件。
2 在事件中,根据当前的值来实现下级的联动。
3 查询符合上级的下级数据。
4 如此循环 更新下级的下级。
代码量估计得有一百行左右吧。
angular.js 的实现是:
1 定义上级的数据源和model。
2 定义下级的数据源的model。
3 定义下下级的数据源和model。
4 在$watch 中更新model 即可。
代码量 十行搞定。
再比如要实现一个表格(分页,排序,过滤,编辑):
jquery 的实现思路 :
1 获取数值。
2 根据返回的值,来进行dom 的操作。
3 动态生成一些控件,然后绑定控件的事件。
4 在事件里面再进行dom 的操作以及数据的交互。
这个代码量应该也不少。
angular.js 实现思路:
1 ngRepeat渲染
2 filter过滤器过滤
3 orderBy排序
4 paging分页
代码量几十行左右。
如果写惯了jquery 代码的话再写angualr.js 的话会有一点不适应。但是熟悉之后会感觉非常的爽。angular.js 除了Directive之外其他地方绝对不能使用dom 操作,切记。
二 理解angular.js 框架
如图所示为 angular.js 启动过程:
1 浏览器载入HTML,解析成DOM。
2 加载Angular类库。
3 DOMContentLoaded事件中开始bootstrap。
4 寻找 ng-app, 注入服务。
5 编译DOM并链接到对于的scope数据。
angular.js 执行过程:
1 浏览器等待用户事件触发(用户交互,定时器,网络事件)。
2 浏览器执行事件回调,进入Javascript上下文。
3 Angular在$apply中接管了JS的执行部分。
4 Angular进入$digest循环。
5 Angular进行脏数据检查。
6 批量更新DOM,$digest结束。
7 浏览器开始渲染。
以如下代码为例 :
1 <div ng-app="mymodule">
2 <div ng-controller="mycontroller">
3 <input ng-model="name"/>
4 <p>{{name}}</p>
5 </div>
6 </div>
7
8 <script src="~/Scripts/angular.min.js"></script>
9 <script type="text/javascript">
10
11 var mymodule = angular.module('mymodule', []);
12
13 mymodule.controller('mycontroller', function ($scope) {
14
15 $scope.name = "hello angular";
16
17 });
18
19 </script>
编译期
1 解析ng-model并为input绑定key事件。
2 为{{name}}建立$watch表达式,进行监听。
执行期
1 用户在input输入按键,触发了浏览器的key事件。
2 事件回调, 进入Javascript上下文。
3 angular接管,在$apply中修改scope的name取值。
4 触发$digest流程。
5 脏数据检测,发现$watch列表中的name值变更。
6 通知对应的处理函数, 更新DOM。
7 Angular退出执行上下文,退出Javascript的事件处理函数。
angular.js 的学习是一个长期的过程,光学理论还是不够的,重要的是实践。多看,多写。
angular.js的一点理解的更多相关文章
-
对angular.js的一点理解
最近一直在学习angular.js.不得不说和jquery相比有很大不同,有很多的不同点,之前也用过Knockout.js 但是两者还是有一定的区别的,首先knockout.js是基于Mvvm的,是几 ...
-
angular js module 的理解
module其实就是一个容器,里面可以装controller,service,directive,filter等, 官网的解释是:Module :A container for the differe ...
-
angular js的Inline Array Annotation的理解
inline Array annotation的形式是: someModule.controller('MyController', ['$scope', 'greeter', function($s ...
-
angular js jquery中post请求的一点小区别
这也是最近遇到的坑,还是之前那个项目,现在要实现登录功能. 背景:注册功能之前已经跑通了.前端用的是jquery后台是springMVC.鉴于注册和登录有些接口功能是类似的(比如注册确保邮箱是没有注册 ...
-
学习angular.js的一些笔记想法(上)
1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-change ...
-
MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
-
(翻译)Angular.js为什么如此火呢?
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
-
Angular指令渗透式理解
通过一段时间对angular指令的使用,理解了angular指令的意义,下面逐一介绍一下. ng-app:定义一个angualr模块,表示angular作用的范围,如下代码: ng-app在html标 ...
-
Angular js 之一些简单的js操作
1.<div ng-if()> </div> 括号里面是布尔值 如果是false那么你ng-if的那个dom就会不显示.(感觉这是angular js中最给力的一点) 一般会 ...
随机推荐
-
一步一步开发Game服务器(二)完成登陆,聊天
我知道这样的文章在博客园已经多的大家都不想看了,但是这是我的系列文章开始,请各位大神见谅了. 多线程,线程执行器,(详见),socket通信相关 (详见) 本人blog相关文章测试代码,示例,完整版s ...
-
linux 安装redmine 遇到的问题
1.编译安装ruby-2.3.1时 需要先安装libyaml.libyaml-devel 2. 安装gem install rake ERROR: Loading command: install ( ...
-
[Linux] Ubuntu Server 12.04 LTS 平台上搭建WordPress(Nginx+MySQL+PHP) Part IV
接下来我们去下载 WorePress 用最新的 3.7.1 下载地址是:http://cn.wordpress.org/wordpress-3.7.1-zh_CN.zip 我们先建立一个文件夹 /va ...
-
DNS加速之“智能DNS”跟“双线加速”、“CDN加速”的区别
“智能DNS”跟“双线加速”.“CDN加速”的区别相信,很大部分IDC用户可能还没弄清楚状况,有人觉得智能DNS跟双线加速.CDN加速是类似的技术.其实不然,它们在工作方式上有着本质的区别,但它们又可 ...
-
toast组件较为完美版本
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
-
Square spiral
Square spiral Nikola picks up a strange circuit board. All of its elements are connected in a spiral ...
-
探讨css中repaint和reflow
(个人blog迁移文章.) 前言: 页面设计中,不可避免的需要浏览器进行repaint和reflow.那到底什么是repaint和reflow呢.下面谈谈自己对repaint和reflow的理解,以及 ...
-
基于.NET的APP开发和Windows开发,异步回调差别
在Smobiler的开发中,控件或组件及客户端功能都是通过事件或委托来进行处理的. Smobiler是基于异步非阻塞的方式来运行的 下面我们分别对Windows的和Smobiler的MessageBo ...
-
【spring boot】spring boot后台时间正确,返回给前台的时间不正确,和后台差8个小时
后台打印的时间如下: 数据库存储时间如下: 接口返回给前台的时间如下: 相差8个小时. 原因如下: spring-boot中对于@RestController或者@Controller+@Respon ...
-
用vue开发顶端粘滞效果的页面
概述 通常一个长的页面,需要滚动浏览,有部分重要信息会随着滚动而看不见,因此需要粘滞在顶端,而又不影响滚动浏览,这个demo基于vue2,实现这个需求. 详细 代码下载:http://www.demo ...