angularjs入门——数据绑定的最佳实践

luoyjx · 2015-03-17 10:01 · 804次阅读

正如ng-app声明所有被它包含的元素都属于AngularJS应用一样,DOM元素上的ng-controller声明所有被它包含的元素都属于某个控制器。
为了解释这个概念,我们将前面的例子修改成如下的样子:

<div ng-controller='MyController'> 
  	<input ng-model="person.name" type="text" placeholder="Your name">
  	<h1>Hello {{ person.name }}</h1>
</div>

在这个例子中,我们会创建一个每秒钟走一步的时钟(时钟通常都是这样的),并更新clock变量上的数据:

function MyController($scope, $timeout) { 
    var updateClock = function() { 
    $scope.clock = new Date(); 
    $timeout(function() { 
        updateClock(); 
        }, 1000); 
    }; 
    updateClock(); 
};

在这个例子中,当定时器触发时会调用updateClock()函数,将$scope.clock的值设置为当前时间。

$timeout对象

可以在视图中将clock变量用{{ }}包起来,以显示$scope中的clock的值:

&lt;div ng-controller="MyController"&gt; 
    &lt;h5&gt;{{ clock }}&lt;/h5&gt; 
&lt;/div&gt; 

下面是完整的示例代码:

&lt;!doctype html&gt; 
&lt;html ng-app&gt; 
	&lt;head&gt; 
		&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"&gt;&lt;/script&gt; 
	&lt;/head&gt; 
	&lt;body&gt; 
		&lt;div ng-controller="MyController"&gt; 
			&lt;h1&gt;Hello {{ clock }}!&lt;/h1&gt;
		&lt;/div&gt; 
	&lt;script type="text/javascript"&gt; 
		function MyController($scope, $timeout) { 
			var updateClock = function() { 
			$scope.clock = new Date(); 
			$timeout(function() { 
				updateClock(); 
				}, 1000); 
			}; 
			updateClock(); 
		}; 
	&lt;/script&gt; 
	&lt;/body&gt; 
&lt;/html&gt;

尽管我们可以将所有代码都写在一个文件中,但由于需要将不同的组件分开开发,将代码写在一个文件中会使协同工作变得非常困难。通常情况下,更好的选择是将JavaScript放在单独的文件中,而不是index.html中。

&lt;!doctype html&gt; 
&lt;html ng-app&gt; 
	&lt;head&gt; 
		&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"&gt;&lt;/script&gt; 
	&lt;/head&gt; 
	&lt;body&gt; 
		&lt;div ng-controller="MyController"&gt; 
			&lt;h1&gt;Hello {{ clock }}!&lt;/h1&gt; 
		&lt;/div&gt; 
		&lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt; 
	&lt;/body&gt; 
&lt;/html&gt;

将前面例子中的JavaScript代码放在js/app.js文件中,而不是将它直接写在HTML中。

// 在app.js中
function MyController($scope, $timeout) { 
	var updateClock = function() { 
	$scope.clock = new Date(); 
	$timeout(function() { 
		updateClock(); 
		}, 1000); 
	}; 
	updateClock(); 
}; 

数据绑定的最佳实践

由于JavaScript自身的特点,以及它在传递值和引用时的不同处理方式,通常认为,在视图中通过对象的属性而非对象本身来进行引用绑定,是Angular中的最佳实践。

&lt;!doctype html&gt; 
&lt;html ng-app&gt; 
	&lt;head&gt; 
		&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"&gt;&lt;/script&gt; 
	&lt;/head&gt; 
	&lt;body&gt; 
		&lt;div ng-controller="MyController"&gt; 
			&lt;h1&gt;Hello {{ clock.now }}!&lt;/h1&gt; 
		&lt;/div&gt; 
		&lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt; 
	&lt;/body&gt; 
&lt;/html&gt; 

在这个例子中,相比每秒钟都更新$scope.clock,更新clock.now的值会是更好的选择。有了这个优化后,我们将反映数据变化的逻辑做如下修改:

// 在app.js中
function MyController($scope) { 
	$scope.clock = { 
		now: new Date() 
	}; 
	var updateClock = function() { 
		$scope.clock.now = new Date() 
	}; 
	setInterval(function() { 
		$scope.$apply(updateClock); 
	}, 1000); 
	updateClock(); 
};
收藏

暂无评论

登录后可以进行评论。没有账号?马上注册