今天开始,我将陆续将 ng 的学习笔记整理出来,还是像在写 backboneJs 时一样,每篇一语o_o.
1、数据绑定
在ng中,数据绑定是指仅声明界面的某一部分映射到js的属性,让他们自动同步。
语法:
ng-model="name"
//声明一个叫name的变量,然后可以引用 name
引用:
{{name}}
例如:
<div ng-model="name">{{name}}</div>
//这个字符串会被name的值替换
注意:
ng将模版进行了动态实时创建,用于代替视图,这也区别于在backbonejs中是将数据模版组合在一起来形成view。
这也是ng中最重要的功能之一 ——“动态、实时更新“。
现在我们来说说实现步骤: 1、在html中引用angular.js
代码语言:javascript复制<script type="text/javascript" src="js/angular.js"></scrtpt>
2、在某个DOM元素上设置ng-app属性(ng-app属性声明所有被其包含的内容都属于这个angularjs应用——即,只有被具有ng-app属性的DOM元素包含的元素才会受angularjs的影响。
代码语言:javascript复制<html ng-app="myapp">
ng 中的数据绑定是一种“双向绑定“,数据模型和视图之间的关系是:数据模型变化能够引起视图的变化。这样一来数据模型无需与视图交互,只需要包含数据和操作视图的方法,而二者的业务逻辑则由控制器 Controller 来完成。
数据模型对象——$scope
$scope
对象是简单的 js 对象,其中属性可被视图访问,也可通控制器交互。
例如: 我们在 PhoneListCtrl 控制器里面初始化了数据模型:
代码语言:javascript复制function PhoneListCtrl($scope) {
//$scope是一个作用域
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S."},
{"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet."},
{"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet."}
];
}
//那么我们就可以在这个作用下使用上面的phones对象里的属性
AngularJs 数据绑定的最佳实践
用一个例子来说明:
代码语言:javascript复制<html ng-app>
<head>
<title></title>
<script type="text/javascript" src="js/angular.js"></script>
</head>
<body>
<div ng-controller="myController">
<h1>Hello {{clock.now}}</h1>
</div>
<script type="text/javascript">
function myController ($scope) {
$scope.clock={
now:new Date()
};
var updateClock=function(){
$scope.clock.now=new Date()
};
setInterval(function(){
$scope.$apply(updateClock)
},1000);
updateClock();
};
//注释:$apply()接收一个function作为参数,会执行该function并触发一轮$disgest循环手动调用$apply(),在Angularjs上下文之外的任何地方修改model就需要通过手动调用$apply()来通知angularjs——即告诉angularjs,你修改了一些model,希望angularjs帮你触发function来作出正确的响应。
</script>
</body>
</html>
这下我们就实现了数据的绑定并实现实时更新。
好吧,今天就到这里吧~状态不是很好。。
每篇一语:
有一段时间没有用ng了,突然觉得知识需要回顾才能保留,所以现在开始写ng的学习笔记。我想这也只是一个开头,一起努力吧~Good Night