[Angularjs2] 앵귤러2 HelloWorld Service - 서비스 사용하기

앵귤러2  HelloWorld Service - 서비스 사용하기

1. 서비스의 역할

1). 애플리케이션 관심사와 개별 컴포넌트 관심사의 분리

- 모든 컴포넌트의 공통적으로 존재하는 공통 관심 기능을 서비스로 만든다.

2). 컴포넌트 중간에서 데이터 중개자의 역할

- 컴포넌트 사이의 느슨한 연결을 하면서 데이터 교환의 중개인 역할을 한다.

3). 관심사의 분리

- 데이터 서비스, 로깅 서비스, 비즈니스 로직 서비스와 같은 관심사를 각각 다르게 컴포넌트에 적용 할 수 있다.

4). 코드 재사용성 향상

2. HelloWorld 서비스

1) hello.service.ts

- $ ng g service hello

import { Injectable } from '@angular/core'; @Injectable() export class HelloService { sayHello(){ return "Hello Service"; } constructor() { } }

- @Injectable은 주입 가능하는 클래스를 의미 한다.

2) hello.component.ts

import { Component, OnInit } from '@angular/core'; import {HelloService} from "../hello.service"; @Component({ selector: 'app-hello', templateUrl: './hello.component.html', styleUrls: ['./hello.component.css'], providers:[HelloService] }) export class HelloComponent implements OnInit { welcome : string; constructor(private helloService:HelloService) { this.welcome = helloService.sayHello(); } ngOnInit() { } }

- providers라는 키워드를 이용하여 서비스를 등록해야 사용가능하다. 이후 생성자를 통한 객체의 의존주입을 한다.

- new 키워드를 이용하여 객체를 생성해도 문제없다.  그러나 추천하지 않는다.

let hello = new HelloService(); this.welcome = hello.sayHello();