第零步:基礎(chǔ)語法
在學(xué)習(xí) Vue 之前叶洞,首先你需要掌握 Html CSS JavaScript 的基礎(chǔ)語法田篇。
第一步:Hello World
完成一個 hello world 似乎已經(jīng)成為學(xué)習(xí)編程的傳統(tǒng)。
可以參考angular文檔中的快速起步完成一個Hello World
第二步:npm
npm 是一個讓 JavaScript 程序員分享和復(fù)用代碼的工具兴革。 有了它绎晃,JS程序員能高效地管理和發(fā)布自己要分享的代碼。
我們接下來會經(jīng)常使用到 npm杂曲,為了提高 npm 在國內(nèi)的下載速度庶艾,可以選擇 cnpm 進(jìn)行代替。
npm install -g cnpm安裝成功后擎勘,以后可以使用 cnpm 代替 npm 命令咱揍。
第三步:Angular 基礎(chǔ)
請直接參考官方文檔完成開發(fā)指南
第四步:做個小項(xiàng)目
請完成 angular 網(wǎng)站中的英雄指南教程
第五步:RxJS
因?yàn)?angular 綁定了 RxJS,所以我們要進(jìn)一步學(xué)習(xí)它棚饵,主要是學(xué)習(xí)其中的編程思想煤裙。推薦文章讓我們一起來學(xué)習(xí) RxJS
第六步:ngRx/store
構(gòu)建復(fù)雜的 Angular 應(yīng)用(復(fù)雜的交互和數(shù)據(jù)),需要使用 ngRx/store 維護(hù)更多的狀態(tài)噪漾。參考文檔:
第七步:項(xiàng)目實(shí)戰(zhàn)
最好的學(xué)習(xí)方法就是實(shí)戰(zhàn)积暖,在做項(xiàng)目時(shí),遇到問題并解決問題怪与,不斷的補(bǔ)充新的知識。
如果你沒有項(xiàng)目在開發(fā)的話缅疟。此時(shí)推薦你找到一個開源項(xiàng)目分别,并為它增加一個新的頁面與功能遍愿。
附錄
在上面的步驟中,為了降低學(xué)習(xí)難度耘斩,是隱藏了一部分知識細(xì)節(jié)的沼填。
要想成為一名初級前端工程師,你應(yīng)該還需要認(rèn)真學(xué)習(xí)這些內(nèi)容:Webpack括授,ES6/7坞笙,F(xiàn)etch 等等。
進(jìn)階
在已經(jīng)初步學(xué)習(xí)了如何使用 angular 開發(fā)應(yīng)用后荚虚,這里有更多的內(nèi)容提升自己:
服務(wù)端渲染
前端性能分析
前端測試框架
單元測試
代碼優(yōu)化與壓縮
代碼分割與延遲加載
自己實(shí)現(xiàn) router
自己實(shí)現(xiàn)一個 MVVM 框架
node js
等等