http://jsfiddle.net/mingderwang/x83gN/
讓我們跟 Angluar 第一類接觸吧...
1. 利用 Angular 可以簡單的做到 binding 的效果. 你可以玩玩看, 了解資料被 binding ("綁定") 的感覺.
Angular 第一個最吸引人的地方就是畫面內容會因為資料變動, 綁定的地方會自動反應其新的結果. 所以網頁無需重新下載 (loading), 內容就可以自動變更, 變更可以是文字, 也可以是圖表, 所以網頁變的非常活, 互動性高.
2. 所以 Angular 可以說是一種 MV (沒有C) 的架構模式. M 就是 Model "模型", 也就是資料本身, V 是 Visual "視覺效果", 簡單講就是 UI , C 是 Control "控制", 就是用來 M 與 V 之間互動的方法. (註1)
Ming> 幾乎所有程式都最好用 MVC 模式開發 (你總有一天會了解它的好處) (註2)
Angular 不需要寫 C 的部份, 因為他直接用 binding 把資料"模型" (也就是內容) 與 UI 的"視覺效果" (也就是輸出) 綁在一起. 所以你可以看上面程式裡把 input 的內容增加 ng-model 的變數"sometext", 顯示的地方只要用 {{ 和 }} 把它括在一起, 變成 {{ sometext }}, 就會有上面的效果了.
3. 別忘了 <div> 有加一個 ng-app, 讓程式知道, 這個區塊是一個 Anguluar 程式, 否則沒效果喔! (註3)
4. 如果再沒成功, 看看JSFIDDLE左邊 frameworks & Extensions 下有沒有挑一個 AngularJS 1.2.1 或 1.1.1 版, 它會自動幫你下載 angular.js.
5. 可以按 Fork 變成你的程式, 試試看再把你改好的程式 Share 出來分享給大家, 留下你的 URL 既可. 如果有 Bug 想大家幫忙除錯, 或幫你做 code review (看看有沒有問題, 寫的好不好), 都歡迎把你程式片段的 URL link 留在 comments 裡, 跟大家分享.
Good coding!
註解:
1. 其實 Angular 正確架構模式應該叫 MVVM, 他的 C 被VM (ViewModel) 給取代了. 有興趣了解 MVVM 模式者, 可參考 Wikipedia.
2. 可參考中文 Wikipedia. http://zh.wikipedia.org/wiki/MVC
3. 如果整個網頁只有一個 Angular app, 可以將 ng-app 加載 <html> 裡.
沒有留言:
張貼留言