搭建环境 - 基于 Angular CLI
新建项目
Angular CLI
是一个命令行接口(Command Line Interface
),用于实现自动化开发工作流程。它允许你做以下这些事情:
- 创建一个新的
Angular
应用程序 - 运行带有
LiveReload
支持的开发服务器,以便在开发过程中预览应用程序 - 添加功能到现有的
Angular
应用程序 - 运行应用程序的单元测试
- 运行应用程序的端到端 (
E2E
) 测试 - 构建应用程序
在使用 Angular CLI
之前,你必须确保系统中 Node.js
的版本高于 6.9.0
且 npm
的版本高于 3.0.0
。
安装 Angular CLI
- 安装 Angular CLI
npm install -g @angular/cli
- 检测
Angular CLI
是否安装成功ng --version
使用 Angular CLI
ng new [project-name]
创建新的项目cd project-name
ng serve
启动本地服务器,默认端口为 4200ng serve --host 0.0.0.0 --port 4201
可配置端口- 使用
--open
(或-o
)参数可以自动打开浏览器并访问http://localhost:4200/
常用的 Angular CLI
命令
用命令创建的时候可以添加路径,比如:
ng g c ./components/hero
则会在 ./src/app
目录下自动创建(如果已存在则不会创建)目录 components
,再在这个目录下创建对应的组件 hero
。
应用程序 | 命令 | 快捷键 |
---|---|---|
新建 (Class) | ng generate class my-new-class | ng g cl my-new-class |
新建组件 (Component) | ng generate component my-new-component | ng g c my-new-component |
新建指令 (Directive) | ng generate directive my-new-directive | ng g d my-new-directive |
新建枚举 (Enum) | ng generate enum my-new-enum | ng g e my-new-enum |
新建模块 (Module) | ng generate module my-new-module | ng g m my-new-module |
新建管道 (Pipe) | ng generate pipe my-new-pipe | ng g p my-new-pipe |
新建服务 (Service) | ng generate service my-new-service | ng g s my-new-service |