Angular CLI是一个命令行界面工具，可用于开发和生成Angular项目，并有助于维护Angular应用程序。
现在，让我们看看Angular CLI的一些功能。

Angular CLI的功能

• Angular CLI仅使用单行命令即可帮助生成组件，服务和模块。

• 它有助于减小Angular的应用程序大小，从而提供增强的开发体验。

• 它还提供TypeScript的简洁编码功能。

让我们看一下如何安装Angular CLI。

Angular CLI安装

可以使用Node Package Manager安装Angular CLI，例如：npm。
确保在开发系统上安装了具有正确路径集的NodeJS。
如果我们不熟悉NodeJS，则可以参考我们的NodeJS安装教程 。
完成所有设置后，继续在Windows命令提示符或者我们使用的任何其他CLI上执行以下命令：

npm install -g @angular/cli

此命令将在系统上全局安装最新版本的Angular CLI(由于-g扩展)。
我们可以执行以下命令来验证是否已安装Angular CLI。

ng --version

此命令将检查系统上安装的Angular CLI的版本。
例如，我们可以在下面参考我系统的Angular CLI版本。

如上所示，我们可以参考系统上安装的Angular CLI和NodeJS的版本。

如果在安装Angular CLI时遇到任何问题，请为Angular团队执行以下命令以获取在线帮助，并添加我们所面临问题的简短描述。

ng help serve

其中ng代表angular，而Angular CLI的所有命令均以ng开头。

创建Angular项目

现在，假设我们要构建一个新的Angular项目。
首先，在我们要创建项目的目录中创建一个目录，并在CLI上使用cd命令将路径更改为该目录。
假设我们有一个名为" First Project"的目录，该目录位于桌面上，请执行以下命令以导航到该目录。

cd C:Users/System_Name/Desktop/First Project

稍后，执行以下命令以创建新的Angular项目。

ng new my-first-project

现在，它询问我们是否将Angular Routing添加到项目中，如下所示：

我建议我们将路由添加到项目中，因为它有助于在应用程序中导航。
因此，执行y以添加路由。

现在，它会询问我们要使用哪种样式表格式，如下所示：

单击CSS在应用程序上安装包括所有其他样式表的默认CSS样式表。

现在，这将使用以下配置和代码文件在目录中创建名为my-first-project的新项目。
我们可以使用以下命令导航到项目：

cd my-first-project

服务项目

每当我们使用Angular CLI创建新项目时，都会获得一个预制项目来开始。
我们可以通过执行以下命令，在本地为应用程序提供服务来查看此项目：

ng serve

这将以Angular提供的默认端口号为项目提供服务，例如：4200。
我们可以通过在浏览器中访问http：//localhost：4200 /来查看项目。
我们甚至可以使用-open标志来命令angular打开浏览器。

ng serve --open

-open标志也有一个简写形式，例如：-o标志。

ng serve -o

这将在系统的默认浏览器上打开项目。

继续前进，我们将学习如何安装Angular Materials。

安装 Angular Materials

Angular Materials或者用户界面(UI)组件可以吸引用户的结构化方式设计应用程序，并使其更易于访问应用程序中存在的元素或者组件。
它们还可以以独特的样式和形状精美地设计应用程序。
因此，强烈建议使用UI组件来吸引用户并建立用户与之间的通信。

我们可以使用以下命令添加Angular材质：

ng add @angular/material

现在，它要求我们选择一个预先构建的主题名称或者一个自定义主题。

选择" Indigo/Pink"预建主题，这是为应用程序设置样式的默认主题。
我们还可以选择"自定义"主题，以便自定义主题文件，其中包括多个组件使用的所有常见样式。

现在，它要求我们设置HammerJS。
HammerJS是Angular资料库中的一个流行库，它增加了对诸如Swipe，Pan，Pinch，Rotate等触摸手势的支持。

我们可以选择"是"或者"否"。
但是，我建议选择"是"，因为在应用程序中使用手势看起来很时髦。

现在，它要求我们为Angular Material设置浏览器动画。

选择"是"，以便可以在应用程序上使用动画。
角度动画使应用程序更有趣，更易于使用。
这可以改善应用程序和用户体验，吸引用户的注意力。

随后，这将在应用程序中安装Angular材料。

生成Angular组件

创建项目后，让我们开始生成Angular组件。
这些组件有助于使用基于组件的体系结构以结构化方式构建应用程序。

ng generate component first-component

我们还可以使用Angular CLI使用简短形式。
例如，我们可以使用以下命令创建相同的组件：

