用AngularJS减少代码量吧

       AngularJS是google主持开发的mvc/mvvm框架,嗯,不是anglebaby,它的入门很简单,你了解一下说不定就会喜欢上它。下面给个简单例子: 
<!doctype html>
<html ng-app>
<head>
    <script src ="Scripts/angular.min.js"></script>
    <script>
        function InvoiceCntl($scope) {
            $scope.qty = 1;
            $scope.cost = 19.95;
        }
    </script>
</head>
<body>
<div ng-controller="InvoiceCntl">
    <b>Invoice:</b>
    <br>
    <br>
    <table>
        <tr><td>Quantity</td><td>Cost</td></tr>
        <tr>
            <td><input type="integer" min="0" ng-model="qty" required ></td>
            <td><input type="number" ng-model="cost" required ></td>
        </tr>
    </table>
    <hr>
    <b>Total:</b> {{qty * cost | currency}}
</div>
</body>
</html>
     
      比较好理解,js里面定义了一个controller,两个属性:qty,cost,然后在div上绑定这个controller,指定两个model属性到输入框,这样就实现双向绑定了,完全抛弃掉操作DOM和事件监听,此外,currency是过滤器,把结果过滤成货币格式,运行效果如下图:
用AngularJS减少代码量吧_第1张图片

 
       看上去效果很棒吧,虽说入门简单不过进阶的学习曲线就有点陡了,特别是自定义指令部分,不过这也是它最强大的功能,但假如暂时不用,像以下代码这种简单的方式完全兼容jquery,同时实现双向绑定,大大减少代码量。 
<!DOCTYPE html>
<html ng-app>
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="Scripts/angular.min.js"></script>
    <script type="text/javascript">
        function onTestClick(){  //jquery和angular交互
            var tx= $('#test').scope().testvalue;
            alert(tx);
            $('#test').scope().testvalue = '12345';
            $('#test').scope().$digest();
        }
        var TestCtrl = function($scope){ //angular方式,实现双向绑定
            $scope.testvalue = '123';
        }
        angular.bootstrap(document, document.documentElement);
    </script>
</head>
<body>
<div id="test" ng-controller="TestCtrl">
    <p>{{ testvalue }} </p>
    <input type="text" value="" id="a" ng-model="testvalue"/>
    <button onclick="onTestClick()">ClickMe</button>
</div>
</body>
</html>

        关于angularjs,业余时间有兴趣的可以先了解一下,接触下网页的新思路,除了http://www.angularjs.cn外(没有上一页下一页,不爽),推荐几个网址:
入门:http://www.ituring.com.cn/article/13472
配套示例代码可以从这里获取:http://www.worlduc.com/blog2012.aspx?bid=17596841

        进阶可以看《angularjs开发指南》,但基本是官方翻译文档,不少东西不好理解,推荐一个网址,作者学习的经验总结,容易体会,也适合从入门就开始看:
http://zouyesheng.com/angular.html#toc1

你可能感兴趣的:(用AngularJS减少代码量吧)