從前端設計的角度來看 Angular - TW2018 amos
Download as PPTX, PDF1 like959 views
本文讨论了Angular框架从前端设计的角度，强调其易于入门、快速开发的优点及模块化设计的便利。作者分享了安装和使用Angular的基本步骤，并指出设计师和开发者之间的协作效率提升。还提到使用Angular Console作为图形化操作工具，减少了使用指令的复杂性，提高了开发体验。
![小懂CSS即可學會
{ CSS 內容 }
[屬性選取]
{{ 印出變數值 }}
[屬性綁定]
( 事件綁定)
CSS語法 ng 語法](https://image.slidesharecdn.com/ng-tw2018-amos-upload-181116155719/85/Angular-TW2018-amos-10-320.jpg)
從前端設計的角度來看 Angular - TW2018 amos
- 1. 從前端設計角度 來看 Angular Amos / 李建杭
- 2. • 五倍紅寶石兼職講師 • skillTree兼職講師 • CSS瘋狂手 • 新手Youtuber • 熱血開發者 • Angular 新手 • 2019 iT鐵人賽雙鐵達成者 李建杭 Amos
- 3. 平面 to 網頁
- 7. Angular 對我來說 全都要打指令 很多火星文 流程好多難以記憶
- 8. Angular 優點
- 9. 入門簡單快速 • 架構簡單 • 撰寫方式單純 • 具備視覺化工具
- 10. 小懂CSS即可學會 { CSS 內容 } [屬性選取] {{ 印出變數值 }} [屬性綁定] ( 事件綁定) CSS語法 ng 語法
- 11. 快速模組化 • 拆解容易 • 修改維護容易 • 無CSS層級污染 • 模組複用性高
- 12. 轉換門檻
- 13. 那個心結… • TypeScript 心結 • jQuery 心結 • 資料驅動畫面的概念 • 設計師的心結 • 運作原理 • 互動性 • 佈屬過程似乎不易理解
- 14. 助益
- 16. 效率
- 17. 再也不用… • 前端將HTML轉樣版不再多一道流程 • 設計師隨時可以自己掌控樣版 • 設計師不用擔心東西被程式設計師改壞 • 東西好的給你，你弄壞了要我負責 • 不用背黑鍋
- 18. 設計/前端 怎麼 進入?
- 19. 安裝 Angular cli npm install @angular/cli –g 你還需要有 node.js 喔
- 21. 建立 Angular 專案 ng new projectName
- 22. 啟動 Angular 服務 ng serve
- 23. 或…建立 Angular component ng g c componentName
- 25. 改用 Angular console 吧 • 圖形化介面 • 步驟化操作模式 • 滑鼠點擊無痛使用
- 26. Angular console
- 28. Create component
- 29. 基本資源 • 主要資料夾 src • 元件資料夾 app • 資源資料夾 assets • 主頁 Index.html • 主樣式檔 style.css
- 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. 總結來說 • 增進團隊效率 • 展現個人價值 • 產值提升 • 成本降低
- 38. 相關圖示來源 • Webalys in iconfinder • Graphiqa Stock in iconfinder • Laura Reen in iconfinder • Eezy in iconfinder • Payungkead Imanong in iconfinder • Paomedia in iconfinder
Editor's Notes
- #2: 今天的重點其實是來做直銷的 今天不談扣 我們談如何推坑公司的視覺型前端 跳坑 Angular
- #4: 目前有很多的前端設計 不少都由平面設計師轉網頁設計 （有的舉手）
- #5: 主旨：講解平面設計走向介面設計跟系統化設計，並考量ＵＸ 視覺設計不是把網頁當平面設計在做 介面要考量的點更多，互動與操作更加不同 靜態畫面變成動態，ＲＷＤ的需求讓介面概念更加深刻 網頁設計本身走向系統化，模組化，讓管理維護更加簡單 平面設計除非走CIS，否則較無這種需求
- #6: 主旨：講解同樣都有一些雷同的特性在內 同樣都需要圖示設計 與企業識別系統依樣需要整體規格規劃 頁首/頁尾/文字資訊/標題層級架構
- #7: 主旨: 從不同角色去談每個人的需求差異點跟相同點 差異: 視覺設計 >> 出畫面，但不一定整合整個專案的設計規範(看公司啦) 前端 >> 切板&程式＆介接，開始訐譙設計師設計那什麼稿? 後端 >> 藏鏡人我跟他不熟 相同: 時間相同>>開發希望更快，時間有限，成本固定 希望更簡單>>組件化省時間 成本別增加>>維護成本都不希望變高
- #8: 主旨：初識ＮＧ的感覺，那種內心的苦痛感受
- #9: 認識了ＮＧ之後，我看到了他的優點
- #10: 其實沒有想像的困難與恐怖 層級簡單 模組化簡單 資料夾模組管理方式超方便 特定標籤讓識別跟管理都容易 排除命令列控制，其實提供了視覺介面讓操作更方便（後面介紹）
- #11: 一些語法跟CSS觀念相似
- #12: 統一app資料夾管理 修改簡單，ng serve 指令讓處理更快速 模組覆用性高 每個模組ng都會自動添加不重複的CSS選取語法 讓CSS污染降至超低
- #13: 大家擔心的問題 害怕的有哪些
- #14: TS（聽說很難/ 又要學新東西喔？學不完啦） （jQuery不能死！！！） （現今框架的主流概念） （跨不過那個命令操作的檻） （運作原理好像不易理解？） （資料驅動的畫面變化） （所有框架都是這樣）
- #16: 對自己本身的助益 ＃更加有競爭力（開發趨勢） ＃效率更高（節省更多自己的時間） ＃模組覆用性（讓自己不用每次都重新開發，SASS不也這樣？）
- #19: 這邊應該要講到15分鐘 進入到重點了，讓我們來看看
- #20: 先安裝ng cli 使用簡單的指令就能完成 ＣＬＩ是什麼？ Command Line Interface 簡單的說就是
- #22: 建立專案時，ng會把所有專案環境跟需要的資料全部幫你準備好 包括 ＃測試用的 ＃使用到的套件資料夾 ＃專案主頁面資料夾 ＃專案參數設定資料夾 還有更多
- #23: 建立專案時，ng會把所有專案環境跟需要的資料全部幫你準備好 包括 ＃測試用的 ＃使用到的套件資料夾 ＃專案主頁面資料夾 ＃專案參數設定資料夾 還有更多
- #24: 建立專案時，ng會把所有專案環境跟需要的資料全部幫你準備好 包括 ＃測試用的 ＃使用到的套件資料夾 ＃專案主頁面資料夾 ＃專案參數設定資料夾 還有更多
- #27: 在此介面建立與開啟專案
- #28: 建立專案
- #29: 建立組件
- #31: 每個組件都有一個模組標籤 識別簡單
- #32: 釋放你的 F5
- #33: 有沒有感覺口號很直銷？ 有沒有想到怎麼推坑你的同事？
- #35: 介紹每個模組結構 Assets 共用檔案 App子層資料夾就是一個個模組，內含多個檔案
- #36: 只要以資料夾作為管理即可，未來要複用也方便許多。 每個組件被動態置入頁面之中時，會自動添加特定class名稱（以屬性選取器方式） 減少ＣＳＳ污染
- #37: 其實不管是採用任何方式都是