[Angular]서비스, Dependency Injection, 생명주기

 

stopwatch 부분에 시계로이동

clock 의 스탑워치로 이동

 

결국에는 같은 기능을 수행하고있다. 이럴경우 서비스가 필요하다.

 

 

서비스란?

비슷한 기능(관심사)를 묶어 코드의 중복제거 => 재사용가능한 뭉치로 만들 수 있다. 

컴포넌트간의 데이터 중개 역할

 

 

---

서비스!

 

ng g s share/page-toggle 이란 명령어로 share라는 디렉토리아래에 page-toggle을 만들 수 있다.

 

생성된 파일을 살펴보면

 

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

@Injectable({
  providedIn: 'root'
})
export class PageToggleService {

  constructor() { }
}

Injectable이란 데코레이터가 붙으면 앵귤러에서 서비스로 사용이 가능하다.

 

provideIn같은경우는 앵귤러6부터 붙게된것~

 

1. goPage라는 함수를 서비스에 만든다.

 

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class PageToggleService {
  public routingCount = 0;

  constructor(private router: Router) {}

  goPage(target: string) {
    this.routingCount++;
    this.router.navigateByUrl(target);
  }
}

이후 stopwatchcomponent에서 이 서비스를 사용할것이다.

private에 pageToogleService를 만들고 pageToogleService.gopage를 사용한다.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { PageToggleService } from 'src/app/share/page-toggle.service';

@Component({
  selector: 'app-stopwatch',
  templateUrl: './stopwatch.component.html',
  styleUrls: ['./stopwatch.component.css'],
})
export class StopwatchComponent implements OnInit {
  present = 'welcome';

  routingCount = 0;

  constructor(
    private router: Router,
    private pageToggleService: PageToggleService
  ) {}

  goClock() {
    this.pageToggleService.goPage('/clock');
  }

  startTime($event: any) {
    this.present = $event;
  }

  ngOnInit(): void {}
}

---

Dependency Injection

---

게으름뱅이 개발자~! 요구사항이 내려왔다.

car객체같은 경우에는 타이어 객체가없다면 실행이 불가능하다.

이런 관계를 의존관계라고한다.

 

그런데.. 프로젝트가 커지면 커질 수 록, 객체안의 의존 관계가 복잡해진다.

얽혀버리는 상태가..

 

이런 상태에서 갑자기 요구사항이 바뀐다?

그러면 위와같이 a타이어 주석처리하고 b타이어를 만들어야할것이다.

 

 

이런식이면 클래스를 정의하는 부분으로가서 계속 수정을 해줘야한다.

 

이전 코드에서는 new tire 라고 지정했다면 이번에는 생성자로 바꿔놓는다. (미리 휠을 장착하지않고, 설계도만 적어놓는다는 개념)

이후에

공장을 하나 만든다.

재료를 모아모아

한곳에서 의존성 관리를 할 수 있게끔 만드는 시스템

 

그런데 얘도 프로젝트가 커지면 비슷한 상황이 나온다.

 

 

 

그래서 새로운 프로그래밍 방법을 고안한다.

 

로봇을 하나 만든다. 

 

기존에 이차는 뭐가 필요하고 뭐가필요하고 이미 적어놨었다.

로봇이 하는 역할 => 물어보고 넣어주는 역할 이작업을 로봇에게 프로그래밍을 시킨것

 

 

이런식으로 개발자가 제어하던 것들을 프로그램에 위임을 했다.

 

 

결국 개발자는 맨처음 차에 명세를 해놓는다.

 

 

이런시스템이 dependency injection! 

 

하나의 컴포넌트는 인젝터를 가질 수 있고 없을 수 도있다. 

 

프로바이더를 3가지 방식으로 나타낼 수 있다.

 

모듈에서 넣는방법, 컴포넌트 내에서 넣는방법, 인젝터에다가 넣어주는방법

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TimeDisplayComponent } from './time-display/time-display.component';
import { ButtonsComponent } from './buttons/buttons.component';
import { StopwatchComponent } from './stopwatch.component';
import { RouterModule } from '@angular/router';
import { PageToggleService } from 'src/app/share/page-toggle.service';

@NgModule({
  declarations: [TimeDisplayComponent, ButtonsComponent, StopwatchComponent],
  exports: [StopwatchComponent],
  imports: [CommonModule, RouterModule],
  providers:[PageToggleService]
})
export class StopwatchModule {}

@Component({
  selector: 'app-stopwatch',
  templateUrl: './stopwatch.component.html',
  styleUrls: ['./stopwatch.component.css'],
  providers: [PageToggleService],
})
export class StopwatchComponent implements OnInit {
  present = 'welcome';

  routingCount = 0;

  constructor(
    private router: Router,
    private pageToggleService: PageToggleService
  ) {}

  goClock() {
    this.pageToggleService.goPage('/clock');
  }

  startTime($event: any) {
    this.present = $event;
  }

  ngOnInit(): void {}
}

 

컴포넌트를 사용하면 => 트리구조로 타고타고 올라가서 값을 공유할수도있도, 별개로 구분하여 참조하지않고 사용할 수 있다.

 

 

---

생명주기

---

리액트와 마찬가지로 hook메소드가 있다.