Gauss Zhou

# 理解 Angular

要了解 Angular 框架的功能，你需要了解以下内容：

  • 组件
  • 模板
  • 指令
  • 依赖注入

# 组件

组件是构成应用的砖块。组件包括三个部分：

  • 带有 @Component() 装饰器的 TypeScript 类
  • HTML 模板
  • 样式文件

创建组件

ng generate component <component-name>

import { Component } from '@angular/core';
@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})
export class ComponentOverviewComponent {

}

# 模板

每个组件都有一个 HTML 模板，用于声明该组件的渲染方式。

在 Angular 中，模板是用户界面 (UI) 片段的蓝图。模板是用 HTML 编写的，可以在模板中使用特殊语法来构建 Angular 的许多特性。

# 指令

指令是为 Angular 应用程序中的元素添加额外行为的类。使用 Angular 的内置指令，你可以管理表单、列表、样式以及要让用户看到的任何内容。

# 依赖注入

依赖注入让你可以声明 TypeScript 类的依赖项，而无需操心如何实例化它们。

// logger.service.ts
import { Injectable } from '@angular/core';

@Injectable({providedIn: 'root'})
export class Logger {
  writeCount(count: number) {
    console.warn(count);
  }
}

// hello-world-di.component.ts
import { Component } from '@angular/core';
import { Logger } from '../logger.service';

@Component({
  selector: 'hello-world-di',
  templateUrl: './hello-world-di.component.html'
})
export class HelloWorldDependencyInjectionComponent  {
  count = 0;

  constructor(private logger: Logger) { }

  onLogMe() {
    this.logger.writeCount(this.count);
    this.count++;
  }
}

组件
模板
指令
依赖注入