我是如何开始使用 Angular 和 TypeScript 的?

我之所以开始使用 Angular 和 TypeScript，是因为意识到构建可扩展且可维护的 Web 应用程序的重要性。Angular 作为一个 Web 应用程序框架，为我提供了轻松构建复杂动态应用程序所需的工具。TypeScript 作为 JavaScript 的静态类型超集，让我能够编写更简洁的代码，在运行时捕获错误，并提高应用程序的整体可扩展性。

在本教程中，我将分享我的经验，并指导您使用 TypeScript 创建一个简单的 Angular 应用程序。我们将介绍 Angular 和 TypeScript 的基础知识，并提供创建应用程序的分步指南，该应用程序将演示该框架的一些关键功能。

语法

要开始使用 Angular 和 TypeScript，第一步是安装 Angular CLI 工具，该工具用于创建和管理 Angular 应用程序。用户可以按照以下语法使用 npm 安装 Angular CLI 工具 -

npm install -g @angular/cli

安装完成后，用户可以使用以下语法创建一个新的 Angular 应用程序 -

ng new my-app

这将在名为"my-app"的文件夹中创建一个新的 Angular 应用程序。 Angular CLI 工具将生成一个基本的项目结构，包括一组配置文件和一个默认的应用程序组件。

接下来，用户可以导航到项目目录并使用以下命令启动应用程序 -

cd my-app
ng serve

通过这些步骤，用户可以使用 TypeScript 和 Angular CLI 工具创建并运行一个新的 Angular 应用程序。

在 Angular 应用程序中进行更改

首先，我安装了必要的依赖项，并使用 Angular CLI 生成了一个新项目。

然后，我在 IDE 中打开 index.html 文件，并将 <title> 元素替换为 <title>Homes</title>来更新应用的标题。

接下来，我打开 app.component.ts 文件，并将 @Component 装饰器中的 template 属性替换为 <h1>Hello world!</h1>，以更改应用组件中的文本。

然后，在 app.component.ts 中的 AppComponent 类定义中，我将 title 属性替换为 title = 'home'，以更改组件标题。

完成更改后，我保存了更改，并在 IDE 的终端窗口中运行了 ng serve 命令。

为了确保更改已成功应用，我打开浏览器并访问 http://localhost:4200/。应用在标题和正文中显示了消息"Hello, World!"，确认更改已成功应用。

这就是我修改 Angular 应用并将其更新为显示"Hello, World!"消息的方法。

app.component.ts

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   standalone: true,
   imports: [],
   template: `<h1>Hello world!</h1>`,
   styleUrls: ['./app.component.css'],
})
export class AppComponent {
   title = 'home';
}

输出

Hello Wolrd!

示例 1

在此示例中，我们在屏幕上显示了一些来自组件的动态数据。首先，我们在 app.component.ts 文件中声明了一个用户对象，其中包含 name 和 email 属性。

然后，我们在 app.component.html 文件中使用此用户对象在屏幕上显示 name 和 email。name 和 email 通过使用双花括号将变量括起来的字符串插值来显示。在 HTML 模板中使用 AppComponent 类访问用户对象。

最后，使用 router-outlet 指令渲染当前活动路由的内容。

用户在运行 Angular 应用程序时，可以观察到屏幕上显示的 name 和 email 值。

app.component.ts

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   user = { name: 'John Doe', email: 'johndoe@example.com' };
}

app.component.html

<style>
   header {
      width: 100%;
      height: 50vh;
      background-color: blueviolet;
      font-size: 1.5rem;
      text-align: center;
      color: rgb(5, 255, 255);
   }
   h2 {
      color: aquamarine;
   }

   nav ul {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      padding: 1rem;
      margin-bottom: 2rem;
   }
   li {
      list-style: none;
      margin-right: 1.5rem;
   }
   li a {
      color: white;
   }
</style>

<header>
   <nav>
      <ul>
         <li><a target="_blank" href="/code-document/">Home</a></li>
         <li><a target="_blank" href="/code-document/about">About</a></li>
         <li><a target="_blank" href="/code-document/contact">Contact</a></li>
      </ul>
   </nav>
   <div>
      <h1>Welcome, {{ user.name }}!</h1>
      <p>Your email address is {{ user.email }}.</p>
   </div> 
</header>
<router-outlet></router-outlet>

输出

示例 2

在此示例中，我们创建了一个 Angular 组件，用于显示项目列表，并在点击某个项目时更新消息。

首先，在 AppComponent 内部，我们定义了一个项目数组，其中包含三个具有 id 和 name 属性的对象。

我们还定义了一个 clickedItem 变量，用于保存点击某个项目时的消息。

我们创建了一个 onItemClick 方法，该方法接受一个项目作为参数，并更新 clickedItem 消息以显示点击了哪个项目。

在模板中，我们使用 *ngFor 指令循环遍历项目数组并为每个项目创建一个列表项。我们还为每个列表项添加了一个 (click) 事件监听器，用于调用 onItemClick 方法。

最后，我们添加了一个标题，用于在点击某个项目时显示 clickedItem 消息。

App.component.html

<style>
   header {
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.4rem;
      flex-direction: column;
   }
   ul {
      margin: 2rem 0;
      padding: 2rem 6rem;
      list-style: none;
      border: 1px solid white;
   }
   li {
      margin: 1.5rem 0;
      cursor: pointer;
   } 
</style>
<header>
   <ul>
      <li *ngFor="let item of items" (click)="onItemClick(item)">
         {{ item.name }}
      </li>
   </ul>
   <h3>{{ clickedItem }}</h3>
</header>
<router-outlet></router-outlet>

App.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   items = [
   { id: 1, name: 'Item 1' },
   { id: 2, name: 'Item 2' },
   { id: 3, name: 'Item 3' }
   ];
   clickedItem = "";
   onItemClick(item: any) {
      this.clickedItem = `Item ${item.id} clicked`;
   }
}

输出

在本教程中，我们介绍了如何在 Angular 应用程序中创建组件以及如何使用它们。我们首先介绍了一个通过组件在屏幕上显示动态数据的基本示例。通过这些示例，用户可以学习使用 Typescript 编写 Angular 应用程序的基础知识。

---