用AngularJS减少代码量吧

最新推荐文章于 2019-10-20 16:08:04 发布

lupiao01164

最新推荐文章于 2019-10-20 16:08:04 发布

阅读量336

点赞数

本文链接：https://blog.csdn.net/lupiao01164/article/details/41170609

版权

AngularJS是google主持开发的mvc/mvvm框架，嗯，不是anglebaby，它的入门很简单，你了解一下说不定就会喜欢上它。下面给个简单例子：

[html]view plaincopy 
   
 <!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是过滤器，把结果过滤成货币格式，运行效果如下图：

看上去效果很棒吧，虽说入门简单不过进阶的学习曲线就有点陡了，特别是自定义指令部分，不过这也是它最强大的功能，但假如暂时不用，像以下代码这种简单的方式完全兼容jquery，同时实现双向绑定，大大减少代码量。

[html]view plaincopy 
    
 <!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