Scribd
Upload
78 views11 pages

Rest API Call

This document discusses creating an Angular 2 application that interacts with an API to retrieve data. It involves cloning a quickstart Angular 2 repo, installing dependencies, and creating a data service to make HTTP requests to retrieve user data from the GitHub API. The data service catches any errors. The AppComponent imports the data service, calls its getUserData method on a button click, and displays the returned user data in the template.

Uploaded by

Lucky B
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
78 views11 pages

Rest API Call

This document discusses creating an Angular 2 application that interacts with an API to retrieve data. It involves cloning a quickstart Angular 2 repo, installing dependencies, and creating a data service to make HTTP requests to retrieve user data from the GitHub API. The data service catches any errors. The AppComponent imports the data service, calls its getUserData method on a button click, and displays the returned user data in the template.

Uploaded by

Lucky B
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Interacting with Services & API: Angular 2

In this post we are going to create an Angular 2


application from scratch, the target of this post is to
explain the process to create a service and use an API to
get the data from that, where we will also see, how to
handle the response of the API, preview the response on
the view and handle the exceptions if any found in the
API call.

Let’s start with the process: Just clone this


quickstart AngularJs 2 repo
git clone
https://github.com/angular/quickstart.gi
t ngService

we will work over this application, don’t worry


we’ll remove everything else that is not necessary
for this application.
after cloning the same run ` npm install` it will
install all the required dependencies to run the
application, now run `npm start` this will run the
application on the default port …:3000 and you
will see Hello Angular. Hurray now we are ready to
work over it.
We will be using the github API to interact with
and get data: here it is.
https://api.github.com/users/

Hope you already opened the cloned project in your


favorite editor, in my case it is VS Code. Just head
to the src -> app folder in the application, here you
will see app.component this is the already created
component in the cloned project. I assume you are
already aware about the basics of AngularJs 2 like,
components, basic TypeScript etc.
Let’s start coding: Create a new service under app
folder for AppComponent, so just right click on app
folder and create a new file name: data.service.ts.
data.service.ts
1
import 'rxjs/add/operator/map';
2
import 'rxjs/add/observable/of';
3
import 'rxjs/add/observable/throw';
4
import 'rxjs/add/operator/catch';
5
import {Observable} from
'rxjs/Observable';
6

7
import {Component, Injectable} from
'@angular/core';
8
import {Http, Response } from
'@angular/http';
9

10
@Injectable()
11
export class DataService {
12

13
constructor(private http: Http){}
14

15
getUserData(){
16
return
this.http.get('/app/trainingData.json
').map(
17
(response: Response) =>
response.json()
18
)
19
.catch(this._errorHandler);
20
}
21
22
console.error("Problem in
service :::: " + error);
23
return Observable.throw(error ||
"Server Error");
24
}
25
}

For now i have created a file


“trainingData.json” and pasted the data that
came from the github api, and giving the path
of this data file in my http get call.
here we have created the data service that is hitting
the http request to get the data from that api, and
we are catching the error there as well, why we
doing this is because if our api doesn’t respond as
expected we will catch the error there and our view
will not distort at all.
now, app.component.ts
1
import { Component } from
'@angular/core';
2
import {DataService} from
"./data.service";
3
import {Http } from '@angular/http';
4

5
@Component({
6
selector: 'my-app',
7
template: ` <button
(click)="loadData()">Load
Data</button>
8
<h1>Hi : {{userData.login}}</h1>
9
`
10
})
11
export class AppComponent {
12
constructor(private dataService:
DataService){}
13

14
userData:any=[];
15

16
loadData(){
17
this.dataService.getUserData().subscr
ibe(
18
(data) => this.userData = data
19
)
20
}
21
}

So when you click the button, the template tag


contains a button with a function, loadData(),
that will show the data from the
trainingData.json.
Download the code from here: Github
https://github.com/nikhilknoldus/ngService

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy