Usually you would have your own backend API to serve your frontend Angular application some users. Since a backend API isn't the focus for this course, we'll be using GitHub's API. The cool thing about GitHub's API is that you can access it without authentication.
For instance, hit this url and see we can get users!
https://api.github.com/users?per_page=10
Table of Contents
This is the url we'll use to get users inside of Angular.
Creating a UserService
Whenever we want to make calls to get data in Angular, we'll create a service. In this case, I'll call it UserService
. You could also call it GitHubService
or GitHubUserService
(especially if you will create multiple GitHub services for users, repos, etc). It all depends on your application. We'll go with UserService
since we're not doing anything too complex.
Use the Angular CLI:
ng g service user
This creates a user.service.ts
right in the src/app
folder. We'll look at organizing and where we should be putting services that are used across our application. While we could add this to only our UsersModule
, I like defaulting services to the top level of our application so that the same service instance is used whenever it is used across our components.
Adding the UserService to Our App
Open up app.module.ts
and add UserService
to the providers
array. Remember:
- Components/directives go into
declarations
- Modules go into
imports
- Services to into
providers
// src/app/app.module.ts
// ...
import { UserService } from './user.service';
@NgModule({
declarations: [
// ...
],
imports: [
// ...
],
providers: [
UserService
],
bootstrap: [AppComponent]
})
export class AppModule {}
Now our application has access to the UserService.
Grabbing the HTTPClient Library
We now have our service. The next step is to get ready to call GitHub's external API. In JavaScript applications, you would use some kind of HTTP library; Axios is the popular one these days in addition to JavaScript's built-in fetch API.
Angular provides it's own HTTP Client library which works really well with the overall Angular framework. It brings helpful tools like easy HTTP interceptors for attaching authentication headers, returning data as Observables, and more.
To start using the HTTP library, we can add it to the main AppModule in the providers
array:
// ...
import { HttpClientModule } from '@angular/common/http';
// ...
@NgModule({
declarations: [
// ...
],
imports: [
// ...
HttpClientModule
],
// ...
})
Now we can use the HTTP Client from all across our application. We can build out our UserService
now.
Calling GitHub from Our UserService
Open up the user.service.ts
file and we'll need this service to have one method, get users.
We'll create a method called getUsers()
and use the HTTP Client to grab the data from that API. The things we have to do are:
- Inject the HTTP Client so we can use it
- Define our API URL as https://api.github.com/users
- Create a
getUsers
method
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class UserService {
// define our class properties. apiUrl is what we need
// usually you could get this from an environment file
apiUrl = 'https://api.github.com/users';
// inject the HttpClient as http so we can use it in this class
constructor(private http: HttpClient) {}
// return what comes back from this http call
getUsers() {
return this.http.get(`${this.apiUrl}?per_page=10`);
}
}
Most of this is standard ES6 class functionality. If you're not familiar with classes, this may look a bit foreign to you. We have:
- imports at the top
- @Injectable decorator to tell Angular that this is going to be a service
- export a class called
UserService
- return an
http.get
If you're not familiar with classes, I would recommend browsing some ES6 content on classes and features.
Now that our service is created, we can use it in the next lesson!