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 如果安装出错以上重试
若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。