AngularJS笔记

1,客户模板

angular中,模板和数据都会被发送到浏览器中,然后在客户端进行装配

2,MVC

(1)MVC核心概念,把管理数据的代码(model)、应用逻辑代码(controller)、向用户展示数据的代码

(view)清晰地分离开

(2)Angular应用中:

试图就是Document ObjectModel

控制器就是Javascript类

模型数据则被储存在对象属性中

3,数据绑定

(1)数据绑定可自动将model和view间的数据同步

(2)Angular实现数据绑定的方式,可以让我们把model当做程序中唯一可信的数据来源。view始终是

model的投影。当model发生变化时,会自动放映到view上。

4,经典模板系统中的数据绑定

(1)大多数模板系统中的数据绑定都是单向的

(2)把模板与model合并在一起变成view,如果在合并之后,model发生了变化,不会自动反映到view上。

(3)用户在view上的交互也不会反映到model中,开发者必须写大量代码不断地在view与model之间同步数

据。

5,AngularJS模板中的数据绑定

(1)模板是在浏览器中编译的,在编译阶段产生了一个实时更新(live)的视图

(2)不论在model或是view上发生了变化,都会立刻反映到对方。

(3)model成为程序中唯一真实的数据来源,极大地简化了开发着需要处理的编程模型。

6,依赖注入(软件设计模式)

(1)依赖注入是一种软件设计模式,用来处理代码的依赖关系。

(2)Angular的依赖注入只是简单的获取它所需要的东西,而不需要创建他们所依赖的东西

类function(){}

数据绑定(双向绑定):

1,ng-app

ng-app指令告诉Angular应该管理页面中哪一块

在<body ng-app="">中加入ng-app,然后内容中打`100`会输出100,不加则输出`100`

angular表达式:`name`  name是变量

2,angular表达式

(1)angular表达式 用过$parse服务解析执行

(2)与Javascript表达式的区别:1,属性求值:所有属性的求值是对于scope的,而javascript是window对

象。2,宽容:表达式求值,对于undefined和null,angular是宽容的,但Javascript会产生

NullPointerExceptions = 3,没有流程控制语句:在angular表达式里,不能做以下任何事情:条件分支

、循环、抛出异常4,过滤器(filters):我们可以就将表达式的结果传入过滤器链(filter chains)

js 表达式

var string = "alert(1+2)";

eval(string);  用eval解析string  打印出3

控制器:

<div ng-controller="firstController">

在JS文件中声明

var firstController = function($scope){

//$scope对象我们叫做作用域

//声明一个Model

$scope.name = "张三";

}

<div ng-bind="name">   当页面加载完毕div内容会自动变成name,并且添加class="ng-binding"用于

解决HTML加载时间的问题

多个控制器的作用域:

<div ng-controller="secondController"> 多个作用域

scope是一个指向应用model的object,也是表达式的执行上下文。

scope被放置于一个类似应用的DOM结构的层次结构中。

angular是怎么知道变量发生了改变

(1)能通过固定的接口才能改变变量的值,比如说只能通过set()设置变量的值,set被调用时比较一下

就知道了。这中方法的缺点是写法繁琐

(2)脏检查,将原对象复制一份快照,在某个时间,比较现在对象与快照的值,如果不一样就表明发生变

化,这个策略要保留两份变量,而且要遍历对象,比较每个属性,这样会有一定性能问题

angular的策略

angular的实现就是实用脏检查

1,不会脏检查所有的对象,当对象被绑定到html中,这个对象添加为检查对象(watcher).

2,不会脏检查所有的属性,同样当属性被绑定后,这个属性会被列为检查的属性

在angular程序初始化时,会将绑定的对象的属性添加为监听对象(watcher),也就是说一个对象绑定了N

个属性,就会添加N个watcher。

什么时候去脏检查

angular所系统的方法中都会触发比较时间,比如:controller初始化的时候,所有以ng-开头的时间执行

后,都会触发脏检查

手动触发脏检查

$apply仅仅只是进入angular context,然后通过$digest去触发脏检查

$apply如果不给参数的华,会检查该$scope里面的所有监听的属性,推荐给上参数

$scope.$apply(function(){

//这里会去触发脏检查

});