Angularjs学习笔记（一）
大部分传统的模板系统，对模板的渲染是个线性单向的过程；模板或变量与模板混合在一起产生结果的标记集合。任何对模型的改变都需要通过模板的重新计算。但AngularJS有所不同，任何用户引发的视图的改变，都会映射在模型上，继而任何模型的改变，也会立即传播到整个模板。
一、作用域
AngularJS中的$scope对象是模板的域模型(domain model),也称为作用域实例(instance)。通过对其赋值，可以传递数据给模板渲染。
每个$scope都是Scope类的实例。Scope类有很多方法，用于控制作用域的生命周期、提供事件传播(event-progagation)功能，以及支持模板的渲染等。
1.1 作用域层级
ng-controller指令是作用域创建(scope-creating)指令。当在DOM树中遇到作用域创建指令时，AngularJS都会创建Scope类的新实例$scope。新创建的作用域实例$scope会拥有$parent属性，并指向它的父作用域。
AngularJS拥有$routScope，它是其他所有作用域的父作用域，将在新应用启动时创建。众多作用域形成了以$rootScope为根的树结构。
1.2 作用域层级和继承
作用域中定义的属性对所有子作用域是可见的，只要子作用域没有定义同名的属性。
AngularJS中的作用域继承和Javascript中的原型继承遵循同样的规则，沿继承树向上查找属性，直至找到为止。
1.3 在作用域层级中继承的风险
有两种方法可以从子作用域中影响定义在父作用域中的属性:
首先，可以使用$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>
</body>
1.4 作用域生命周期
作用域提供独立的命名空间，避免变量的命名冲突。因此，小型、组织良好的作用域，能节约内存的使用。作用域在不需要后会被销毁，在其中暴露的模型和函数都会被垃圾回收。
二、控制器
控制器的主要职责是初始化作用域实例。
2.1 提供模型的初始值。
2.2 增加UI相关的行为(函数)以扩展$scope对象。
控制器可以让你在JavaScript代码中表达初始化逻辑，而不是污染HTML模板。
三、模型
AngularJS的模型（model）实际上就是普通的JavaScript对象。与控制器类似，不需要特别地去扩展任何AngularJS底层类，也不用去构造模型对象。
四、视图
AngularJS与HTML和DOM有着更加紧密的联系，因为AngularJS依靠浏览器去解析模板文本，浏览器将文本转换成DOM树之后，AngularJS参与进来，开始遍历解析好的DOM结构。当遇到指令时，AngularJS就执行相关逻辑，将指令转换成页面的动态部分。
Angularjs学习笔记（一）的更多相关文章
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- eclipse NoClassDefFoundError错误
问题描述:eclipse中执行一个java web项目,代码中依赖都是正常的,发布到tomcat中调试就提示NoClassDefFoundError错误, 问题分析:首先确定工程中该类确实存在,因为代 ...
- Oracle Merge备忘示例
Oracle的merge语法非常实用,用于Insert.Update判断情况.以下是自己书写的一个示例,以免时间长了语法形式忘记了. MERGE INTO T_FR_GUOSZX T USING (S ...
- 从零开始系列-R语言基础学习笔记之二 数据结构（二）
在上一篇中我们一起学习了R语言的数据结构第一部分:向量.数组和矩阵,这次我们开始学习R语言的数据结构第二部分:数据框.因子和列表. 一.数据框 类似于二维数组,但不同的列可以有不同的数据类型(每一列内 ...
- IO操作
/// <summary> /// 文件读写操作/// </summary> public partial class TestIO : DevComponents.DotNe ...
- system verilog的一些总结（从其他博客复制来的）
转载自 http://blog.sina.com.cn/s/blog_e7fec2630101f5t9.html SystemVerilog是一种硬件描述和验证语言(HDVL),它基于IEEE 136 ...
- .net 生成 静态页面
.net 生成 静态页面 <!--Main.Aspx--> <%@ page language="C#" %> <%@ import namespac ...
- IIS启用兼容模式设置（win2k3—Win7)
点击添加按钮(上图),弹出下面的对话框(下图).在自定义HTTP头名处输入: X-UA-compatible 在自定义HTTP头值处输入: IE=EmulateIE7 (输入时注意不要留下空格)输入完 ...
- 剑指Offer:面试题29——数组中出现次数超过一半的数字(java实现)
PS:在前几天的面试中,被问到了这个题.然而当时只能用最低效的方法来解. 问题描述: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2, ...
- 【整理】动态加载Web Services
WebClient client = new WebClient(); String url = "http://localhost/MESAPIWebService/MESAPI.asmx ...
- thinkphp3.2！Go for it！
http://document.thinkphp.cn/manual_3_2.html