angular.js 双向数据绑定,依赖注入

$下文用#代替

实现方向

angularJs可以实现双向数据绑定，分为两个方向：

1.如果angularJs里面的模型数据变化了，则立马会在视图上体现

2.如果视图上的数据变化了【视图哪里的数据会产生变化？表单的控件会：input、textarea、……】，则也会影响模型里面的数据

---

方向1-模型到视图

代码:

效果:

---

点击ngClick

视图:

代码:

---

方向2-视图到模型

ng-model='模型变量'

演示：#scope.$watch(‘监视值’,回调函数)

---

ngModel指令

解释：把视图里面用户可以修改的值【表单里面的控件：input、checbox….】绑定到一个模型的变量上面。
实现方法：ngModel指令【把当前文本输入域里面的值绑定到一个模型变量上】
思考：在使用input的时候，用户可以修改里面的值，但是我们如何获取里面的值呢？然后同步修改模型里面的变量值呢？==>ngModel指令

模型数据变化

练习：表单控件中的值的绑定操作

单行文本：ngModel可以把value值绑定到模型变量上面
单选框：ngModel可以把单选的value绑定到模型变量上
复选框：ngModel可以把复选框的true/false值绑定到模型变量上
下拉框：ngModel可以把下拉框中当前选中的option的value值绑定到模型变量上

代码:

效果:

---

angularJs的服务

由于我们在开发的过程中，不可避免的需要某些操作【对象或者是方法】，这个时候angular本身就有写好这些功能，我们只需要在需要它的时候，告诉angularJs一下即可【写在控制器方法的形参里面】，则angularJs则会自动帮我们把这个对应的服务传递进来，然后我们在自己的控制器里面就可以使用了。

angularJs常见的服务有如下：

a.#rootScope服务：在所有控制器之间共享数据
b.#interval 服务 周期性定时任务 setinterval
c.#timeout服务 一次性定时任务 setTimeout
d.#http服务 Ajax操作

---

angularJs之依赖注入【设计模式】

这种设计在Java语言的一个Spring框架里面运用淋漓尽致。有的时候也被称为控制反转。

简介

1.什么是依赖注入?
dependency：例如某个函数调用的时候需要传递其他对象作为参数，就称此函数依赖于形参对象。

场景模拟：现在让一个司机开车

function Driver(){    var car1 = new Car(‘启动’’方向盘’);    car1.start();    car1.run();    car1.stop;}var d1 = new Driver();

理论上来说：司机应该只要知道如何开车即可，不需要知道如何去造车。

自己不造，别人造，传参数过滤

function Driver(car){  car.start();  car.run();  car.stop();}var car = new Car();var d1 = new Driver(car);//如何解决依赖关系：//a.主动创建依赖对象var car1 = new Car(); var driver1 = new Driver(car1);//b.被动注入方式(injection)var d1 = new Driver(car);// [框架提供]

对于angularJs会自动解决依赖关系，在我们使用的时候只要吼一声，则angular会自动创建，不用关系内部的细节。

eg: module.controller(控制器名, function(#scope,  #interval){})

angularJs中ngController实例化控制器对象的时候，会根据指定的形参名，创建出控制器所依赖的对象，并注入给控制器对象-被称为依赖注入现象（DI）。

可以注入的对象

在angularJs中的所有的服务和provider【供货商和服务基本一样】都可以被注入。