Design with AngularJS

今天在 HappyDesigner Mini 分享會 #4 分享了這陣子用AngularJS的心得（投影片）。

簡單來說就是我覺得 AngularJS 幫我，作為一個網頁設計師，解決了設計網頁 UI 在實作時的兩大難題，一個是 JavaScript 很難，另一個是 animation 很難。

JavaScript 很難指的是用 JavaScript 去直接操控 DOM，真的是繁瑣又困難的工作。相對於 jQuery 對「DOM API」的包裝，AngularJS 則是對「DOM manipulate」的包裝，所以又更高階了一層。

舉例來說，我想要讓網頁上某個區塊只有在某個狀況顯示時，我只要寫

<div ng-show="hasWhatever"> ... </a>

當 hasWhatever 是true 時，這個 div 就會顯示，反之就不會顯示。幾乎是我想要什麼就寫什麼，很直覺。如果只有 jQuery，就要自己偵測狀況，根據狀況來下 .show() 跟 .hide() 。所以用 AngularJS（的directive）來寫 UI 真是輕鬆許多。

Animation很難的意思則是因為 CSS 除了:hover以外是沒有辦法對 transition/animation 進行觸發的，所以要讓一個 DOM 「動」起來的話，要用JavaScript 幫 DOM 加上css class。要怎麼在適當的時機新增／移除css class 又是一個難處了。而 AngularJS 的 ngAnimate 會幫你處理這件事情，在需要的時機加上css class。（.ng-enter, .ng-enter-active, ng-leave, ng-leave-active 等等）

因為 AngularJS 做 animation 真的很簡單，所以我也做了的一個CSS library，ng-trans.css。只要加入 ng-trans.css，就可以很輕鬆的在 DOM 被 AngularJS 加入或是移除的時刻加上動畫過場效果了，歡迎試用！