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 如果安装出错以上重试

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