Angular CLI 是 Angular 应用程序的官方命令行界面工具。它可以帮助开发人员更快速、更方便地创建、构建和维护 Angular 应用程序。本文将介绍 Angular CLI 的常见使用技巧，希望能够帮助读者更好地利用 Angular CLI 来开发高质量的 Angular 应用程序。
环境配置
在使用 Angular CLI 之前，需要先配置好开发环境。具体步骤如下：
- 安装 Node.js：Angular CLI 是基于 Node.js 开发的，因此需要先安装 Node.js。可以从官网 https://nodejs.org/ 下载安装包并安装。
- 安装 Angular CLI：在命令行中执行
npm install -g @angular/cli命令即可安装 Angular CLI。 - 创建新项目：在命令行中执行
ng new my-app命令即可创建一个新的 Angular 项目。
常用命令
Angular CLI 提供了很多有用的命令，下面列举了一些常用的命令：
ng serve：启动开发服务器。ng build：构建应用程序。ng test：运行单元测试。ng e2e：运行端到端测试。ng generate：生成组件、服务、指令等。ng lint：运行代码检查工具。ng help：获取帮助。
生成组件
Angular CLI 可以快速生成组件、服务、指令等，从而加速开发过程。下面介绍如何生成一个组件：
- 在命令行中执行
ng generate component my-component命令。 - Angular CLI 会自动在
src/app目录下生成一个名为my-component的组件。 - 在
app.component.html文件中使用<app-my-component></app-my-component>标签即可在页面中使用该组件。
配置路由
Angular CLI 提供了方便的命令来配置路由。下面介绍如何配置路由：
- 在命令行中执行
ng generate module app-routing --flat --module=app命令。 - Angular CLI 会自动在
src/app目录下生成一个名为app-routing.module.ts的路由模块。 - 在
app-routing.module.ts文件中配置路由，例如：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
- 在
app.module.ts文件中导入并使用路由模块，例如：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
-----------
------------- -
-------------
--------------
--------------
--
-------- -
--------------
----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -集成第三方库
Angular CLI 可以方便地集成第三方库，例如 Bootstrap、jQuery 等。下面介绍如何集成 Bootstrap：
- 在命令行中执行
npm install bootstrap --save命令安装 Bootstrap。 - 在
angular.json文件中添加以下配置：
-- -------------------- ---- -------
-
---
----------- -
--------- -
---
------------ -
-------- -
---
---------- -
---
--------- -
-----------------
---------------------------------------------------
--
---------- -
-----------------------------------------
-------------------------------------------------
-
--
---
--
---
--
---
-
--
---
-- 在
src/styles.css文件中添加以下内容：
@import "~bootstrap/dist/css/bootstrap.min.css";
- 在组件中使用 Bootstrap 样式，例如：
<div class="container"> <h1>Welcome to my app</h1> </div>
总结
本文介绍了 Angular CLI 的常见使用技巧，包括环境配置、常用命令、生成组件、配置路由和集成第三方库等。希望读者能够通过本文的学习，更好地利用 Angular CLI 来开发高质量的 Angular 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66065503d10417a22246e78e