Angular 2 JavaScript學習筆記

簡介

Angular 2 是一個基於 TypeScript 的前端 Web 應用程式框架，它具有高效、可擴展和模組化等特點。透過 Angular 2，我們可以輕鬆地開發出高品質的 Web 應用程式。

TypeScript

TypeScript 是一個由微軟開發的開源編程語言，它基於 JavaScript，但加入了靜態類型和其他新特性。Angular 2 就是基於 TypeScript 開發的。

以下是一個 TypeScript 的例子:

typescriptCopy Code
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

console.log(greeter.greet());

Angular 2 Component

在 Angular 2 中，Component 是構成應用程序的基本組件，它可以包含模板、屬性和方法等。以下是一個 Angular 2 的 Component 的例子:

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

@Component({
    selector: 'my-app',
    template: '<h1>Hello World!</h1>'
})
export class AppComponent { }

上面的代碼定義了一個名為 AppComponent 的 Component，它的模板中包含一個 H1 標籤，顯示 "Hello World!"。

Angular 2 Directive

Directive 是一個標記，在 HTML 中使用，用於為元素添加額外的行為。Angular 2 中有兩種類型的 Directive：Component 和 Attribute Directive。以下是一個 Attribute Directive 的例子:

typescriptCopy Code
import { Directive, ElementRef } from '@angular/core';

@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
        el.nativeElement.style.backgroundColor = 'yellow';
    }
}

上面的代碼定義了一個名為 HighlightDirective 的 Attribute Directive，它會將所有使用 myHighlight 屬性的元素的背景顏色設置為黃色。

Angular 2 Service

Service 是一個用於協作和共享數據的可重用邏輯的方式。在 Angular 2 中，Service 可以被注入到 Components 或其他 Services 中。以下是一個 Angular 2 的 Service 的例子：

typescriptCopy Code
import { Injectable } from '@angular/core';

@Injectable()
export class UserService {
    private users = [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' },
        { id: 3, name: 'Charlie' }
    ];

    getUsers() {
        return this.users;
    }

    getUser(id: number) {
        return this.users.find(user => user.id === id);
    }
}

上面的代碼定義了一個名為 UserService 的 Service，它包含一個名為 getUsers 的方法，用於返回所有的使用者資訊。

總結

Angular 2 是一個基於 TypeScript 的前端 Web 應用程式框架，它包含了多種功能，如 Component、Directive 和 Service 等。透過上面提到的例子，你可以更好地了解 Angular 2 的基本結構和用法。