2013年11月15日 星期五

Angular Js Part I : Start


Angular js 是一個相當好用的前端開發工具,
之前我在寫html時,
若要即時更新data通常都必須利用JQuery進行DOM元素的抽換,相當不便;
尤其是在一大堆由程式自動產生的表格,更動某筆資料就更費工了。
Angular js所提供的Binding功能,就立刻解決了這一類的需求。
產生的效果如下:
為了達成即時反應的效果,做法有五種。

  • {{modelName}}(表達式)
  • ng-cloak
  • ng-bind
  • ng-bind-template
  • ng-bind-html


最簡單的方式就是使用表達式
不過首先必須要在<head></head>內載入Angularjs的js檔。
<head>
  <script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
    <!-- 原本只要angular.min.js即可,但是因為ng-bind-html需要使用sanitize所以必須在app加上angular-sanitize.min.js-->
    <script src="http://code.angularjs.org/1.2.0/angular-sanitize.min.js"></script>
    <meta charset="utf-8" />
  </head>

並且在所需要的範圍加上ng-app標籤,不過每個頁面只能存在一個ng-app。
範例如下:
<div ng-app>
//todo
</div>

原始碼如下:

<div >
   Sample ng-model----------------<br>
   Type in ur Name<input name="input" ng-model="urName"><br>
   Hi~ {{urName}}!!!!
</div>


Demo:

Sample ng-model----------------

Type in ur Name

Hi~ {{urName}}!!!!
--------------------------------


當程式越趨複雜,Angular js所使用的表達式越容易被使用者看見,
此時可以在該標籤加上ng-cloak並於Css中設定其樣式,
使其在Angular js尚未載入前,如被遮罩蓋住般,隱藏起來。
待Angular js載入後,會自動去除ng-cloak CSS的設定。
原始碼如下:

<div >
  Sample ng-cloak ----------------------
  <input ng-model="cloakValue" type="txt" />
  Hi~<span ng-cloak="">{{cloakValue}}</span>
      How r u ?
</div>

CSS設定如下:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
Demo:

Sample ng-cloak ----------------------



Hi~{{cloakValue}}
How r u ?
--------------------------------------


不過更好的方式應該是使用ng-bind,
ng-bind是將model bind在標籤內,
若未載入Angular js就不會呈現其內容。

原始碼如下:
<!-- Sample ng-bind -->
<div >
  Sample ng-bind ----------------------<br>
  <input type="txt" ng-model="bindValue"><br>
  Hi~<span ng-bind="bindValue"></span>
   How r u ?
 </div>

Demo:
Sample ng-bind ----------------------



Hi~
How r u ?
-----------------------------------------


另外個方式跟表達式比較像,ng-bind-template可以直接將多個表達式撰寫在標籤當中,
必且也可以避免Angular js未載入時,
讓使用者看到表達式的窘境。
原始碼如下:

Demo:
<!-- Sample ng-bind-template -->
    <div class="box">
      Sample ng-bind-template ----------------------<br>
      <input type="txt" ng-model="tmp1"><br>
      <input type="txt" ng-model="tmp2"><br>
      temp1 & temp 2 :<span ng-bind-template="{{tmp1}} {{tmp2}}"></span>

    </div>

Sample ng-bind-template ----------------------





temp1 & temp 2 :

-------------------------------------------------




另外,若是希望能夠完整呈現使用者自訂的html標籤,
則可以使用ng-bind-html
不過比較麻煩的是,必須要將原本的ng-app改為ng-app="ngSanitize",
必且在<head></head>標籤內載入:
    <script src="http://code.angularjs.org/1.2.0/angular-sanitize.min.js"></script>

原始碼如下:
<!-- Sample ng-bind-html -->
    <div class="box" >
      Sample ng-bind-html ------------<br>
      <input type="txt" ng-model="bindhtml" ng-init="bindhtml='<b>Hi! Html</b>'"><br>
      <span ng-bind-html ="bindhtml"></span>
</div>


Demo:

Sample ng-bind-html ------------