Angular

Angular 是一个基于 TypeScript 的前端框架。

组件

import { Component } from '@angular/core'

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `
})
export class CounterComponent {
  count = 0
  
  increment() {
    this.count++
  }
}

服务

import { Injectable } from '@angular/core'

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return fetch('/api/data').then(res => res.json())
  }
}

依赖注入

import { Component } from '@angular/core'
import { DataService } from './data.service'

@Component({
  selector: 'app-data',
  template: '<div>{{ data }}</div>'
})
export class DataComponent {
  data: any
  
  constructor(private dataService: DataService) {
    this.dataService.getData().then(data => {
      this.data = data
    })
  }
}