UP | HOME

Angular 命令行工具

Table of Contents

1 配置环境

Angular 是一个 Google 推出的新一代 Web 前端框架,其优点就不需要我详细叙述了, 指的一提的是,在 Angular 官网上有启动 Angular 项目的教程 Angular Quick Start。 Angular 的提供中文阅读支撑,详见 Angular 中文版

# 使用 npm 安装
npm install -g @angular/cli
# 或者使用 yarn 安装
yarn global add @angular/cli

2 Angular 命令行

Angular CLI 是高效管理 Angular 项目的一个命令行工具。

2.1 创建新项目 ng new

打开终端窗口。运行下列命令来生成一个新项目以及默认的应用代码。

ng new my-project-name

如果想要生成使用 sass 开发的项目需要加入选项。

ng new my-project-name --style=scss

常用选项:

  • --skip-install 跳过依赖包安装过程
  • --style 样式默认系统
  • --routing 生成路由模块
ng new --style=less --routing --skip-install appname

添加常用的基础工具包

ng add ng-zorro-antd
ng add lodash
ng add moment

2.2 启动项目 ng serve

安装依赖包和启动项目。命令如下:

ng serve

2.3 生成代码模板 ng generate

2.3.1 生成组件

ng generate component my-component-name

CLI 创建了一个新的文件夹 src/app/my-component-name/, 并生成了 MyComponentName 的相关文件。

2.3.2 生成服务

ng generate service my-service-name

CLI 创建 my-service-name.service.ts 文件,并生成了 MyServiceNameService 服务。

2.3.3 生成路由

Angular 的最佳实践之一就是在一个独立的顶级模块中加载和配置路由器,它专注于路 由功能,然后由根模块 AppModule 导入它。

ng generate module app-routing --flat --module=app

--flat 把这个文件放进了 src/app 中,而不是单独的目录中。~–module=app~ 告 诉 CLI 把它注册到 AppModule 的 imports 数组中。

2.3.4 总结

# 进入模块目录
cd src/app/mti-m-xxxx

# 生成模块
ng generate module mti-m-xxxx --flat

# 生成路由,如果需要的话
ng generate module mti-m-xxxx-routing --flat --module=mti-m-xxxx

# 生成组件
ng generate component component/component-name

# 生成服务
ng generate service service/service-name/service-name

3 参考链接

Last Updated 2020-02-22 Sat 20:09. Created by Jinghui Hu at 2019-08-19 Mon 10:42.