什么是强angularJS的应用呢?
我们知道angularJS是描述性的前端框架。也就是说在HTML中我就应该尽量描述清楚最后应该呈现的结果,在js文件尽量少的直接操作DOM元素。
与JQuery不同,在JQuery的应用中,从HTML文件中我们很难了解最终呈现的画面,因为在js文件中有着大量直接针对DOM的操作。
现在我们来试着编写一个强AngularJS的应用。在这个过程中,注意体会 尽量少的直接操作DOM元素 的精神。
应用的最终结果如下:
当我们改变Date Format中的时间显示格式时,Current Time的显示格式就会改变。
首先编写我们的html文件
<!DOCTYPE HTML>
<html ng-app='Clock'>
<head >
<title>AngularJS NotePad</title>
<script type="text/javascript" src='./js/angular.min.js'></script>
<script type="text/javascript" src='./js/clock.js'></script>
</head>
<body>
<p>AngularJS Clock</p>
<div ng-controller='ClockController'>
Date Format: <input ng-model='format'> <br>
Current Time: <span my-current-time></span>
</div>
</body>
</html>
然后编写clock.js文件
var app = angular.module('Clock',[]);
app.controller('ClockController',function($scope){
$scope.format = 'M/d/yy h:mm:ss a';
});
app.directive('myCurrentTime',function($interval,dateFilter){
function link(scope,element,attrs){
function updateTime(){
scope.currentDate = dateFilter(new Date(),scope.format);
}
var timeoutID = $interval(function(){
updateTime();
},1000);
element.on('$destroy',function(){
$interval.cancel(timeoutID);
});
}
return {
link:link,
template : '<span>{{currentDate}}</span>'
};
});
我们每秒去运行一次updateTime这个函数。这就是所有的逻辑!我们没有直接操作DOM元素!
作为一个反面试例,请参考这里