iT邦幫忙

2023 iThome 鐵人賽

DAY 1
0
Modern Web

從0開始的的Angular站台架設-Stnadalone 系列 第 1

D0 從0開始的的Angular站台架設-Stnadalone

  • 分享至 

  • xImage
  •  

首先我必須開宗明義地說,本次的Angular@16-Standalone開發模式分享更加傾向於一種實戰心得分享
舉個例子來說就是一個新兵幸運蛋子分享自己如何在戰場上活下來的偏方信仰XD
https://ithelp.ithome.com.tw/upload/images/20230910/2016203138MV1czefC.png
讚美歐姆賽尼亞.jpg


所以這個鐵人賽系列的文章在側重層面上將聚焦於如何實戰與實作。
而主要面相的群體會是如下3種人:

  1. 有一定基礎JS基礎/前端框架基礎想要學習Angular框架
  2. 做為C#後端工程師想要了解Angular
  3. 各路大神想要看看這個小傢伙要怎麼說天花亂墜的胡言亂語

當然最主要最主要的是想要寫給當初剛踏進前端領域的自己,一本關於如何用Angular進行前端系統的開發指南。

網路上各式各樣的大神(繁中圈必定了解到的保哥、Mike)給予的資料其實是非常鞭辟入裡的,但一開始語感以及程式感並沒有尚未養成起來的時侯,人生三大疑問經常不斷地在嘗試與探索中的過程中轟炸我們的學習熱情-特別是在被學業壓力、家庭壓力與工作壓力的聯手逼迫,到最後可能只好放棄這段開啟新世界的門票。

所以在這30天內,我將會以前端系統建置與環境、前端系統資料流管理、雲端上線的三大現今前端工程師必備的基礎能力進行分享。
最終目標是可以將這張五月花船票遞給當初面對各路大神資料卻不得其門而入的自己,得以實作出一個電商線上網站 (顧客瀏覽顯示前台/店家上架後台/系統商數據監測平台)。

詳細架構如下,內容可能會有變動,增加是正常的,減少可能有點難XD

  1. System Basement
    1.1 nvm, node, Angular-cli
    1.2 git, github, github
    1.3 base v.s. Standalone的開發思路的不同
    1.4 Angular 系統設計思維與層級劃分
    1.5 css,scss,Tailwindcss與RWD
    1.6 ngIf, ngFor, ngSwitchCase, [hidden], ngClass, ngStyle, Pipe淺析
    1.7 input, output 以及為何不建議使用自定義標籤(雙向綁定與單資料流更新)
  2. System Data management
    2.1 rxjs的資料流管理
    2.2 SD資料流思維-辨別什麼資料該即時同步與什麼資料需要儲存在系統底層共用
    2.3 透過Service控制所有資料狀態
    2.4 Action => Effect => Reducer
  3. System CI/CD
    3.1 Github action
    3.2 AWS EC2
    那麼接下來就跟著一個幸運的小小兵一起踏入到前端開發的世界中吧!

開發所需工具
VisualStudioCode


下一篇
D1 什麼是Node.js與不同的專案環境如何管理
系列文
從0開始的的Angular站台架設-Stnadalone 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言