码迷,mamicode.com
首页 > 其他好文 > 详细

从flask视角理解angular(三)ORM VS Service

时间:2017-10-01 10:05:52      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:component   mda   缓存   使用   sel   tor   blog   数据   实现   

把获取模型数据的任务重构为一个单独的服务,它将提供英雄数据,并把服务在所有需要英雄数据的组件间共享。

@Injectable()
export class HeroService {
  getHeroes(): void {} // stub
}

HeroService可以从任何地方获取Hero数据 —— Web服务、本地存储或模拟数据源。

Service不是new()出来的

文档里给出了李菊福的理由:

我们的组件得弄清楚该如何创建HeroService。 如果有一天我们修改了HeroService的构造函数,我们不得不找出创建过此服务的每一处代码,并修改它。 围着补丁代码转圈很容易导致错误,还会增加测试负担。

我们每次使用new都会创建一个新的服务实例。 如果这个服务需要缓存英雄列表,并把这个缓存共享给别人呢?怎么办? 没办法,做不到。

我们把AppComponent锁定到HeroService的一个特定实现。 我们很难在不同的场景中切换实现。 例如,能离线操作吗?能在测试时使用不同的模拟版本吗?这可不容易。

 

在app.component.ts里

import { Component, OnInit } from ‘@angular/core‘;

import { Hero } from ‘./hero‘;
import { HeroService } from ‘./hero.service‘;

@Component({
  selector: ‘my-app‘,
  template: `...‘,//
  providers: [HeroService]
})
export class AppComponent implements OnInit {
  title = ‘Tour of Heroes‘;
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  getHeroes(): void {
    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
  }

  ngOnInit(): void {
    this.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}

1 import

2 在@Component里增加 providers: [HeroService]

3 在APPComponent的构造函数里传入constructor(private heroService: HeroService),这样直接有了heroService的私有属性,不需要在开头声明了

 

Model部分

类似 models.py 定义数据类型

export class Hero {
  id: number;
  name: string;
}

类似 models.py定义的ORM类。可以送进模板用双括号访问属性 {{hero.name}}

ng的双向绑定很给力。

<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>

 

从flask视角理解angular(三)ORM VS Service

标签:component   mda   缓存   使用   sel   tor   blog   数据   实现   

原文地址:http://www.cnblogs.com/xuanmanstein/p/7616671.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!