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(){
//这里会去触发脏检查
});