title: Move http functionaity into its own Service with Angular2 and TypeScript
body: <p>I'm currently trying to teach myself Angular2 and TypeScript after happily working with Angular 1.* for the last 4 years! Anyway, I have a top level component that creates a property that is derived from a type I have created in another class. With my component when <code>ngOnInit()</code> is called I make a <code>http</code> call to a phoney REST service I wrote as a back end. Now when writing apps using AngularJS I would put my <code>$http</code> tasks into a service and inject them into my controllers... I would like to do the same with my component. Here's my component without the service code activated... notice the comments</p>
  
  <pre><code>import {Component, OnInit} from 'angular2/core';
  import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
  import {Home} from './components/home/home';
  import {UserStatus} from './types/types.ts'; // this is why my UserStatus Type is kept
  import {UserData} from './services/user-data/UserData.ts'; // here is where I wish to write my sevice to perform the http tasks...
  import {Http, Headers} from 'angular2/http';
  
  @Component({
      selector: 'app', // &lt;app&gt;&lt;/app&gt;
      providers: [...FORM_PROVIDERS],
      directives: [...ROUTER_DIRECTIVES],
      pipes: [],
      styles: [require('./app.scss')],
      template: require('./app.html')
  })
  
  export class App {
  
      userStatus: UserStatus;
  
      constructor(public http: Http) {
          this.userStatus = new UserStatus();
      }
  
      ngOnInit() {
  
          // I really want to put this code into a seperate class and provide it as a service...
          var headers = new Headers();
          headers.append('Content-Type', 'application/json');
          this.http.get('/restservice/userstatus', {headers: headers})
              .map((data: any) =&gt; data.json())
              .subscribe(
              (data: any) =&gt; {
                  this.userStatus = data;
              },
              err =&gt; console.log(err), // error
              () =&gt; console.log('getUserStatus Complete') // complete
  
          );
  
          /* I'd like to factor the above into a service kept in a diffent file like so*/
          /*
  
           UserData.getUserStatus().then((resp) =&gt; {
              this.userStatus = resp;
           })
           */
  
      }
  }
  </code></pre>
  
  <p>Now here is my type... for my <code>userStatus</code> property... </p>
  
  <pre><code>export class UserStatus {
  
      constructor (
          public firstName?: string,
          public fullPersId?: number,
          public goldUser?: boolean,
          public hasProfileImage?: boolean,
          public hideMoblieNavigationAndFooter?: boolean,
          public persId?: string,
          public profileName?: string,
          public profilePicture?: string,
          public showAds?: boolean,
          public siteId?:  number,
          public url?: string,
          public verified?: boolean,
          public appOS?: any,
          public formerName?: any
      ) {
  
          this.firstName = firstName || '';
          this.fullPersId = fullPersId || 0;
          this.goldUser = goldUser || false;
          this.hasProfileImage = hasProfileImage || false;
          this.hideMoblieNavigationAndFooter = hideMoblieNavigationAndFooter || false;
          this.persId = persId || '';
          this.profileName = profileName || '';
          this.profilePicture = profilePicture || '';
          this.showAds = showAds || false;
          this.siteId =  siteId || 0;
          this.url = url || '';
          this.verified = verified || false;
          this.appOS = appOS || null;
          this.formerName = formerName || null;
  
      }
  }
  </code></pre>
  
  <p>Now I wish to put the http functionality of my Component into a serperate service... I started to write the following code (PLEASE DON'T LAUGH, I really am new to Angular2)</p>
  
  <pre><code>import {Injectable} from 'angular2/core';
  import {Http, Headers} from 'angular2/http';
  import {UserStatus} from '../../types/types.ts';
  
  @Injectable()
  export class UserData {
  
      constructor(public http:Http) {
      }
  
      getUserStatus(): any {
          var headers = new Headers();
          headers.append('Content-Type', 'application/json');
          this.http.get('/restservice/userstatus', {headers: headers})
              .map((data: any) =&gt; data.json())
              .subscribe(
              (data: any) =&gt; {
                  return data;
              },
              err =&gt; console.log(err), // error
              () =&gt; console.log('getUserStatus Complete') // complete
          );
      }
  }
  </code></pre>
  
  <p>Now I was hoping I could call the service <code>getUserStatus()</code> method to perform the HTTP data fetch and call it in my <code>App</code> Component something like (I am using AngularJS 1.x promise example, but I know I should really use observables... I just don't know how!)</p>
  
  <pre><code>ngOnInit() {
  
       UserData.getUserStatus().then((resp) =&gt; {
          this.userStatus = resp;
       });
  
      }
  </code></pre>
  
  <p>This is obviously rubbish and I don't know what I am doing (examples/tutorials for Angular2 don't seem to be that great or practical so far). Can someone please show my how to wire the service then call it correctly in my Component?</p>