ng g c first-component

这会在src/app目录中创建名为" first-component"的组件。
它由以下子组件组成：

`

`

• first-component.component.css：该文件包含CSS语言，该语言链接到以下HTML文件。

• first-component.component.html：该文件包含HTML代码，该代码确定组件的结构及其外观。

• first-component.component.spec.ts：这是一个TypeScript文件，用于测试目的，在开发过程中用处不大。

• first-component.component.ts：这也是一个TypeScript文件，它创建一个实现OnInit的FirstComponent类，该类具有一个默认的Constructor()和一个默认方法，称为ngOnInit()。

这些组件是用于构建Angular应用程序的用户界面(UI)。
它们有助于构建动态的单页应用程序(SPA)，这是Angular的重要功能，可让开发人员更轻松地浏览不同的组件并提高应用程序的效率。

使用Angular CLI进行路由

路由是现代Web开发中必需的一个非常重要的功能，从页面到页面或者组件到组件之间进行导航时，路由是必需的。
感谢Angular团队，现在我们可以在创建新项目时直接在应用程序中添加路由，如Angular CLI安装部分所述。
如果我们尚未向项目添加路由，则只需在命令提示符下执行以下命令。

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

这将路由添加到项目，并在src/app目录中生成app-routing.module.ts文件。
生成的文件如下所示：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
],
@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule { }

应用程序和第一个组件之间的路由

现在，假设我们要添加从app.component到第一个组件的路由。
首先，在应用程序上转到app.component.html并清除所有现有代码。
现在，编写新代码，如下所示：

<mat-toolbar>
   First Project&lt;
</mat-toolbar>
<router-outlet></router-outlet>

<mat-toolbar>是Angular材质的容器，用于标题和标题。
要使用此工具列，我们需要先使用以下命令将其从Angular材质导入到app.module.ts文件中：

import { MatToolbarModule } from '@angular/material';

<router-outlet>是路由器库中的路由器指令，用于将路由器定向到显示路由视图的位置。
要使用此指令，我们需要使用以下命令遵循与Mat Toolbar相同的过程：

import { Routes, RouterModule } from '@angular/router';

稍后，我们还需要在app.module.ts文件中的imports：[]部分中添加这些模块。

imports: [
   BrowserModule,
   AppRoutingModule,
   BrowserAnimationsModule,
   RouterModule.forRoot(routes),
   MatToolbarModule
],

对于路由，我们需要添加" RouterModule.forRoot(routes)"。
对于Mat Toolbar，我们需要添加" MatToolbarModule"。

现在，让我们使用ng serve open命令为项目服务。

假设，现在我们要为第一个组件创建一个根。
首先，让我们在first-component.component.html文件中编写代码以显示第一个组件页面的内容。

<h3>first-component works!</h3>

现在，让我们进入app.module.ts文件，并在Routes = []部分中为第一个组件创建路径。

const routes: Routes = [
   { path: 'first-component', component: FirstComponentComponent }
];

这将为第一个组件创建一条路由，我们可以在浏览器中使用以下URL查看该组件：

http://localhost:4200/first-component

这将显示第一个组件文件的内容，如下所示：

组件到组件的路由

假设我们要在各个组件之间导航。
首先，我们需要在应用程序中生成另一个组件。
稍后，将first-component.component.html文件上的路由器链接添加到second-component.component.html文件中，如下所示：

<h3>first-component works!</h3>
<p>Click the link below to navigate into second component</p>
<nav>
   <a routerLink = "/second-component">Second Component</a>
</nav>

现在，我们需要按照相同的步骤为第二个组件创建路由，就像为第一个组件创建路由一样。
创建第二部分路径后，我们可以在浏览器中查看它。

单击"第二个组件"链接导航到第二个组件页面并显示其内容。

还有一个特殊的字符串"**"可以添加到路径中。
如果请求的URL与我们定义的路径或者路由都不匹配，则该字符串用于重定向到我们定义的路径。
该字符串可以添加到位于app.module.ts文件中的Routes = []部分中。

const routes: Routes = [
   { path: 'first-component', component: FirstComponentComponent },
   { path: 'second-component', component: SecondComponentComponent },
   { path: '**', redirectTo: '', pathMatch: 'full' }
];

例如，我们可以在应用程序中看到定义的路径。
在浏览器URL部分中，执行以下地址：

http://localhost:4200/third-component

由于第三个组件不存在，它将重定向到首页URL，例如：http：//localhost：4200并显示其内容。