数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究我如何开始使用 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 命令。
为了确保更改已成功应用，我打开了浏览器并访问了 https://127.0.0.1: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 文件中声明了一个 user 对象，其中包含 name 和 email 属性。
然后，我们使用此 user 对象在 app.component.html 文件中在屏幕上显示名称和电子邮件。名称和电子邮件使用字符串插值通过用双花括号括住变量来显示。用户对象使用 AppComponent 类在 HTML 模板中访问。
最后，router-outlet 指令用于呈现当前活动路由的内容。
当用户运行 Angular 应用程序时，他们可以观察到名称和电子邮件值显示在屏幕上。
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: '[email protected]' };
}
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="/">Home</a></li>
<li><a target="_blank" href="/about">About</a></li>
<li><a target="_blank" href="/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 内部，我们定义了一个包含三个对象的 items 数组，这些对象具有 id 和 name 属性。
我们还定义了一个 clickedItem 变量，用于在单击项目时保存消息。
我们创建了一个 onItemClick 方法，该方法将项目作为参数并更新 clickedItem 消息以显示单击了哪个项目。
在模板中，我们使用了 *ngFor 指令遍历 items 数组并为每个项目创建一个列表项。我们还在每个列表项中添加了一个 (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 应用程序的基础知识。
47 次浏览
