什么是Angular CLI
Angular CLI是一个让你更加快速创建和开发Angular应用的命令行工具。它几乎涵盖了Angular应用从开发到测试，打包部署等的全过程，并且已成为Angular最主要的官方构建工具。在Angular CLI的帮助下，你可以非常快速地创建一个全新的Angular应用，测试它，并且将其部署到生产环境。
准备工作
在使用Angular CLI之前，你需要确保以下几个方面已经就绪：
- Node.js和npm已经安装完毕。可以通过在终端输入
node -v和npm -v命令检测是否已安装。如果未安装就需要先安装：Node.js官网 - 最好升级npm到最新版本：在终端输入
npm install npm@latest -g。 - 编辑器安装：例如Visual Studio Code，Sublime Text等。
开始创建Angular项目
安装Angular CLI
为了开始创建Angular应用，我们需要先在终端中全局安装Angular CLI命令行工具。在命令行中输入以下命令：
npm install -g @angular/cli
安装完成后，你可以使用 ng 命令访问Angular CLI。
创建新项目
在安装Angular CLI后，我们可以使用如下命令创建Angular项目：
ng new my-app
其中 my-app 是指项目的名称。执行该命令后，Angular CLI会自动创建一个新的Angular项目文件夹，并执行如下操作：
- 创建一个新的Angular项目。
- 安装必要的依赖项。
- 初始化Git中的一个新存储库。
请注意，如果你已经使用过Angular CLI创建过项目，可能需要在项目文件夹外使用 ng new 命令来创建具有不同名称的新项目。
运行项目
成功创建项目后，使用以下命令运行应用程序：
cd my-app ng serve --open
其中 --open 标志告诉Angular CLI在启动服务器后自动在Web浏览器中打开新应用程序。构建项目需要一点时间，完成后你可以在浏览器中访问 https://localhost:4200 。现在，您可以将更改保存到任何组件文件中，Angular CLI将在保存后自动重新构建应用程序并保持浏览器状态处于最新的状态。
项目文件结构
Angular项目的默认配置是按模块封装的，例如模块、组件等模块化的内容。下面是一个典型的Angular项目结构：
-- -------------------- ---- ------- ------- --- ---- --- ------------- --- ---- - --- ---- - - --- ----------------- - - --- ------------------ - - --- --------------------- - - --- ---------------- - - --- ------------- - --- ------- - --- ------------- - --- ----------- - --- ---------- - --- ------- - --- ------------ - --- ---------- - --- ------- - --- ----------------- - --- ------------------ - --- ------------ --- ------------ --- ------------ --- ----------------- --- --------- --- ------------- --- -----------
e2e/：系统端对端（End-To-End）测试。node_modules/：安装的npm软件包。src/：包含应用程序的所有源代码。src/app：源代码的主目录，包含module导入核心的应用程序组件。src/assets：静态资源（如图片、字体）的目录。src/environments：开发环境，预发布环境和生产环境的文件。angular.json：Angular应用程序的全局配置文件。package.json：npm软件包清单。README.md：项目的README文件。tsconfig.json：TypeScript编译器配置文件。tsconfig.app.json：Angular应用程序的TypeScript编译器配置文件。tsconfig.spec.json：Angular测试的TypeScript编译器配置文件。tslint.json：TypeScript语言服务配置文件。
添加新组件
向Angular应用程序添加新组件非常简单。
首先，在项目文件夹的src/app文件夹中定义新的组件，例如：
ng generate component my-component
该命令创建一个新的my-component文件夹，并为其添加my-component组件，其包括CSS文件、HTML文件和Component文件。
为了把新组件添加进来，我们需要将它们添加到应用程序目录下的app.module.ts文件中。在AppComponent导入语句后面添加以下行：
import { MyComponentComponent } from './my-component/my-component.component'; ... @NgModule({ declarations: [ AppComponent, MyComponentComponent ], ...在app.component.html文件中添加以下内容以调用新组件：
<app-my-component></app-my-component>
保存文件并检查浏览器以查看你的新组件。
构建项目
在项目开发完成后，为了在生产环境下部署该项目，我们需要对其进行构建操作。在终端中，使用以下命令构建该应用程序：
ng build --prod
执行完该命令后，Angular CLI将把打包好的生产应用程序文件保存在放置应用程序文件的 dist 目录中。你可以将这些文件上传到Web服务器以在生产环境中运行此应用程序。
总结
这篇文章涵盖了如何使用Angular CLI创建和开始开发Angular应用程序。我们从准备工作开始，一步一步地通过示例代码演示了如何创建和调试Angular项目、添加新组件以及如何构建并部署生产版本的应用程序。希望这篇文章可以为你开始开发具有强大功能和性能的Angular应用程序提供些技术指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6487080d48841e98945b3001