資料結構
網路
關係資料庫管理系統
作業系統
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://: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: '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="/">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 次瀏覽
