环境搭建

angular官网--搭建本地开发环境和工作空间
windows 10 搭建angular开发环境
免搭建环境 stackblitz-angular在线编辑代码&运行

---

Angular CLI 的更多信息，请参阅 CLI 概述
英雄指南教程
Angular CLI 工具--angular官方

---

环境

• node v12.14.1
• npm 6.13.4
• idea 2018.2.7

---

建议步骤

1:Angular 的工作区就是你开发应用所在的上下文环境。一个工作区包含一个或多个项目所需的文件。 每个项目都是一组由应用、库或端到端（e2e）测试组成的文件集合。

ng new angular-tour-of-heroes

2:启动应用服务器

cd angular-tour-of-heroes
ng serve --open
#进入工作区目录，并启动这个应用-会用浏览器打开
#默认是4200端口，可以在package.json修改 ng 部分的参数，如 "start": "ng serve"  修改---->"start": "ng serve --open"

启动应用服务器-会用浏览器打开 默认情况

3：用idea打开项目
idea/file/open --->选择项目文件夹
类似idea打开java web项目，也与android stuido 打开android 项目一致

idea运行

4:查看项目配置，并修改自动打开浏览器，和修改端口
项目配置文件package.json

#修改前
ng serve 
#修改后
ng serve --open --port 4201

修改端口

5：提交的gitee
在gitee上创建一个空项目
git clone 下载
把前面的代码复制到git clone 的目录（.git 和.idea目录不复制）

copy 代码 idea提交代码

6 创建组件--英雄列表

ng generate component heroes
#生成了 HeroesComponent 的四个文件

image.png

ng generate component hero-detail
ng generate service hero
ng generate component messages
ng generate service message
# 新版好像自动已经创建好了，不需要再创建
ng generate module app-routing --flat --module=app
ng generate component dashboard
#从 npm 中安装这个内存 Web API 包（译注：请使用 0.5+ 的版本，不要使用 0.4-）
npm install angular-in-memory-web-api --save
ng generate service InMemoryData

ng generate component hero-search

其他步骤更多请查阅官网

gitee代码按教程步骤提交

[angular-英雄指南]https://gitee.com/younghare/angular-tour-of-heroes