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是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- 让一个端口同时做两件事：http/https和ssh
相信很多人都在YY:能不能让80端口分析连接协议,如果是http协议就让服务器交给http服务程序(如Apache.Nginx等)处理,如果是ssh协议就交给ssh服务程序(如OpenSSH Serv ...
- Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案
前言 刚开始创建MVC与Web API的混合项目时,碰到好多问题,今天拿出来跟大家一起分享下.有朋友私信我问项目的分层及文件夹结构在我的第一篇博客中没说清楚,那么接下来我就准备从这些文件怎么分文件夹说 ...
- NGUI的localPosition和Position之间的关系
假设有子节点为child, 父节点为parent, 且都是Transform类型. 则: child.localPosition = (child.position - parent.position ...
- C# 报表设计器 （winform 设计端）开发与实现生成网页的HTML报表
记得2010年之前,公司的项目基本上都要用到报表,以前我们常用的方法就是针对客户的需求来定制化开发(基本上是死写代码)来实现,经常导致项目经常性的延期,因为客户的需求经常会变化,随着用户的使用认知度的 ...
- Django 开发投票系统
主要参考官方文档 Windows 10 Python 23.5 Django 1.9 1.创建项目(mysite)与应用(polls) D:\python>django-admin.py st ...
- 怎样把excel的数据导入到sqlserver2000数据库中
在做程序的时候有时需要把excel数据导入到sqlserver2000中,以前没从外部导入过数据,今天刚做了一下导入数据,感觉还是蛮简单的,没做过之前还想着多么的复杂呢,下面就来分享一下我是如何把ex ...
- EX的魔方
https://www.luogu.org/problem/show?pid=2007 题目背景 常神牛从来没接触过魔方,所以他要借助计算机来玩.即使是这样,他还是很菜. 题目描述 常神牛家的魔方都是 ...
- 从 A/Looper: Could not create epoll instance. errno=24 错误浅谈解决各种 bug 的思路
今天代码写着写着就莫名闪退了,手机也没有“程序停止运行”的提示,logcat也没有看到蓝色的调用栈log,这样的闪退最是蛋疼了,还好必现.复现几次之后,终于从logcat中看到了一行可疑的log: A ...
- python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器
python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...
- Spark Streaming源码解读之Driver容错安全性
本期内容 : ReceivedBlockTracker容错安全性 DStreamGraph和JobGenerator容错安全性 Driver的安全性主要从Spark Streaming自己运行机制的角 ...