创建Angular项目及常用命令

一、 准备工作

1.首先需要安装node.js&＃xff0c;查看node.js和npm版本&＃xff0c;若能显示版本号说明安装成功&＃xff08;附&＃xff1a;nodejs安装教程&＃xff09;

2.安装angular脚手架

# 全局安装
npm install -g &＃64;angular/cli


安装完成后使用ng --version查看版本号&＃xff0c;显示版本号则证明安装成功&＃xff08;当前版本&＃xff1a;12.2.1&＃xff09;

二、命令介绍

1.创建项目

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


示例&＃xff1a;创建一个名为project01的angular项目

2.创建组件

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


示例&＃xff1a;在app目录下的components文件夹中新建一个home组件&＃xff08;没有components文件夹时会自动新建components文件夹&＃xff09;

ng g c components/home


3.创建服务

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


示例&＃xff1a;在app目录下的services文件夹中新建一个http服务&＃xff08;没有services文件夹时会自动新建services文件夹&＃xff09;

ng g s services/http


4.创建模块

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


示例&＃xff1a;在app目录下的modules文件夹中新建一个registry模块&＃xff08;没有modules文件夹时会自动新建modules文件夹&＃xff09;并创建对应的registry模块

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


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

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


5.常用命令总结

• 构建的组件都会使用自用目录,除非使用 --flat 单独指定
• 构建的模块可使用 --routing 同时创建对应模块的路由

6.library命令注意事项

ng g library tables


使用library命令&＃xff0c;会创建一个projects文件目录&＃xff0c;tables库会出现在该目录中

在angular.json文件&＃xff0c;projects会对应增加tables库的配置项。

newProjectRoot默认值是projects&＃xff0c;也就是命令生成的library都会放在这个projects目录&＃xff0c;我们可以修改这个值&＃xff0c;下次使用命令生成library就会对应放在我们指定的目录中。

projectType用来区别application和library类型。

在package.json配置scripts&＃xff0c;使用npm run build:tables命令打包对应的库。