AngularJS初體驗

趁著沒什麼事情,來好好玩一下AngularJS,這個東西最近很火紅,當我一開始看到它的能力時眼睛是凸出來的 ...

在使用之前,先到AngularJS的官方網站按下Download按鈕,會跳出CDN網址,複製起來之後就可以另外開一個網頁進行編輯了。如果覺得麻煩也沒關係,可以到 http://jsbin.com 內建立一份空白的內容來開始測試AngularJS的能力。

好,首先我們來建立一個初稿:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  </head>
  <body>
    {{100}}
  </body>
</html>

然後來看看JSBin或你剛剛儲存的HTML頁面結果,我想畫面上顯示的應該是{{100}}對不對?但是照理說應該要顯示的是100才對 ... 這是怎麼回事呢?

因為,在<html>標籤上我們少加了一個宣告,所以基本上要用到AngularJS的頁面的話,該頁的<html>應該要寫成<html ng-app>這樣才能正常運作,所以請嘗試動手修改上面的code吧。

修改好後應該可以看到頁面上是顯示100而不再是{{100}}了吧?在AngularJS中要render在HTML上的東西,是用{{}}包住的,就有點像是寫Rails的時候會用的<%= %>一樣。

好,我們來寫一個簡單的金額計算小程式吧,假設我們有一個slider叫做price,另外一個叫做amount,拉動slider的時候可以更新金額的結果,這個部分該怎樣寫呢?

<!DOCTYPE html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  </head>
  <body>
    <p>
        價格:
        <input type="range" ng-model="price" />
    </p>
    <p>
        數量:
        <input type="range" ng-model="amount" />
    </p>
    <p>總價格:{{price * amount}}</p>
  </body>
</html>

拉動兩個slider看看,會發現底下會自動計算總價格,但是在沒有拉動之前那個地方會顯示null,實在不是很美觀,這個情況下就有兩種作法可以用。

第一種

在第一種作法中,我們可以把輸出的{{price * amount}}改成{{price * amount || 0}}這種寫法,如果前面為null則後面會回傳。

第二種

另外一種作法就是我們預設slider的預設值,我拿價格來舉例:

原本的寫法是:<input type="range" ng-model="price" />

我們改成:<input type="range" ng-model="price" ng-init="price = 100" />

如此一來,我們就可以設定初始值,預設結果就會計算出來顯示在前端了。

Okay,大致上就這樣吧。

Comments

comments powered by Disqus