Angular实战项目（1）

Angular 打造企业级协作平台

image

环境搭建，Material UI，动画，Angular核心概念，RxJS操作符，Angular中的响应式编程，Redux，自动化测试

实战驱动，主题，设计模式，打造对应功能，穿插优秀实践

敏捷的开发思想，解决问题的方法和思路，设计模式和最佳实践

任务的分组，项目的分配，任务的状态跟踪

image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png

环境搭建
安装node

node --version

node -> npm -> angular CLI
安装node.js的目的是使用npm管理项目依赖的软件包

由于网络环境原因，cnpm和yarn作为替代的包管理工具

https://npm.taobao.org

image.png

npm i -g cnpm

npm i -g @angular/cli

ng --version

image.png

使用angular cli使我们无需理会复杂的配置，更加专注Angualr。

VSCode的配置
Debug+Angular 2 + Snippets
配置Debuffer for Chrome使VSC可以Debug Angular应用

image.png

使用Angular2 + Snippets 的一些快捷模板

image.png

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

https://chrome-extension-downloader.com/

image.png image.png

elgalmkoelokbchhkhacckoklkejnhcd

image.png image.png image.png image.png

npm + ng

npm i --save 包名：软件依赖
npm i --save-dev 包名：开发依赖

image.png

软件真正运行时的依赖是在dependencies
软件开发过程中devDependencies

ng new 项目名
新建angular项目

建议使用这个命令，可以优化压缩等
ng build -prod
生成环境编译
不建议使用ng build

ng serve
启动开发服务器

Mock Rest API

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

安装npm i -g json-server

npm install -g json-server

image.png

ng/taskmgr <master> json-server ./mock/data.json

image.png image.png image.png image.png image.png

启动
json-server /JSON文件位于的目录/data.json

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

测试REST API
使用Postman测试常用的api

image.png image.png image.png image.png

JSON文件相当于数据库
使用VSCode的REST Client插件

image.png

常见问题解决错误

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/cli
如果安装出错以上重试

---

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

---

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达叔小生的简书！

这是一个有质量，有态度的博客

博客