2013年3月13日 星期三

無意中發現的AngularJS

因為尋找關於NodeJS的資料,無意中發現了AngularJS, 感覺其中的雙向綁定功能很方便, 好像在JS中的變數改動就可以即時反映於頁面上, 不同於以住JAVASCRIPT的方式, 需要如set value般設定。

傳統的動態頁面, 如需將兩個TEXTBOX VALUE相加並立即顯示其結果, 其寫法大約如下:
<html>

 <script>

 function cal(val1, val2,output){

  if(val1.value && val2.value)

   output.innerHTML = parseInt(val1.value,10) + parseInt(val2.value,10);

 }

 </script>

 <input id="v1" onChange="cal(this, document.getElementById('v2'),document.getElementById('div1'));"/>+

 <input id="v2" onChange="cal(document.getElementById('v1'),this,document.getElementById('div1'));"/>

 =<div id="div1"></div>

</html>

測試: http://plnkr.co/edit/nZOab3Z9TSp4jlvJKwhW

使用AngularJS:
<!DOCTYPE html>

<html ng-app>

  <head>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>

  </head>

  <body>

    <input type="number" ng-model="v1"/>+

    <input type="number"ng-model="v2"/>

    = {{v1  + v2}}

  </body>

</html>

測試: http://plnkr.co/edit/vGeeBFOaXDpcfIsZh60f


其他關於模版,MVC設計等仍在研究中....

更多關於AngularJS:
http://angularjs.org/

中文社區:
http://www.angularjs.cn

還有類似JQUERY UI的AngularJS UI:
http://angular-ui.github.com/

因為經常會用到Grid, JQUERY有Datatable, 還算易用, 而Angular 的ng-grid好像也相當不錯
http://angular-ui.github.com/ng-grid/
張貼者： 於
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)