创建Angular项目及常用命令

一、准备工作

1.首先需要安装node.js，查看node.js和npm版本，若能显示版本号说明安装成功（附：）
创建Angular项目及常用命令-小白菜博客
2.安装angular脚手架

# 全局安装
npm install -g @angular/cli

安装完成后使用ng --version查看版本号，显示版本号则证明安装成功（当前版本：12.2.1）

二、命令介绍

1.创建项目

# 创建angular项目
ng new <项目名称>
# 创建带有路由，样式为less，不自动安装依赖的angular项目，后续需要手动npm install安装依赖
ng new <项目名称> --routing --style=less --skip-install
# 若创建项目时没有使用--routing，可以使用以下命令添加根路由
ng g m app-routing --flat --module=app
# 使用--createApplication=false 不会创建根应用，也就是不会有初始化的src目录，包括app.component等文件
ng new <项目名称> --createApplication=false

示例：创建一个名为project01的angular项目

2.创建组件

# 创建angular组件，组件名称前面可添加路径
ng generate component <组件名称>
# 简写
ng g c <组件名称>

示例：在app目录下的components文件夹中新建一个home组件（没有components文件夹时会自动新建components文件夹）

ng g c components/home

3.创建服务

# 创建angular服务，服务名称前面可添加路径
ng generate service <服务名称>
# 简写
ng g s <服务名称>

示例：在app目录下的services文件夹中新建一个http服务（没有services文件夹时会自动新建services文件夹）

ng g s services/http

4.创建模块

# 创建angular模块，模块名称前面可添加路径
ng generate module <模块名称>
# 简写
ng g m <模块名称>

示例：在app目录下的modules文件夹中新建一个registry模块（没有modules文件夹时会自动新建modules文件夹）并创建对应的registry模块

# 这里使用--routing 可以创建对应模块的路由
ng g m modules/registry --routing
# 若没有使用--routing，可以使用以下命令添加对应模块的路由路由
ng g m modules/registry/registry-routing --flat --module=./registry

创建完模块后，可以接着创建对应模块的功能点，如组件，服务等

ng g c modules/registry
ng g c modules/registry/components/hello

5.常用命令总结

命令	描述
ng generate <type> [options]	在项目中构建新代码
ng g <type的首字母> [options]	简写

支持的类型	用法
component	ng g c <组件名称>
service	ng g s <服务名称>
module	ng g m <模块名称>
pipe	ng g p <管道名称>
directive	ng g d <指令名称>
interface	ng g i <接口名称>
enum	ng g e <枚举名称>
class	ng g c <类型名称> （注：该命令功能与component相同）
guard	ng g g <路由守卫名称>
interceptor	ng g interceptor <拦截器名称> （注：这里interceptor无法简写成i，因为会被识别为接口
library	ng g library <库名称> （注：这里名称就是单独的库名称，名称前面无法指定路径，且library无法简写）