Angular CLI 是一个强大的工具，用于简化 Angular 项目的开发流程。以下是一些关于 Angular CLI 的基本指南。

安装 Angular CLI

首先，您需要安装 Angular CLI。您可以通过以下命令进行安装：

npm install -g @angular/cli

或者

yarn global add @angular/cli

创建新项目

使用 Angular CLI 创建新项目非常简单。以下是一个示例：

ng new my-angular-project

这将创建一个新的 Angular 项目，名为 my-angular-project。

项目结构

Angular CLI 创建的项目具有以下基本结构：

  • src/: 包含应用程序源代码。
  • src/app/: 包含应用程序的主要组件。
  • src/environments/: 包含环境配置文件。
  • src/styles/: 包含全局样式文件。

组件

组件是 Angular 应用程序的基本构建块。您可以使用以下命令创建一个新组件：

ng generate component my-component

这将创建一个名为 my-component 的新组件。

服务

服务是 Angular 应用程序中的可重用功能。您可以使用以下命令创建一个新服务：

ng generate service my-service

这将创建一个名为 my-service 的新服务。

路由

Angular CLI 支持路由。您可以使用以下命令创建一个新路由：

ng generate component my-route

然后，您需要修改 app-routing.module.ts 文件来配置路由。

图片

如果您想添加图片到组件中，可以使用以下命令：

ng generate component image-component

在 image-component.html 文件中，您可以添加以下代码来显示图片：

<img [src]="imageSrc" alt="Image">

在 image-component.ts 文件中，您可以设置 imageSrc 属性：

imageSrc: string = 'https://cloud-image.ullrai.com/q/image_/';

扩展阅读

如果您想了解更多关于 Angular CLI 的信息，请访问我们的 Angular CLI 教程。

Angular CLI