Page 28 - AngularJS权威教程
P. 28
8 第 2 章 数据绑定和第一个 AngularJS Web 应用
</div>
<script type="text/javascript">
function MyController($scope, $timeout) {
var updateClock = function() {
$scope.clock = new Date();
$timeout(function() {
updateClock();
}, 1000);
};
updateClock();
};
</script>
</body>
</html>
在线示例:http://jsbin.com/uHiVOZo/1/edit?html,output。
尽管我们可以将所有代码都写在一个文件中,但由于需要将不同的组件分开开
发,将代码写在一个文件中会使协同工作变得非常困难。通常情况下,更好的
选择是将JavaScript放在单独的文件中,而不是index.html中。
上面的代码可以修改成:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{ clock }}!</h1>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
将前面例子中的JavaScript代码放在js/app.js文件中,而不是将它直接写在HTML中。
// 在app.js中
function MyController($scope, $timeout) {
var updateClock = function() {
$scope.clock = new Date();
$timeout(function() {
updateClock();
}, 1000);
};
updateClock();
};
2.3 数据绑定的最佳实践
由于JavaScript自身的特点,以及它在传递值和引用时的不同处理方式,通常认为,在视图中
通过对象的属性而非对象本身来进行引用绑定,是Angular中的最佳实践。