ionic4 httpClientを使ってgithubUsersの一覧を表示する

今回はデフォルトのangular7でsidemenuのテンプレートを使って実装していきます。

ionic start ionic4-sample sidemenu

そしてionic generate コマンドでgithub apiのserviceと表示するpageを作成します。

ionic g service github
ionic g page github

そうすると以下のsrc/app配下にpageのディレクトリとgithub.serviceが追加されます。
generateを使ってpageを作成するとapp-routing.moduleに自動的に追加されるようです。

├── app-routing.module.ts
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
├── github
│   ├── github.module.ts
│   ├── github.page.html
│   ├── github.page.scss
│   ├── github.page.spec.ts
│   └── github.page.ts
├── github.service.spec.ts
├── github.service.ts
├── home
└── list

apiを呼べるように'@angular/common/http'をapp.moduleに追加します。

+import { HttpClientModule } from '@angular/common/http';

 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
   imports: [
     BrowserModule,
     IonicModule.forRoot(),
     AppRoutingModule,
+    HttpClientModule
   ],

github.service.tsでgithubUserを呼び出すhttpClientの処理を書きます。

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class GithubService {
  public users:any = [];
  private headers: any = new HttpHeaders({'Content-Type': 'application/json'});

  constructor(public http: HttpClient) {
  }

  getUsers(num:number = 0 ) {
    return this.http.get(`https://api.github.com/users?since=${num}`)
      .pipe(map(results => { return results }));
  }
}

表示するためのgithub page(ts, html)を修正

# github.page.ts
import { Component, OnInit } from '@angular/core';
import { GithubService } from '../github.service';

@Component({
  selector: 'app-github',
  templateUrl: './github.page.html',
  styleUrls: ['./github.page.scss'],
})
export class GithubPage implements OnInit {
  users:any = [];

  constructor(
    private githubService: GithubService
  ) {
    this.getUserList();
  }

  ngOnInit() {
  }

  getUserList() {
    this.githubService.getUsers().subscribe(data => {
      this.users = data;
    },err => {
      console.log(err);
    });
  }
}

# github.page.html
<ion-header>
  <ion-toolbar>
    <ion-title>github</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let user of users">
      <ion-avatar item-start>
        <ion-img [src]="user.avatar_url"></ion-img>
      </ion-avatar>
      {{ user.id }} {{ user.login }}
    </ion-item>
  </ion-list>
</ion-content>

sidemenuにgithub pageを追加するためにapp.component.tsのappPagesに追加したら以下のようなページが表示されます。

export class AppComponent {
  public appPages = [
    {
      title: 'Home',
      url: '/home',
      icon: 'home'
    },
    {
      title: 'List',
      url: '/list',
      icon: 'list'
    },
+    {
+      title: 'GithubUsers',
+     url: '/github',
+     icon: 'list'
+   }
  ];