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是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- 利用Oracle自带的impdp和expdp进行简单备份
目前有个这样的需求,每天晚上23点将生产库的数据备份到备份机器上,第二天备份机器的数据库可以直接使用,数据是昨天生产库的数据.(生产数据目前不多,全部数据不超过3000w条). 由于没有接触过高深的O ...
- Starling项目启动时报错This application is not correctly embedded (wrong wmode value)
这个其实是Flash报的“ErrorEvent:. text=Error #3702: Context3D 不可用”错误被Starling变了一下. 解决方法:找到项目文件夹中的html-templa ...
- OpenCV2.3.1在Win7+VS2010下的配置过程(转)
转自:http://blog.csdn.net/mygis2005/article/details/10472717 这篇博客很好的解决了我遇到的问题,所以转到自己的博客里,方便以后进行查阅. 1． ...
- Excel with COM
COM excelApplication ; COM workBooks ; COM workSheets ; COM workSheet ; COM work ...
- oozie调用shell
<!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agree ...
- hashmap两种遍历方法
第一种:使用entryset来进行遍历 Map map=new HashMap(); Iterator iter=map.entrySet().iterator(); while(iter.hasNe ...
- ios录音、音频播放功能
#import <AVFoundation/AVFoundation.h> { NSInteger _timeCount; NSTimer *_timer; } @pro ...
- MongoDB（七）MongoDb数据结构
首先,向数据库插入一条bjson数据 首先是定义文档,然后使用admin用户名密码登录,进入test数据库,向test数据库中插入此文档("表名称和表中的记录") 插入结果,查看m ...
- 关于Java static 的学习心得
static,大家都很熟悉.但是要说真的懂,那就很少了.(当然我也不是很懂,但不妨碍学习吗.) 首先,我认为static修饰的成员就是属于类本身的成员.如果你加了一个static修饰符,好吧,那就相当 ...
- asp.net mvc在windows server 2003上部署
1.要安装mvc3.mvc4.mvc5的插件 2.部署要创建应用程序池,并指定 3.权限指定everyone