Angular实战项目（1）
Angular 打造企业级协作平台
[外链图片转存失败(img-J0HrPiEG-1563902660799)(https://upload-images.jianshu.io/upload_images/11158618-485991cdaec3c55e?imageMogr2/auto-orient/strip)]
环境搭建，Material UI，动画，Angular核心概念，RxJS操作符，Angular中的响应式编程，Redux，自动化测试
实战驱动，主题，设计模式，打造对应功能，穿插优秀实践
敏捷的开发思想，解决问题的方法和思路，设计模式和最佳实践
任务的分组，项目的分配，任务的状态跟踪
[外链图片转存失败(img-eQG8Vv06-1563902660801)(https://upload-images.jianshu.io/upload_images/11158618-84f86c39bf344556.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-mp1ZaGej-1563902660802)(https://upload-images.jianshu.io/upload_images/11158618-f3f21bbe6fde4fa8.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-7JWafsvu-1563902660804)(https://upload-images.jianshu.io/upload_images/11158618-8afbdc61d34dbf28.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-UWOw15Tq-1563902660813)(https://upload-images.jianshu.io/upload_images/11158618-0d36a786ea2a57f3.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-znKHBuG0-1563902660814)(https://upload-images.jianshu.io/upload_images/11158618-3e3abd89e5ee64a0.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-Bjp5Odh7-1563902660817)(https://upload-images.jianshu.io/upload_images/11158618-8f3241d55868d4c0.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-0WvKxEYN-1563902660818)(https://upload-images.jianshu.io/upload_images/11158618-2e6cdbbabe893a54.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-k7Il2ylG-1563902660819)(https://upload-images.jianshu.io/upload_images/11158618-baf27c7825d82e29.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-AECzzI0a-1563902660820)(https://upload-images.jianshu.io/upload_images/11158618-a23a9e2334043b95.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-oC59lEkS-1563902660824)(https://upload-images.jianshu.io/upload_images/11158618-1b2ce89898bd657f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-CqiyP619-1563902660826)(https://upload-images.jianshu.io/upload_images/11158618-9b62ce44ff675c4a.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-lFzxNvS2-1563902660826)(https://upload-images.jianshu.io/upload_images/11158618-0e2ce3ec700f8f70.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-lYDf3zlI-1563902660828)(https://upload-images.jianshu.io/upload_images/11158618-51ec1529bbffc29d.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-3c016Dqh-1563902660830)(https://upload-images.jianshu.io/upload_images/11158618-53ab2fe2872135c0.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-jvBKCtGV-1563902660831)(https://upload-images.jianshu.io/upload_images/11158618-b149dae7bd298d6e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-6yzIL09Z-1563902660833)(https://upload-images.jianshu.io/upload_images/11158618-df9b53203bdc71a5.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-rjiFjdjm-1563902660842)(https://upload-images.jianshu.io/upload_images/11158618-834509804bd53c8c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-elvqorig-1563902660843)(https://upload-images.jianshu.io/upload_images/11158618-41ba75db3045e33f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-eSPfyz2w-1563902660845)(https://upload-images.jianshu.io/upload_images/11158618-e7a6b7a6fe9a4258.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-M2SwLGbg-1563902660847)(https://upload-images.jianshu.io/upload_images/11158618-cd016059fa67c980.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-lwjzsja6-1563902660848)(https://upload-images.jianshu.io/upload_images/11158618-b9ec4752ea919e0f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-6ubOpY4C-1563902660849)(https://upload-images.jianshu.io/upload_images/11158618-5afacb17f6963b0f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-ehOGybRg-1563902660851)(https://upload-images.jianshu.io/upload_images/11158618-af6a3e83e4ce0e54.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-x129Oghq-1563902660854)(https://upload-images.jianshu.io/upload_images/11158618-b05ef93c9ae7a1ee.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-z1TRMLvQ-1563902660857)(https://upload-images.jianshu.io/upload_images/11158618-cb2e6e4cc5d2a2f6.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
环境搭建
安装node
node --version
node -> npm -> angular CLI
安装node.js的目的是使用npm管理项目依赖的软件包
由于网络环境原因，cnpm和yarn作为替代的包管理工具
https://npm.taobao.org
[外链图片转存失败(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
[外链图片转存失败(img-KXxwhAbY-1563902660859)(https://upload-images.jianshu.io/upload_images/11158618-ce7f702a37e0046b.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
使用angular cli使我们无需理会复杂的配置，更加专注Angualr。
VSCode的配置
Debug+Angular 2 + Snippets
配置Debuffer for Chrome使VSC可以Debug Angular应用
[外链图片转存失败(img-Em6jjb2n-1563902660861)(https://upload-images.jianshu.io/upload_images/11158618-12061f57838e1e63.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
使用Angular2 + Snippets 的一些快捷模板
[外链图片转存失败(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/
[外链图片转存失败(img-sw11DErT-1563902660867)(https://upload-images.jianshu.io/upload_images/11158618-074a8fcce8798042.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-0i23mbU3-1563902660869)(https://upload-images.jianshu.io/upload_images/11158618-ffb12fdba115d02d.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
elgalmkoelokbchhkhacckoklkejnhcd
[外链图片转存失败(img-bY1UaO65-1563902660873)(https://upload-images.jianshu.io/upload_images/11158618-02128a98a9fa450d.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-o2u55Xuo-1563902660874)(https://upload-images.jianshu.io/upload_images/11158618-1dc98ba64f91d1f7.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-Y2bkCmzh-1563902660876)(https://upload-images.jianshu.io/upload_images/11158618-335698beddacbe28.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(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 包名：软件依赖
npm i --save-dev 包名：开发依赖
[外链图片转存失败(img-E7SEQuLB-1563902660881)(https://upload-images.jianshu.io/upload_images/11158618-7be781d5e30b4315.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
软件真正运行时的依赖是在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
[外链图片转存失败(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
[外链图片转存失败(img-azNRzyBQ-1563902660886)(https://upload-images.jianshu.io/upload_images/11158618-d3d780f2fa9dd244.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-h2kzijQq-1563902660890)(https://upload-images.jianshu.io/upload_images/11158618-6d2e0b0d23b133fa.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-NMni9SxH-1563902660891)(https://upload-images.jianshu.io/upload_images/11158618-5a487ecb770acea0.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-vmeWOW3B-1563902660894)(https://upload-images.jianshu.io/upload_images/11158618-f1e11b4fe8f96acf.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-iJw0bLZa-1563902660897)(https://upload-images.jianshu.io/upload_images/11158618-432cc0c6276fdc61.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
启动
json-server /JSON文件位于的目录/data.json
支持GET,POST,PUT,PATCH,DELETE等Rest命令
测试REST API
使用Postman测试常用的api
[外链图片转存失败(img-f1XVc2Zl-1563902660899)(https://upload-images.jianshu.io/upload_images/11158618-2b86e012cf5ccb85.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-2uDkwjtv-1563902660901)(https://upload-images.jianshu.io/upload_images/11158618-fd2316a4a9d2464e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-PZUvXCI5-1563902660904)(https://upload-images.jianshu.io/upload_images/11158618-8816f22181bda8e7.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-uxnueWpL-1563902660905)(https://upload-images.jianshu.io/upload_images/11158618-7669d1a3c69389d5.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
JSON文件相当于数据库
使用VSCode的REST Client插件
[外链图片转存失败(img-2Mfj2JI4-1563902660908)(https://upload-images.jianshu.io/upload_images/11158618-357f3656bbd2f2b2.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
常见问题解决错误
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli
如果安装出错以上重试
若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达叔小生的简书！
这是一个有质量，有态度的博客
[外链图片转存失败(img-bIfba42H-1563902660909)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
Angular实战项目（1）的更多相关文章
- React+Redux开发实战项目【美团App】，没你想的那么难
README.md 前言 开始学习React的时候,在网上找了一些文章,读了官网的一些文档,后来觉得React上手还是蛮简单的, 然后就在网上找了一个React实战的练手项目,个人学完之后觉得这个项目 ...
- .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用
写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
- 强烈推荐 GitHub 上值得前端学习的开源实战项目
强烈推荐 GitHub 上值得前端学习的开源实战项目. Vue.js vue-element-admin 是一个后台前端解决方案,它基于和 element-ui 实现 基于 iView 的 Vue 2 ...
- Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录
一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...
- Python实战项目网络爬虫 之 爬取小说吧小说正文
本次实战项目适合,有一定Python语法知识的小白学员.本人也是根据一些网上的资料,自己摸索编写的内容.有不明白的童鞋,欢迎提问. 目的:爬取百度小说吧中的原创小说<猎奇师>部分小说内容 ...
- Linux系统实战项目——sudo日志审计
Linux系统实战项目——sudo日志审计 由于企业内部权限管理启用了sudo权限管理,但是还是有一定的风险因素,毕竟运维.开发等各个人员技术水平.操作习惯都不相同,也会因一时失误造成误操作,从而 ...
- android经典实战项目视频教程下载
注:这是一篇转载的文章,原文具体链接地址找不到了,将原文分享如下,希望能对看到的朋友有所帮助! 最近在学习android应用方面的技术,自己在网上搜集了一些实战项目的资料,感觉挺好的,发布出来跟大伙分 ...
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...
- vue+websocket+express+mongodb实战项目（实时聊天）
继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...
随机推荐
- ElasticSerach 6.x的安装及配置
1.准备工作 安装Centos7.建议内存2G以上.安装java1.8环境,固定IP地址,本文省略. 2.ElasticSerach单机安装 1) 创建/opt/es目录,存放文件ElasticSer ...
- ESP8266 智能家居简单实现
本文转自CSDN,地址 https://blog.csdn.net/jsagacity/article/details/78531819 全文如下 : 前段时间,公司利用 ESP8266 这个WiFi ...
- 【转载】 C#使用Math.Abs返回数值的绝对值
在C#的数值运算中,有时候我们需要计算值类型对象的绝对值,此时需要用到C#的数值计算类Math类中的Abs绝对值函数,Math.Abs绝对值函数一共有7个重载类型,支持decimal.double.f ...
- django路由的反向解析
什么是路由的反向解析 我们的路由都是一个匹配关系,对应一个处理的视图函数, 如果我们的匹配关系发生了变化,那么与之对应的访问地址(可能前端直接url链接, 也可能是后端的redrict跳转)都需要跟着 ...
- DDL 操作数据库
DDL 操作数据库:常用的操作 CRUD 一.C(create)创建 1.创建数据库 create database 数据库名称; 2.创建数据库,判断是否存在,再创建(如果存在,就不再创建) cre ...
- Microsoft Compiled HTML Help / Uncompiled .chm File XML External Entity
[+] Credits: John Page (aka hyp3rlinx) [+] Website: hyp3rlinx.altervista.org[+] Source: http://hyp3 ...
- Python学习日记(八) 函数
函数的结构: 函数的返回值: 1.当函数执行时运到return关键字将不再往下执行 def func(): print("hello world!") print("he ...
- grpc的简单用例 (golang实现)
这个用例的逻辑很简单, 服务器运行一个管理个人信息的服务, 提供如下的四个服务: (1) 添加一个个人信息 注: 对应于Unary RPCs, 客户端发送单一消息给服务器, 服务器返回单一消息 (2) ...
- php基本数据类型
trim()函数,用于去除字符串首尾空格和特殊字符返回的是去掉的空格和特殊字符后的字符串 string trim(string str [,string charlist]); str 要操作的字符串 ...
- linux kernel相关学习资料的收集与周边
<<linux内核设计与实现>>读了一遍.穿线作用比较好. 收获一个网站,和三本书 https://kernelnewbies.org/ https://book.douban ...