[鐵人賽Day3]胡言亂語AngularJS 表達式(Expressions)

2017 iT 邦幫忙鐵人賽

DAY 3

Modern Web

不負責任系列，胡言亂語AngularJS快速上手系列第 3 篇

2017鐵人賽不負責任系列angularjs

Old Siao

2016-12-17 21:56:04

1457 瀏覽

分享至

今天我們來聊聊AngularJS表達式的部分吧

對齁，我剛就有這個疑惑，那AngularJS是怎麼呈現資料的呢？
它跟jQuery一樣嗎？

當然不一樣啊，AngularJS資料是雙向綁定的且很神奇的唷！
唷！怎個神奇法啊？
他只要兩對大括號就可以呈現了{{DATA}}
呃？
ㄟ逗，用說得很難說的清楚，不然我們用範例來說明好了

AngularJS 文字呈現
(JS Bin：https://jsbin.com/dewutahixu/2/edit?html,output)
Source code：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <title>JS Bin</title>
  </head>
  <body ng-app>
    {{'Hello'}}
  </body>
</html>

哇，就這樣直接呈現了唷
對啊，很神奇吧！

但，他的魅力可不只這樣唷～
唷，那他還有什麼功能啊？
你把{{'Hello'}}改為{{1+1}}試看看啊

AngularJS 數字驗算
(JS Bin：https://jsbin.com/yoyilucomo/1/edit?html,output)

剛有試過了嗎？感覺怎樣？
哇賽，這...這也太神奇了吧！
以前還要寫一個function才可計算的東西，現在只要在{{1+1}}就可以瞬間完成，太不可思議了
是吧，這就是AngularJS的雙向資料綁定的魅力啊，嘿嘿

那現在你知道AngularJS的表達是怎用了吧
下一章節，我們來談談Angular Modules的部分吧