您的位置：首页 > Web前端 > AngularJS

AngularJS系列——双向绑定和依赖注入

2017-04-25 14:52 211 查看

双向绑定

首先，要有数据绑定的概念。
View：也就是我们的页面，页面标签（angular指令、表达式）

Model：作用域对象（$rootScope）

数据绑定：数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成

单向数据绑定：只支持一个方向的数据流向。

View——>Model: ng-init 初始化的效果

Model——>View :{{name}}表达的效果
接着解释双向数据绑定
双向数据绑定：同时支持两个方向的数据流向

View<——>Model: ng-model的功能
指令：angular定义的属性、标签、样式、注释

表达式：{{表达式}} js表达式，从rootScope取数据

<body ng-app ng-init="name='Tom'">

<inputtype="text" ng-model="name">

<p>你输入的名字是：{{name}}</p>

<inputtype="text" ng-model="name">

<p>你输入的名字2是：{{name}}</p>

</body>

依赖注入

其实依赖注入的概念我们早就使用过了。看到方法一、方法二就肯清楚了。
依赖注入: 依赖对象被自动注入进来(用形参注入进来)
1. 什么是依赖对象?
* 完成特定功能的函数需要某个对象才能实现, 这个对象就是依赖对象
2. 如何引入依赖对象?
* 方式一: 内部自己创建 : 不动态
* 方式二: 全局变量 : 污染全局命名空间
* 方式三: 形参引入依赖 : 依赖注入使用的方式
3. 声明式依赖注入
* 定义函数时, 使用形参声明依赖对象变量, 在函数体中使用依赖对象(我们实现)
* 函数调用时, 自动将创建好的依赖对象动态传入/注入(框架实现)
* 例子: 事件监听就使用了依赖注入, event就是依赖对象(event可以是任意名称)

结论: 有形参的回调函数必然会用到: 依赖注入

/*

方式一: 内部自己创建 : 不动态

依赖对象: person

*/

functionshowPerson() {

var p = newPerson('Tom', 12);

console.log(p.name, p.age);

}

showPerson();

/*

方式二: 全局变量 : 污染全局命名空间/ 依赖名称

*/

var p = newPerson('Bob', 13);

functionshowPerson2() {

console.log(p.name, p.age);

}

showPerson2();

/*

方式三: 形参引入依赖 : 依赖注入使用的方式

*/

functionshowPerson3(person) { //我们来定义这个函数

console.log(person.name, person.age);

}

showPerson3(newPerson('xxx', 23)); //由其它人(js引擎或框架)来调用

这篇博客介绍依赖注入不错：http://blog.csdn.net/renfufei/article/details/19038123

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航