Build Your First Angular Website: Lesson 13 of 18

Creating a User Service to Connect to GitHub

Up Next

Showing a List of GitHub Users

Autoplaying in 7 seconds!

Cancel

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:

    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!

    Chris Sevilleja

    173 posts

    Founder of Scotch.io. Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.