2016年3月22日 星期二

初探 AngularJS 。

序章


近年來「前端（Front-End）」這個名詞越來越夯，相信寫程式的你不一定聽過 JavaScript
但一定聽過 jQuery、React、AngularJS ....
那，你知道他們是什麼嗎？


前端是什麼？

前端泛指你目前所看到的畫面，例如：你目前正在使用網頁上的一切，通通可以稱做為前端。
前端也是提供畫面與你互動的最佳工具，不管是你所看到的畫面、按鈕、網拍或是動畫等等...
這些技術通稱為前端技術。

那麼，重點來了，AngularJS 是什麼？

AngularJS Logo

AngularJS 是一種基於 JavaScript 上的框架（Framework），由 Google 所開發與維護
其目的是透過 MVC 架構來使開發與測試變的容易許多。

*目前 Google 已經發行了 AgularJS 2.0，本篇只探討 AngularJS 1.0 的部分，敬請見諒。

AngularJS有什麼優點？

  • 好維護
  • 關注點分離（Separation of concerns）
  • 相依性注入（Dependency Injection）

基於本身的 MVC 架構，理所當然擁有 MVC 架構本身的優點，透過相依性注入，降低各程式之間的耦合性，達到好維護與關注點分離的優點。

AngularJS的特性是什麼？

  • 資料雙向綁定

透過 AngularJS 的 $scope 的協助，可以很輕鬆的讓使用者輸入的值（value）綁定到變數上，而當在使用者輸入時，可以立即的更新所有綁定相同變數的位置的資料。

如果不太懂字面上的意思，那麼我們直接來看程式。

Demo

Html
JavaScript
output

看到這邊，有寫過JavaScript的伙伴一定會有感覺

「JavaScript中居然不用寫程式！」
「JavaScript中居然不用寫程式！」
「JavaScript中居然不用寫程式！」（很重要說三次）


為什麼呢？


因為在 input 中掛上 ng-model 屬性，使得 input 的 value 利用 AngularJS 變數綁定起來
所以在 HTML 中使用 {{ AngularJS 變數 }} 來呈現相同的變數資料
因為 AngularJS的雙向綁定特性，使得 JavaScript 程式可以寫的非常精簡！

*小提示：在 HTML 中使用兩個中括號 {{}} 表示 AngularJS 的變數。

LiveDemo -- 此為上方程式的 Demo 程式，提供大家參考。

重點複習

  • AngularJS 由 Google 開發
  • AngularJS 優點：
    • 雙向綁定
    • 相依性注入
    • 好維護

那麼，我們下次見囉！

資料來源

張貼者： 於