title: Angular 2: multiple HTTP services
body: <p>We are using Angular 2 in our projects. So far we use <code>in-memory-web-api</code> in our data service in development:</p>
  
  <p><strong>app.module.ts</strong>:</p>
  
  <pre><code>imports: [
      HttpModule,
      InMemoryWebApiModule.forRoot(MockData),
      ...
  ]
  </code></pre>
  
  <p><strong>data.service.ts</strong>:</p>
  
  <pre><code>constructor(private http: Http) { }
  </code></pre>
  
  <p>Now it's time to fetch some real data. However, we are not able to replace Mock Data all at once. How do I configure my data service to something like:</p>
  
  <pre><code>constructor(private fakeHttp: FakeHttp, /* this one use in-memory-api */
              private http: Http /* this one goes to real remote server */) { }
  </code></pre>
  
  <p>so we can gradually move mock data out as project progresses?</p>