Angular 2 架构学习笔记

概述

Angular 2 是一种基于 TypeScript 的框架，用于开发 Web 应用程序。它是 AngularJS 的接任者，并进行了重大更新和改进。Angular 2 的架构和设计理念旨在提高应用程序的性能、可维护性和可扩展性。本文档将介绍 Angular 2 的主要组成部分和功能。

组件

组件是 Angular 2 应用程序的核心。每个组件都包含一个 HTML 模板和相应的 TypeScript 代码。Angular 的组件体系结构使得开发者可以轻松地构建复杂的 Web 应用程序。

下面是一个简单的 Angular 2 组件示例：

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

@Component({
    selector: 'app-root',
    template: `
        <h1>Hello, {{ name }}!</h1>
    `
})
export class AppComponent {
    name = 'Angular 2';
}

在这个示例中，我们定义了一个 AppComponent 组件，并给它的 HTML 模板传递了一个名为 name 的属性。使用 Angular CLI 工具可以创建组件，例如：ng generate component my-component 将在项目中创建一个新的组件。

模块

模块用于组织 Angular 2 应用程序中的代码。每个 Angular 2 应用程序都至少有一个根模块。模块还可以将多个组件组合在一起，以构建更为复杂的应用程序。

下面是一个简单的 Angular 2 模块示例：

Copy Code
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

在这个示例中，我们创建了一个名为 AppModule 的模块，并在其中引入了 BrowserModule。我们还定义了一个名为 AppComponent 的组件，并且将其声明为当前模块可用的组件。最后，我们将 AppComponent 组件作为根组件进行引导，也就是说，在加载应用程序时将首先加载该组件。

服务

Angular 2 服务是可注入的对象，它们可以在整个应用程序中共享。服务通常用于执行某些通用操作，例如 HTTP 请求、日志记录或数据处理。

下面是一个简单的 Angular 2 服务示例：

Copy Code
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {
    constructor(private http: HttpClient) {}

    getData() {
        return this.http.get('https://jsonplaceholder.typicode.com/posts');
    }
}

在这个示例中，我们定义了一个名为 DataService 的服务，并在其构造函数中注入了 HttpClient。我们还定义了一个名为 getData 的方法，该方法使用 HttpClient 执行 HTTP GET 请求返回数据。

路由

路由允许 Angular 2 应用程序中的各个部分进行导航。使用路由，我们可以在应用程序中定义不同的视图，并根据 URL 进行导航。

下面是一个简单的 Angular 2 路由示例：

Copy Code
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

在这个示例中，我们定义了两个路由：一个空路由和一个名为“about”的路由。空路由表示默认视图，而“about”路由指定了一个名为 AboutComponent 的组件作为该路由的视图。

示例

以下是一个完整的 Angular 2 应用程序的示例。它包含一个组件、服务、模块和路由：

Copy Code
// app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <h1>Hello, {{ name }}!</h1>
    `
})
export class AppComponent {
    name = 'Angular 2';
}

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {
    constructor(private http: HttpClient) {}

    getData() {
        return this.http.get('https://jsonplaceholder.typicode.com/posts');
    }
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { DataService } from './data.service';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule
    ],
    providers: [
        DataService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';

const routes: Routes = [
    { path: '', component: AppComponent }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

在这个示例中，我们定义了一个名为 AppComponent 的组件、一个名为 DataService 的服务、一个名为 AppModule 的模块和一个名为 AppRoutingModule 的路由模块。AppComponent 组件包含一个简单的模板，可以显示“Hello, Angular 2!”消息。DataService 具有一个名为 getData 的方法，该方法使用 HttpClient 执行 HTTP GET 请求并返回数据。AppModule 包含 AppComponent 组件和 DataService 服务，并将 AppComponent 组件设置为根组件。AppRoutingModule 将根路由设置为 AppComponent 组件。

结论

以上是 Angular 2 的主要组成部分和功能。使用这些工具和框架，开发者可以构建出高性能、可维护和可扩展的 Web 应用程序。