Angular笔记（一）概览

一、特性

1. 基于TypeScript构建
2. 基于组件开发

二、组件

包括：

1. typescript class with @Component()装饰器

装饰器指定自带信息：

• selector: CSS选择器 [在模版中引用该组件所需实例名]
• template: [一般使用templateUrl引入HTML文件]
• CSS样式（可选）

3. HMTL模版
4. 样式文件

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

@Component ({
  selector: 'hello-world-interpolation',
  templateUrl: './hello-world-interpolation.component.html'
})
export class HelloWorldInterpolationComponent {
    message = 'Hello, World!';
}

三、模版

1. 动态插值 <template>{{test}}</template>
2. 属性绑定 <template [style.color]="color"></template>
3. 事件监听器 <template (click)="func()"></template>
4. 指令 *ngIf / *ngFor

四、依赖注入

声明typescript class的依赖项

• e.g. 在B中调用A的方法：通过向构造函数中添加 A 来注入到 B类中

import { Logger } from '../logger.service';
export class HelloWorldDependencyInjectionComponent  {
  constructor(private logger: Logger) { }
}