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