Glen Smith

It’s finally time to introduce some Http action into our app by fetching our Friends in async! Along the way we’ll learn about Observables.

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] Fix the friend component deprecation

import { FriendComponent } from './friend';

declarations: [ AppComponent, FeedComponent, MenuComponent, FriendsComponent, FriendComponent, MessagesComponent ],

[ ] First, let’s import the Angular Http Module into app.module.ts

import { HttpModule }    from '@angular/http';

imports: [ BrowserModule, FormsModule, HttpModule, routing ],

[ ] Create a static json file in public/friends.json to simulate our server and hold our users (note the “double” quotes)

[ "Glen", "Joe", "Mary" ]

[ ] Inject our http service into our friend.service.ts

import { Http, Response  }    from '@angular/http';
import { Observable } from 'rxjs';


constructor(private userService: UserService, private http : Http) { }

[ ] Implement our getFriends() method using http.get()

getFriends() : Observable<string[]> {


return this.http.get('/friends.json').
          map((resp : Response) => resp.json() as string[]) ;

}

[ ] Update the our friends.component.ts to subscribe to the Observable

ngOnInit() {
    this.feedService.getFriends().subscribe((newFriends) => {
            this.friends = newFriends; 
            console.log(this.friends); 
    });
}

[ ] Run it and celebrate the win!

[ ] Next up we’ll start looking into CRUD http