Angular 打造企業(yè)級(jí)協(xié)作平臺(tái)
[外鏈圖片轉(zhuǎn)存失敗(img-J0HrPiEG-1563902660799)(https://upload-images.jianshu.io/upload_images/11158618-485991cdaec3c55e?imageMogr2/auto-orient/strip)]

環(huán)境搭建，Material UI，動(dòng)畫(huà)，Angular核心概念，RxJS操作符，Angular中的響應(yīng)式編程，Redux，自動(dòng)化測(cè)試

實(shí)戰(zhàn)驅(qū)動(dòng)，主題，設(shè)計(jì)模式，打造對(duì)應(yīng)功能，穿插優(yōu)秀實(shí)踐

敏捷的開(kāi)發(fā)思想，解決問(wèn)題的方法和思路，設(shè)計(jì)模式和最佳實(shí)踐

任務(wù)的分組，項(xiàng)目的分配，任務(wù)的狀態(tài)跟蹤

[外鏈圖片轉(zhuǎn)存失敗(img-eQG8Vv06-1563902660801)(https://upload-images.jianshu.io/upload_images/11158618-84f86c39bf344556.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-mp1ZaGej-1563902660802)(https://upload-images.jianshu.io/upload_images/11158618-f3f21bbe6fde4fa8.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-7JWafsvu-1563902660804)(https://upload-images.jianshu.io/upload_images/11158618-8afbdc61d34dbf28.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-UWOw15Tq-1563902660813)(https://upload-images.jianshu.io/upload_images/11158618-0d36a786ea2a57f3.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-znKHBuG0-1563902660814)(https://upload-images.jianshu.io/upload_images/11158618-3e3abd89e5ee64a0.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-Bjp5Odh7-1563902660817)(https://upload-images.jianshu.io/upload_images/11158618-8f3241d55868d4c0.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-0WvKxEYN-1563902660818)(https://upload-images.jianshu.io/upload_images/11158618-2e6cdbbabe893a54.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-k7Il2ylG-1563902660819)(https://upload-images.jianshu.io/upload_images/11158618-baf27c7825d82e29.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-AECzzI0a-1563902660820)(https://upload-images.jianshu.io/upload_images/11158618-a23a9e2334043b95.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-oC59lEkS-1563902660824)(https://upload-images.jianshu.io/upload_images/11158618-1b2ce89898bd657f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-CqiyP619-1563902660826)(https://upload-images.jianshu.io/upload_images/11158618-9b62ce44ff675c4a.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-lFzxNvS2-1563902660826)(https://upload-images.jianshu.io/upload_images/11158618-0e2ce3ec700f8f70.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-lYDf3zlI-1563902660828)(https://upload-images.jianshu.io/upload_images/11158618-51ec1529bbffc29d.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-3c016Dqh-1563902660830)(https://upload-images.jianshu.io/upload_images/11158618-53ab2fe2872135c0.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-jvBKCtGV-1563902660831)(https://upload-images.jianshu.io/upload_images/11158618-b149dae7bd298d6e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-6yzIL09Z-1563902660833)(https://upload-images.jianshu.io/upload_images/11158618-df9b53203bdc71a5.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-rjiFjdjm-1563902660842)(https://upload-images.jianshu.io/upload_images/11158618-834509804bd53c8c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-elvqorig-1563902660843)(https://upload-images.jianshu.io/upload_images/11158618-41ba75db3045e33f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-eSPfyz2w-1563902660845)(https://upload-images.jianshu.io/upload_images/11158618-e7a6b7a6fe9a4258.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-M2SwLGbg-1563902660847)(https://upload-images.jianshu.io/upload_images/11158618-cd016059fa67c980.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-lwjzsja6-1563902660848)(https://upload-images.jianshu.io/upload_images/11158618-b9ec4752ea919e0f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-6ubOpY4C-1563902660849)(https://upload-images.jianshu.io/upload_images/11158618-5afacb17f6963b0f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-ehOGybRg-1563902660851)(https://upload-images.jianshu.io/upload_images/11158618-af6a3e83e4ce0e54.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-x129Oghq-1563902660854)(https://upload-images.jianshu.io/upload_images/11158618-b05ef93c9ae7a1ee.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-z1TRMLvQ-1563902660857)(https://upload-images.jianshu.io/upload_images/11158618-cb2e6e4cc5d2a2f6.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

環(huán)境搭建
安裝node

node --version

node -> npm -> angular CLI
安裝node.js的目的是使用npm管理項(xiàng)目依賴(lài)的軟件包

由于網(wǎng)絡(luò)環(huán)境原因，cnpm和yarn作為替代的包管理工具

https://npm.taobao.org
[外鏈圖片轉(zhuǎn)存失敗(img-OV8qhwtz-1563902660858)(https://upload-images.jianshu.io/upload_images/11158618-5ae7c49eb221a67a.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

npm i -g cnpm

npm i -g @angular/cli

ng --version
[外鏈圖片轉(zhuǎn)存失敗(img-KXxwhAbY-1563902660859)(https://upload-images.jianshu.io/upload_images/11158618-ce7f702a37e0046b.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

使用angular cli使我們無(wú)需理會(huì)復(fù)雜的配置，更加專(zhuān)注Angualr。

VSCode的配置
Debug+Angular 2 + Snippets
配置Debuffer for Chrome使VSC可以Debug Angular應(yīng)用

[外鏈圖片轉(zhuǎn)存失敗(img-Em6jjb2n-1563902660861)(https://upload-images.jianshu.io/upload_images/11158618-12061f57838e1e63.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

使用Angular2 + Snippets 的一些快捷模板
[外鏈圖片轉(zhuǎn)存失敗(img-oNSrfMLT-1563902660863)(https://upload-images.jianshu.io/upload_images/11158618-01e57ed68727deb7.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

Chrome安裝Angury插件
chrome://extensions/

https://chrome-extension-downloader.com/
[外鏈圖片轉(zhuǎn)存失敗(img-sw11DErT-1563902660867)(https://upload-images.jianshu.io/upload_images/11158618-074a8fcce8798042.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-0i23mbU3-1563902660869)(https://upload-images.jianshu.io/upload_images/11158618-ffb12fdba115d02d.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

elgalmkoelokbchhkhacckoklkejnhcd
[外鏈圖片轉(zhuǎn)存失敗(img-bY1UaO65-1563902660873)(https://upload-images.jianshu.io/upload_images/11158618-02128a98a9fa450d.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-o2u55Xuo-1563902660874)(https://upload-images.jianshu.io/upload_images/11158618-1dc98ba64f91d1f7.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-Y2bkCmzh-1563902660876)(https://upload-images.jianshu.io/upload_images/11158618-335698beddacbe28.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-V3GIzMuc-1563902660879)(https://upload-images.jianshu.io/upload_images/11158618-a4652c9ab00676b3.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

npm + ng

npm i --save 包名：軟件依賴(lài)
npm i --save-dev 包名：開(kāi)發(fā)依賴(lài)

[外鏈圖片轉(zhuǎn)存失敗(img-E7SEQuLB-1563902660881)(https://upload-images.jianshu.io/upload_images/11158618-7be781d5e30b4315.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

軟件真正運(yùn)行時(shí)的依賴(lài)是在dependencies
軟件開(kāi)發(fā)過(guò)程中devDependencies

ng new 項(xiàng)目名
新建angular項(xiàng)目

建議使用這個(gè)命令，可以?xún)?yōu)化壓縮等
ng build -prod
生成環(huán)境編譯
不建議使用ng build

ng serve
啟動(dòng)開(kāi)發(fā)服務(wù)器

Mock Rest API

json-server:用于快速搭建REST API的利器

安裝npm i -g json-server

npm install -g json-server

[外鏈圖片轉(zhuǎn)存失敗(img-Po7HOads-1563902660884)(https://upload-images.jianshu.io/upload_images/11158618-1a9aea4b32fd3f08.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

ng/taskmgr json-server ./mock/data.json

[外鏈圖片轉(zhuǎn)存失敗(img-azNRzyBQ-1563902660886)(https://upload-images.jianshu.io/upload_images/11158618-d3d780f2fa9dd244.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-h2kzijQq-1563902660890)(https://upload-images.jianshu.io/upload_images/11158618-6d2e0b0d23b133fa.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-NMni9SxH-1563902660891)(https://upload-images.jianshu.io/upload_images/11158618-5a487ecb770acea0.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-vmeWOW3B-1563902660894)(https://upload-images.jianshu.io/upload_images/11158618-f1e11b4fe8f96acf.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-iJw0bLZa-1563902660897)(https://upload-images.jianshu.io/upload_images/11158618-432cc0c6276fdc61.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

啟動(dòng)
json-server /JSON文件位于的目錄/data.json

支持GET,POST,PUT,PATCH,DELETE等Rest命令

測(cè)試REST API
使用Postman測(cè)試常用的api
[外鏈圖片轉(zhuǎn)存失敗(img-f1XVc2Zl-1563902660899)(https://upload-images.jianshu.io/upload_images/11158618-2b86e012cf5ccb85.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-2uDkwjtv-1563902660901)(https://upload-images.jianshu.io/upload_images/11158618-fd2316a4a9d2464e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-PZUvXCI5-1563902660904)(https://upload-images.jianshu.io/upload_images/11158618-8816f22181bda8e7.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外鏈圖片轉(zhuǎn)存失敗(img-uxnueWpL-1563902660905)(https://upload-images.jianshu.io/upload_images/11158618-7669d1a3c69389d5.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

JSON文件相當(dāng)于數(shù)據(jù)庫(kù)
使用VSCode的REST Client插件

[外鏈圖片轉(zhuǎn)存失敗(img-2Mfj2JI4-1563902660908)(https://upload-images.jianshu.io/upload_images/11158618-357f3656bbd2f2b2.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

常見(jiàn)問(wèn)題解決錯(cuò)誤

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/cli
如果安裝出錯(cuò)以上重試

---

若本號(hào)內(nèi)容有做得不到位的地方（比如：涉及版權(quán)或其他問(wèn)題），請(qǐng)及時(shí)聯(lián)系我們進(jìn)行整改即可，會(huì)在第一時(shí)間進(jìn)行處理。

---

請(qǐng)點(diǎn)贊！因?yàn)槟銈兊馁澩?鼓勵(lì)是我寫(xiě)作的最大動(dòng)力！

歡迎關(guān)注達(dá)叔小生的簡(jiǎn)書(shū)！

這是一個(gè)有質(zhì)量，有態(tài)度的博客

[外鏈圖片轉(zhuǎn)存失敗(img-bIfba42H-1563902660909)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

總結(jié)

以上是生活随笔為你收集整理的Angular实战项目（1）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。