Angular JS 的好处在于它用极其少的代码实现了用Javascript和Jquery实现的功能。由于AngularJS是建立在MVC的架构上,所以使用data binding可以实现各个组件的无缝连接。
下面以例子说明这个好处
需求:给定一个数字输入,实时以金钱的格式输出到下方。并且做出最基本的validation,即若输入的是非数字,则不显示。
首先看看JQuery的实现
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Jquery</title>
<script>
$(function(){
function formatCost(){
var cv = Math.floor(parseFloat($('#cost').val()) * 100).toString();
if (cv.length == 0) {
cv = '0.00';
}
$('#fmtCost').text('$' + cv.substr(0, cv.length-2) + '.' + cv.substr(cv.length-2,2))
}
$('#cost').keyup(formatCost);
});
</script>
</head>
<body>
Cost: <input type="text" id="cost" placeholder="cost" />
<p>
This is your cost: <span id="fmtCost"></span>
</p>
</body>
</html>
JQuery的实现模式是通过元素的标示进行获取,同时也是利用元素的标示进行修改。比如,
通过元素的ID获取:var cv = Math.floor(parseFloat($('#cost').val()) * 100).toString();
通过元素的ID进行值的修改:$('#fmtCost').text('$' + cv.substr(0, cv.length-2) + '.' + cv.substr(cv.length-2,2));
这样的缺点是维护的工作量比较大,而且灵活性欠缺,比如说要修改货币的种类那就非常麻烦了。
那我们再看看Angular JS的实现:
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<title>Angular JS</title>
</head>
<body>
Cost: <input type="text" ng-model="cost" placeholder="cost" />
<p>
This is your cost: {{cost|currency}}
</p>
</body>
</html>
使用ng-model加上{{}}进行数据绑定加上内置函数对currency的控制。好处是减少了代码量和维护的工作量。
具体在使用过程中,JQuery也有它无可取代的地方,在以后学习的过程中需要加比对比。
总结:此文章通过一个例子的引入,我们学会了Angular JS的好处,同时也明白了学习Angular JS的原因。