2017-01-24 1 views
4

Angular2를 발견하고 구조를 이해하기 위해 인터넷에서 빠른 시작 프로젝트를 발견했습니다. 구성 요소, 서비스 및 모델의 세 가지 폴더가 있습니다. 구성 요소가 무엇인지 이해하고 있으며 서비스가 데이터를 유지하려는 싱글 톤이라는 것을 알고 있습니다.각도 2의 서비스와 모델의 차이점은 무엇입니까?

문제는 내가 서비스 폴더 안에이 파일을 가지고있다 :

import {Injectable} from "@angular/core"; 
import {Task} from "../models/task"; 

@Injectable() 
export class TaskService { 

    private tasks:Array<Task> = [ 
     new Task("Task 1", false), 
     new Task("Task 2", false), 
     new Task("Task 3", false), 
    ]; 

    getTasks():Array<Task> { 
     return this.tasks; 
    } 

    addTask(name:string) { 
     this.tasks.push(new Task(name, false)); 
    } 

} 

을 그리고 나는이 하나 개의 내부 모델 폴더가 있습니다

export class Task { 

    constructor(public name:string, public done:boolean) { 
    } 

    toggleDone() { 
     this.done = !this.done; 
    } 
} 

을하지만 작업이 간주됩니다 이유를 잘 모르겠어요 모델 및 TaskService 서비스. 작업의 인스턴스를 여러 개 가질 수 있습니까? 그렇다면 TaskService의 인스턴스를 여러 개 가질 수 있으며 싱글 톤이 아닌가? 그렇지 않다면 컴파일러는 그것이 서비스 일 때와 모델 일 때 어떻게 알 수 있습니까? 접미사 때문에?

감사합니다.

답변

6
@Injectable is the answer

우리는 주사 클래스를 등록하고, 우리는 그것을 인스턴스화 할 필요가 없습니다!

우리는 앱 모듈에 프로 바이더로 등록하고, 구성 요소에 프로 바이더로 등록하며, 주입 된 직선적 인 마법을 구할 수 있습니다. Angular, 감사합니다.

이제는 우리의 구성 요소가 Task 클래스에 대해 알 필요조차 없으며 이미 Injectable 서비스에 포함되어 있습니다.

2

많은 서비스 인스턴스를 만드는 것을 막을 수있는 방법은 없습니다. 그러나 그것은 단지 디자인 된 방식이 아닙니다. 이 링크를 한번보세요 https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

새로운 HeroService가 있습니까? 안돼! 다음과 같이 HeroService의 새 인스턴스를 만들 수 있습니다.

heroService = new HeroService(); // do do do this 그 이유는 여러 가지 이유에서입니다.

우리 구성 요소는 HeroService를 만드는 방법을 알아야합니다. HeroService 생성자를 변경 한 경우 서비스를 만들고 수정하는 모든 장소를 찾아야합니다. 패치 코드 주위를 돌아 다니는 것은 오류가 발생하기 쉽기 때문에 테스트 부담이 가중됩니다.

새 서비스를 사용할 때마다 새 서비스를 만듭니다. 서비스가 영웅을 캐쉬하고 해당 캐쉬를 다른 사람들과 공유해야한다면 어떻게 될까요? 우리는 그렇게 할 수 없었습니다.

우리는 AppComponent를 HeroService의 특정 구현에 잠급니다. 다양한 시나리오에 맞게 구현을 전환하는 것은 어려울 것입니다. 오프라인으로 운영 할 수 있습니까? 테스트 중에 다른 조롱 된 버전이 필요합니까? 쉬운 일이 아닙니다.

만약에 ... 만약에 ... 어쩌면 ... 어이, 우리는 할 일이있다!

우리가 얻습니다. 정말로 우리는 그렇게합니다. 그러나 이러한 문제를 피하는 것은 너무나도 쉽습니다. 잘못을 범할 이유가 없습니다.

2

모델 : 개체 구조 (개체 모양).생성자에서 객체의 인스턴스를 만드는 방법을 제공 할 수도 있습니다.

constructor(public name:string, public done:boolean) { 
} 

서비스 : 구성 요소의 두뇌. 모든 열심히 일하십시오 (자료를 얻거나 보내십시오, 계산, ...). 데코레이터 @Injectable() 덕분에 이들을 식별 할 수 있습니다. 서비스 클래스를 만들 때 공급자를 사용하는 구성 요소 공급자 또는 여러 구성 요소에서 해당 구성 요소를 응용 프로그램에서 사용하는 경우 응용 프로그램 모듈에 등록하여 서비스 인스턴스를 만드는 방법을 공급자에게 알려야합니다.

각도 2 아키텍처에 대한 자료를 읽어 보시기 바랍니다 : https://angular.io/docs/ts/latest/guide/architecture.html

관련 문제