HTTP Requests with Angular 2

The getting started section of Angular 2 was actually really well documented.  I went through the whole thing and had no problems.  Once I got to the service section, it talked about the part I really wanted: getting data.  However, I was quite disappointed when I read this line:  “Someday we’re going to get heroes from a remote server. We don’t call http yet, but we aspire to in later chapters.”

Without getting data from a remote server, I felt that I couldn’t really use this as a springboard for a working app.  As I tried to learn more about using HTTP to get data, I was surprised how much different it was than expected and how it did not feel intuitive.  I feel that I’ve found a simple way to do it that I’ve used a lot since.  I’m not 100% sure if it’s the best way (please let me know what I can improve) but it is a way that works.

HTTP is not included by default

Typical ng2 HTTP methods are not included by default.  I don’t understand it.  Maybe it’s just me that feels that if you build a web app you’re going to want to make HTTP requests.

So, let’s get to it.

First, let’s handle the calls using a promise.


// Service
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class ClassService {
    constructor(
        private http: Http) {}

    public getClassLists(): Promise {
        const endpoint = `https://domain.com/getStuff`;

        return this.http
            .get(endpoint).toPromise();
    }
}


// The component receiving the data
import {
    Component,
    OnInit
} from '@angular/core';

import { ClassService } from "../../services/class.service";

@Component({
    selector: 'classes',
    styleUrls: ['./classes.scss'],
    templateUrl: './classes.html'
})


export class ClassesComponent implements OnInit {

    constructor(
        private classService: ClassService
    ) { }
    public ngOnInit() {

        this.classService.getClassLists()
            .then((data) => {
                console.log("data", data);
            });

        
    }
}

Easy as pie, am I right? If you’re a fan of observables, we can do it that way too.


// The service
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ClassService {
    constructor(
        private http: Http) {}

    }

    public getClassLists() {
        const endpoint = `${GlobalVariables.globalAPIURL}0/lanschool/classLists`;

        return this.http.get(endpoint)
        .map(res => res.json()
    }
}




// The component receiving the data
import {
    Component,
    OnInit
} from '@angular/core';

import { ClassService } from "../../services/class.service";

@Component({
    selector: 'classes',
    styleUrls: ['./classes.scss'],
    templateUrl: './classes.html'
})

export class ClassesComponent implements OnInit {

    constructor(
        private classService: ClassService
    ) { }

    public ngOnInit() {

        this.classService.getClassLists()
            .subscribe( res => {
                console.log("data", res);
            });

        
    }
}

Ta da! Now you have http data!