Angular 2中服务和模型的区别?

时间:2017-01-24 23:40:39

标签: angular typescript

我正在发现Angular2,我在互联网上找到了一个快速启动项目,以了解结构。我有另外三个文件夹:组件,服务和模型。 我理解什么是组件,因为我理解服务是一个单例,我想要保留我的数据。

问题是我在services文件夹中有这个文件:

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;
    }
}

但是我不确定为什么Task被认为是模型而TaskService被认为是服务。 是因为我可以拥有多个任务实例吗?如果是这样,那么我可以有多个TaskService实例而不是单例吗?如果没有,编译器如何知道它何时是服务以及何时是模型?因为后缀?

谢谢。

3 个答案:

答案 0 :(得分:6)

@Injectable is the answer

我们注册了一个注射类,我们不必实例化它!

我们将其注册为应用程序模块中的提供程序,将其注册为我们组件中的提供程序,并且嘿,您将获得注入的直接魔法,感谢Angular,您的数据boi。

而且,现在我们的组件甚至不需要知道任何有关Task类的信息 - 它已经包含在我们的Injectable服务中。

答案 1 :(得分:2)

模型:对象的结构(对象的外观)。您还可以在构造函数中提供如何创建对象的实例。

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

服务:组件的大脑。做所有艰苦的工作(获取/发送数据,计算......)。由于装饰器@Injectable(),您可以识别它们。当您创建服务类时,您必须告诉提供者如何通过在使用它们的组件提供程序或app模块中注册它们来创建服务实例,如果有多个组件在应用程序中使用它们的话。

我建议阅读有关角度2架构的文献: https://angular.io/docs/ts/latest/guide/architecture.html

答案 2 :(得分:1)

没有什么可以阻止您创建许多服务实例。但它不是它的设计方式。请查看此链接https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

  

我们是否新推出HeroService?没门!   我们可以用这样的新东西创建一个新的HeroService实例:

     

heroService = new HeroService(); //不要这样做   由于以下几个原因,这是个坏主意,包括

     

我们的组件必须知道如何创建HeroService。如果我们改变HeroService构造函数,我们必须找到我们创建服务的每个地方并修复它。在修补代码中运行是容易出错的,并增加了测试负担。

     

我们每次使用新服务时都会创建新服务。如果服务应该缓存英雄并与其他人共享缓存怎么办?我们无法做到这一点。

     

我们将AppComponent锁定到HeroService的特定实现中。切换不同场景的实现很困难。我们可以离线运营吗?我们需要测试不同的模拟版本吗?不容易。

     

如果......如果......嘿,我们还有工作要做!

     

我们明白了。我们真的。但是,避免这些问题是非常容易的,没有任何借口可以做错。