視覺設計人員踏入Angular 到底對還是錯呢，我們繼續看下去。

1. 從前端設計角度
來看 Angular
Amos / 李建杭

2. • 五倍紅寶石兼職講師
• skillTree兼職講師
• CSS瘋狂手
• 新手Youtuber
• 熱血開發者
• Angular 新手
• 2019 iT鐵人賽雙鐵達成者
李建杭
Amos

3. 平面 to 網頁

4. 不同的
靜態變動態平面變介面 設計變系統

5. 相同的
類似的元素 部分相同的規格 基本的版面規則

6. 不同角色的需求
視覺 前端 後端

7. Angular 對我來說
全都要打指令 很多火星文 流程好多難以記憶

8. Angular 優點

9. 入門簡單快速
• 架構簡單
• 撰寫方式單純
• 具備視覺化工具

10. 小懂CSS即可學會
{ CSS 內容 }
[屬性選取]
{{ 印出變數值 }}
[屬性綁定]
( 事件綁定)
CSS語法 ng 語法

11. 快速模組化
• 拆解容易
• 修改維護容易
• 無CSS層級污染
• 模組複用性高

12. 轉換門檻

13. 那個心結…
• TypeScript 心結
• jQuery 心結
• 資料驅動畫面的概念
• 設計師的心結
• 運作原理
• 互動性
• 佈屬過程似乎不易理解

14. 助益

15. 轉換成本低 維護成本降低 開發效率提升

16. 效率

17. 再也不用…
• 前端將HTML轉樣版不再多一道流程
• 設計師隨時可以自己掌控樣版
• 設計師不用擔心東西被程式設計師改壞
• 東西好的給你，你弄壞了要我負責
• 不用背黑鍋

18. 設計/前端
怎麼 進入?

19. 安裝 Angular cli
npm install @angular/cli –g
你還需要有 node.js 喔

20. 三步驟即可建立專案
建立
專案
啟動
服務
開始
撰寫

21. 建立 Angular 專案
ng new projectName

22. 啟動 Angular 服務
ng serve

23. 或…建立 Angular component
ng g c componentName

24. 媽呀!
都是指令! 真是要我的命!

25. 改用 Angular console 吧
• 圖形化介面
• 步驟化操作模式
• 滑鼠點擊無痛使用

26. Angular console

27. Create
new workspace

28. Create
component

29. 基本資源
• 主要資料夾 src
• 元件資料夾 app
• 資源資料夾 assets
• 主頁 Index.html
• 主樣式檔 style.css

30. 乾淨的主頁結構
• 資料區域 <app-root>

31. ng serve 動態監聽超便利
• Watch file change
• Build
• Reload browser
• Start a web server

32. 看完以上…

33. 傳統作法
library.html
navbar card header footer

34. Angular / CSS 專案架構
src
app
元件資料夾 元件資料夾
assets
CSS JS img

35. 每個模組資料夾

36. 總結來說
• 增進團隊效率
• 展現個人價值
• 產值提升
• 成本降低

37. THANK YOU
我是 Amos

38. 相關圖示來源
• Webalys in iconfinder
• Graphiqa Stock in iconfinder
• Laura Reen in iconfinder
• Eezy in iconfinder
• Payungkead Imanong in iconfinder
• Paomedia in iconfinder