邂逅AngularJS

AngularJS是采用JavaScript语言编写的客户端MVC框架，帮助开发者编写现代化的单页面应用。尤其适合编写有大量CURD操作的，具有AJAX风格的富客户端应用。

  • 使用HTML作为模板语言
  • 无须对Dom进行显示刷新
  • 有趣的和可扩展的组件子系统能够教会浏览器如何解释自定义的HTML标签及属性
  • 依赖注入及可测试性

AngularJS速成

AngularJS库：一个包装好的JavaScript文件。

AngularJS库相当小：最小化并用gzip压缩后只有30KB，不依赖其他库。

在AngularJS中，所有能够被框架理解和解释的特殊HTML标签和属性，统称为指令。

ng-app  ng-init {{name}}  ng-model  ng-controller

作用域

$scope对象是模板的域模型（domain model），也称为作用域实例。

作用域可以加入与模板相关的数据和提供相关的功能。

作用域层级

ng-controller指令是作用域创建（scope-creating）指令。新创建的作用域实例$scope会拥有$parent属性，并指向它的父作用域。

众多作用域形成了以$rootscope为根的树结构。鉴于DOM树驱动了作用域的创建，作用域树模仿DOM树的结构就不奇怪了。

每个作用于都有自己的整套模型值。在不同的作用域中，定义同名的变量，不会造成命名冲突，这相当于集合中的每个项目都有自己的命名空间（namespace）。

作用域中定义的属性对每个子作用域是可见的，只要子作用域没有定义同名的属性。

AngularJS中的作用域继承是沿继承树向上查找属性，直到找到为止。

在进行读操作时，作用域层级的继承关系直观易懂。然而，进行写操作时情况就有些复杂了。

<body ng-app ng-init="name='World'">

<h1>Hello, {{name}}</h1>

<div ng-controller="HelloCtrl">

    Say Hello to: <input type="text" ng-model="name">

    <h2>Hello, {{name}}</h2>

</div>

<script>

  var app = angular.module('myApp', []);

  app.controller('HelloCtrl', function($scope) {

  });

</script>

</body>

　　运行这段代码会发现，name变量被定义在了最顶层的作用域中。然而，它在整个应用中到处可见。这说明，变量会沿着作用域层级向下继承。换句话说，定义在父作用域中的变量，在子作用域中也可以访问。

现在，在<input>输入框中开始打字，你会惊讶的发现，HelloCtrl控制器生成的作用域中创建出了新的name变量，而不是去修改$rootscope设定的name变量的值。

有几种方法可以从子作用域中影响定义在父作用域中的属性。首先，可以用$parent属性明确地引用父作用域。修改后的模板如下所示：

<input type="text" ng-model="$parent.name">

在本例中，这确实能解决问题，但这种解决方案相当不可靠。应尽量避免使用$parent属性。

另一种解决方案是将变量绑定为某对象的属性，而不是直接绑定为作用域的属性。代码如下：

<body ng-app ng-init="thing={name:'World'}">

<h1>Hello, {{thing.name}}</h1>

<div ng-controller="HelloCtrl">

    Say Hello to: <input type="text" ng-model="thing.name">

    <h2>Hello, {{thing.name}}</h2>

</div>

<script>

  var app = angular.module('myApp', []);

  app.controller('HelloCtrl', function($scope) {

  });

</script>

</body>

　　这是更好的解决方案，它没有对DOM树结构做任何假设。

所以，应避免直接绑定变量给作用域属性。对象属性的双向数据绑定是更好的方案。

作用域层级与事件系统

作用域层级，可以看成传送事件的列车。AngularJS允许跨越作用域层级，传播带有信息的命名事件。事件可以从任何作用域开始分发，然后向上分发（$emit）或向下广播（$broadcast）。

AngularJS的核心服务（services）与指令通过这趟事件列车来发送信号，通知应用状态的重要变化。例如，可以监听$locationChangeSuccess事件（由$rootScope广播），当地址（浏览器URL)变化时我们会收到通知，代码如下：

$scope.$on('$locationChangeSuccess', function(event, newUrl, oldUrl){

});

每个作用域实例都有$on方法，用于注册作用域事件的处理器。调用处理器函数时，被分发的event对象会作为第一个参数传入，后续参数会依据事件负载的信息和事件类型而定。

与DOM事件一样，event对象有preventDefault()和stopPropagation()方法。

可以调用scope类上的$new()和$destroy()方法手动创建和销毁作用域。

未完待续~

<!--

作者：纤锐
出处：http://www.cnblogs.com/beginner2014/p/5167020.html
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。谢谢合作。

-->

