Angular5 基础教程：了解 Angular 核心知识-JavaScript中文网-JavaScript教程资源分享门户

前言

Angular 是一个开源的前端框架，由谷歌公司维护和开发。它基于 Model-view-controller (MVC) 架构，简化了开发人员在构建单页应用程序时所需的工作量。Angular 5 是 Angular 的最新版本，带来了许多新特性和改进，例如更小的包大小、更快的编译速度、更多的 API 和更好的代码生成器。

在本篇文章中，我们将讨论 Angular5 的基础知识，包括组件、模块、指令、服务等重要概念。我们也会为读者提供一些示例代码来帮助他们更好地理解这些概念。

组件

在 Angular 中，组件是应用程序的基本构建块。它们控制着我们在页面上看到什么以及如何相互作用。每个组件都包含了 HTML 模板、样式和业务逻辑，并由一个装饰器来进行定义。

在下面的例子中，我们可以看到一个简单的组件，它包含了一个 HTML 模板和一些业务逻辑：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  title = '我的第一个 Angular 应用';
}

在上面的代码中，@Component 装饰器被用来定义了一个 Angular 组件。它将一个对象传递给它，该对象描述了组件的元数据，包括选择器、模板 URL 和样式 URL。

export class 用来将该组件导出，以便其他组件可以导入并使用它。

模块

除了组件外，模块也是 Angular 中非常重要的概念。模块是一个带有 "@NgModule" 装饰器的类，它包含了整个应用中的所有组件、指令、服务和其他相关的代码。

在下面的例子中，我们定义了一个名为 AppModule 的模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

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

export class AppModule { }

在上面的代码中，@NgModule 装饰器被用来定义了一个 Angular 模块。它的 declarations 属性包含了该模块中的所有组件，imports 属性则包含了该模块依赖的其他模块。bootstrap 属性指定了该应用启动时应该启动哪些组件。

指令

指令是用来添加行为和逻辑的方式，让我们能够操作组件和节点。Angular 有两种指令：结构性指令和属性指令。

结构性指令会根据组件模板中 HTML 结构的变化来添加或删除目标节点。例如，在下面的代码中，我们使用 *ngIf 来动态隐藏或显示 HTML 元素：

<div *ngIf="showContent">这里的内容只有当条件为 true 时才会显示出来。</div>

属性指令则用来更改节点的特性。例如，在下面的代码中，我们使用 ngStyle 指令来为 HTML 元素设置样式：

<div [ngStyle]="{color: color, 'font-size': size + 'px'}">这个文本的颜色和字体大小会受到组件属性 color 和 size 的控制。</div>

除了内置的指令之外，我们还可以定义自己的指令。这些自定义的指令可以用来扩展 Angular 的功能，添加新的行为和逻辑。

服务

服务是 Angular 中可重用的代码块，用来执行各种任务。它们是用来封装应用中的复杂业务逻辑和数据的最佳方式。

在下面的例子中，我们定义了一个 UserService 服务，用来获取用户数据：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class UserService {
  constructor(private http: HttpClient) { }
  getUser(): Observable<any> {
    return this.http.get('/api/user').map((response) => response.json());
  }
}

在上面的代码中，我们使用 @Injectable 装饰器来标注 UserService。这是因为我们在服务中注入了其他 Angular 服务，并且 TypeScript 需要知道这个类应该被视为一个可注入的服务。

在构造方法中，我们注入了 HttpClient，一个 Angular 内置的 HTTP 基于 Observable 的服务。在 getUser() 方法中，我们使用它来获取用户数据，这是一个 HTTP GET 请求。

这只是一个简单的服务示例，但是服务可以用来做很多更复杂的任务，例如数据访问、日志记录、应用消息等。

总结

在本文中，我们详细讨论了 Angular 5 中的一些基础概念，包括组件、模块、指令和服务。通过这些概念的了解，我们可以更好地构建 Angular 应用程序，并实现更丰富的特性和行为。当然，要想真正掌握 Angular，还需要更多的实践和学习。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a5de8cadd4f0e0ffe6e29d

Angular5 基础教程：了解 Angular 核心知识

前言

组件

模块

指令

服务

总结

纠错反馈