GaramX

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== Service ======

**Angular**는 //component//기반으로 작성하고자 한다. 소스는 독립성을 두어야 할 필요가 있다. 그중하나가 service라는 개념이다. service는 특별한 목적을 가지는 클래스이다. **Injectable** annotation을 사용하여 DI((Dependency Injection))을 제공한다.
<wrap em>
  - 데이타 공유
  - 응용프로그램 로직 구현
  - 외부 접속창구 역할
</wrap>
===== Sample =====
<code javascript employee.service.ts>
import { Injectable } from '@angular/core';

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

  constructor() { }

  getEmployees(){
    return [
      { id: 3, name: "둘리", age: 100030 },
      { id: 4, name: "고길동", age: 30 },
      { id: 5, name: "희동이", age: 30 },
      { id: 5, name: "고철수", age: 30 },
    ];
  }
}
</code>

==== HttpClient ====
[[angular:httpclient|HttpClient]]
<code javascript employee.service.ts>
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { IEmployee } from './employee';
//import { Observable } from 'rxjs';
import { throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

@Injectable({
   providedIn: 'root'
})
export class EmployeeService {
  private _url: string = "/assets/data/employees.json"

  constructor(private http: HttpClient) { }

  getEmployees(): Observable<IEmployee[]>{
    return this.http.get<IEmployee[]>(this._url)
      .pipe(
        catchError(this.errorHandler)
      );
  }
  errorHandler(error: HttpErrorResponse){
    return throwError(error);
  }
}
</code>

GaramX

사용자 도구

사이트 도구

문서 도구