编写强angularJS的应用

最新推荐文章于 2018-09-03 19:26:50 发布

boyzhoulin

最新推荐文章于 2018-09-03 19:26:50 发布

阅读量525

点赞数

分类专栏： angularJS

本文链接：https://blog.csdn.net/boyzhoulin/article/details/38874711

版权

angularJS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是强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元素！

作为一个反面试例，请参考这里