2017-01-24 3 views
4

私はAngular2を発見しました。構造を理解するために、インターネットでのクイックスタートプロジェクトが見つかりました。コンポーネント、サービス、モデルの3つのフォルダがあります。 コンポーネントとは何かを理解しています。サービスはデータを保持したいシングルトンです。サービスとモデルの違いは角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)); 
    } 

} 

をそして私はこの1つの内部モデルのフォルダがあります。

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 not do これはいくつかの理由で悪い考えです

私たちのコンポーネントはHeroServiceの作成方法を知っていなければなりません。 HeroServiceコンストラクタを変更した場合、サービスを作成して修正するすべての場所を見つける必要があります。パッチコードの回りを走り回ると、エラーが起こりやすくなり、テストの負担が増します。

新しいサービスを使用するたびに新しいサービスを作成します。ヒーローをキャッシュしてそのキャッシュを他のユーザーと共有する必要がある場合はどうなりますか?私たちはそれをすることができませんでした。

私たちはAppComponentをHeroServiceの特定の実装にロックしています。シナリオごとに実装を切り替えるのは難しいでしょう。オフラインで操作できますか?テスト中に異なる模擬バージョンが必要なのでしょうか?簡単ではありません。

どうすればよいのでしょうか...ねえ、やるべきことがあります!

私たちはそれを手に入れます。本当に私たちはします。しかし、これらの問題を避けるのはとてもばかげて簡単に間違っているという弁解はありません。

2

モデル:オブジェクトの構造(オブジェクトがどのように表示されるか)。また、コンストラクタで、オブジェクトのインスタンスを作成する方法を指定することもできます。

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

サービス:コンポーネントの脳。すべてのハードワーク(データの取得/送信、計算など)を行います。あなたはデコレータ@Injectable()のおかげでそれらを識別することができます。サービスクラスを作成する際には、プロバイダを使用するコンポーネントプロバイダにサービスを登録する方法や、複数のコンポーネントがアプリでそれらを使用する場合にアプリケーションモジュールを登録する方法をプロバイダに指示する必要があります。

角度2のアーキテクチャに関する文献を読むことをお勧めします。 https://angular.io/docs/ts/latest/guide/architecture.html

関連する問題