本文將探索如何創(chuàng)建一個(gè)文件上傳組件。
本文的主要內(nèi)容是翻譯自 Create file upload component 這篇博文规阀。本文將在該博文的基礎(chǔ)上恒序，加入自己的理解，羅列出開(kāi)發(fā)過(guò)程中所用到的所有知識(shí)點(diǎn)谁撼。
最終歧胁，我希望可以開(kāi)發(fā)出一款比博文中的例子功能更豐富，更易使用的自定義組件厉碟，并打包成npm包上傳喊巍。
整個(gè)開(kāi)發(fā)過(guò)程包括完整的前端和后端兩部分，前端部分將使用Angluar5來(lái)實(shí)現(xiàn)文件上傳組件的開(kāi)發(fā)箍鼓，后端部分將使用node來(lái)接收前端發(fā)送的文件并進(jìn)行相應(yīng)處理崭参。本節(jié)的主要內(nèi)容是：
- 創(chuàng)建項(xiàng)目
- 安裝依賴(lài)
- 配置
首先，我們先來(lái)完成前端文件上傳組件的開(kāi)發(fā)款咖。
- 執(zhí)行下列命令何暮，使用AngularCLI生成項(xiàng)目
ng new file-uploader
- 我們選擇Angular Material UI庫(kù)作為我們的UI組件，可以在這里查閱相關(guān)文檔與教程铐殃。執(zhí)行下列命令安裝該組件海洼。
npm install --save @angular/material @angular/cdk
- 某些Angular Material UI庫(kù)內(nèi)的組件要用到Angular animations module來(lái)實(shí)現(xiàn)動(dòng)畫(huà)，例如模態(tài)對(duì)話(huà)框的彈出效果等富腊。執(zhí)行下列命令來(lái)安裝Angular animations module坏逢。
npm install --save @angular/animations
- 至此，開(kāi)發(fā)文件上傳組件的所有依賴(lài)包都已經(jīng)安裝完成赘被。最后是整，為了能夠使用Material提供的樣式支持，我們需要引入Material的樣式主題文件民假。這里贰盗，我們使用Material提供的主題即可。在項(xiàng)目的style.css文件中阳欲，添加下列代碼。
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
配置到此結(jié)束，我將在后面的章節(jié)開(kāi)始擼代碼球化。