精通AngularJS 读书笔记（1）的更多相关文章

  1. 精通AngularJS 读书笔记（2）

    AngularJS 速成 视图 因为AngularJS 依靠浏览器去解析模板,所以要保证模板是有效的HTML.尤其要小心闭合号HTML标签(未闭合好的标签不会产生任何错误信息,但会让视图不能正确渲染) ...

  2. Mastering Web Application Development with AngularJS 读书笔记-前记

    学习AngularJS的笔记,这个是英文版的,有些地方翻译的很随意,做的笔记不是很详细,用来自勉.觉得写下来要比看能理解的更深入点.有理解不对的地方还请前辈们纠正! 一.关于<Mastering ...

  3. Mastering Web Application Development with AngularJS 读书笔记(三)

    第一章笔记 (三) 一.Factories factory 方法是创建对象的另一种方式,与service相比更灵活,因为可以注册可任何任意对象创造功能.例如: myMod.factory('notif ...

  4. Mastering Web Application Development with AngularJS 读书笔记(二)

    第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效 ...

  5. Mastering Web Application Development with AngularJS 读书笔记(一)

    第一章笔记 (一) 一.PS:运行时配置IIS <html> <head> <script src="angular.js"></scri ...

  6. 《html5 从入门到精通》读书笔记（二）

    接着上面继续记录笔记,这次要记的知识点比较多...记录下我认为比较重要的东西. 一.表单属性 1.autocomplete属性 该属性规定form或input域应该拥有自动完成功能. <form ...

  7. 《html5 从入门到精通》读书笔记（一）

    今天看了<html5 从入门到精通>这本书,感觉阅读下来很舒心,不像阅读其他书籍很揪心.html增加的知识点,我觉得非常有价值,看完几章记录了一些内容,不但能巩固,也为下次遗忘知识点做好准 ...

  8. 【精通css读书笔记】 第八章 布局

    学习了css布局的基础后又来翻阅<精通css>这本经典书籍,对布局有了进一步的认识. 基于浮动的布局 两列的布局仍然是使用一个元素向左浮动,一个元素向右浮动,值得注意的是要加入displa ...

  9. 《Linux.Shell编程从入门到精通》读书笔记

    第一章 第一个Shell程序 以 #!解析器名称 开头,表示选择哪个解释器解释shell脚本 source命令 export命令 env命令 unset命令 第二章 shell编程基础 函数传递 标准 ...

随机推荐

  1. Thinkphp框架感悟（二）

    这次主要分析一下I方法 /** * 获取输入参数 支持过滤和默认值 * 使用方法: * <code> * I('id',0); 获取id参数 自动判断get或者post * I('post ...

  2. java UDP 简单实现编程

    http://kuchaguangjie.iteye.com/blog/911145 http://blog.csdn.net/pengchua/article/details/4398972 htt ...

  3. c#语句 随堂练习2

    1.方程ax²+bx+c=0是一元二次方程,求根. 2.输入一个年份 ,判断是不是闰年.(能被4整除但不能被100整除的年份是闰年,有的世纪年也是闰年) 3.标准体重:男士体重=身高-100±3:女士 ...

  4. redis发布订阅

    命令 : redis-cli打开一个客户端 Redis Psubscribe 命令订阅一个或多个符合给定模式的频道. 每个模式以 * 作为匹配符,比如 it* 匹配所有以 it 开头的频道( it.n ...

  5. 函数响应式编程(FRP)—基础概念篇

    原文出处:http://ios.jobbole.com/86815/. 一函数响应式编程 说到函数响应式编程,就不得不提到函数式编程,他们俩有什么关系呢?今天我们就详细的解析一下他们的关系. 现在下面 ...

  6. Apache Spark技术实战之6 -- spark-submit常见问题及其解决

    除本人同意外,严禁一切转载,徽沪一郎. 概要 编写了独立运行的Spark Application之后,需要将其提交到Spark Cluster中运行,一般会采用spark-submit来进行应用的提交 ...

  7. 算法与数据结构题目的 PHP 实现：栈和队列 由两个栈组成的队列

    思路:同样使用 PHP 的数组模拟栈.栈的特点是先进后出,队列的特点是先进先出,可以用第一个栈(StackPush)作为压入栈,压入数据的时候只往这个栈中压入数据,第二个栈作(StackPop)为弹出 ...

  8. ultraedit正则使用

    下面是从UltraEdit文档中摘录的语法说明: 正则表达式 (UltraEdit 语法): 符号 功能 % 匹配行首 – 表示搜索字符串必须在行首,但不包括任何选定的结果字符中的行终止字符. $ 匹 ...

  9. [BS-30] 你真的会用storyboard开发吗？

    你真的会用storyboard开发吗?   随着苹果大屏手机的推出,苹果公司马上推出了屏幕适配的一些东西Constraints and Size Classes同时,在开发项目时候,是使用sb还是写代 ...

  10. 使用CMD命令设置IP

    使用CMD命令设置IP,将下面文本保存为bat文件后执行 netsh interface ip set address name="本地连接" source=static addr ...