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是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- android studio 使用ndk编译.C文件生成so文件
task buildSo(type: Exec) { //windows commandLine 'ndk-build.cmd', '-C', file('src/main').absolutePat ...
- dedecms 模板静态化
require_once (dirname(__FILE__) . "/../include/common.inc.php"); require_once DEDEINC.&quo ...
- LeetCode 350. Intersection of Two Arrays II
Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...
- 如何彻底卸载Oracle
如何彻底卸载Oracle 因为Oracle在Windows下的卸载颇有一些麻烦,如果不能完全卸载有可能影响将来的再次安装!常规卸载方法是运行Oracle的自带的卸载程序,可遗憾的是我在卸载时总不能完全 ...
- div,li,span自适应宽度换行问题
<ul class="news"> <li><span class="lbl">右对齐,换行显示的解决方法</s ...
- http://paulgraham.com/arcfaq.html
Why not use some other delimiter than parentheses?为什么不使用一些其他的分隔符比括号?We tried various possibilities. ...
- .html()和.text()的区别
在页面调用接口显示数据的时候,正常情况下.html()和.text()都可以显示数据内容,但是在特殊情况下,比如接口中这个参数为空的时候就表现出差距了,.html()显示的是空白,而.text()显示 ...
- linux中的进程和线程
应用程序:可以被操作系统执行的一组指令和参数的集合,是静态的,并存储在磁盘空间中: 进程:在操作系统中在运行程序后,处于运行状态的程序,是应用程序的一个执行过程,同时也是操作系统分配内存,cpu等系统 ...
- 低版本的xcode打开xcode8上的xib错误
XIB和Storeboard适配 在Xcode8之前,创建一个XIB或SB文件,都是一个600*600的方块XIB文件.在Xcode8之后,创建的XIB文件默认是6s尺寸的大小. 但是Xcode8打开 ...
- css secrets----multiple borders
原始文档: https://www.zybuluo.com/freeethy/note/193574 box-shadow solution 只能实现solid border box-shadow表现 ...