$下文用#代替
实现方向
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【供货商和服务基本一样】都可以被注入。