アプリケーションの作成

この章では、ユーザーリストを表示する簡単なアプリケーションを例に、Angularアプリケーションの設計について考えていきます。

ユーザーリストの取得

この章のサンプルアプリケーションでは、https://reqres.in/ のユーザーAPIで取得したユーザーを一覧して表示します。

https://reqres.in/api/users

AppComponent

最初の状態では、すべての処理を AppComponent だけでおこないます。サービスへの分割も、コンポーネントの分割もまだ何もおこなっていません。

app/user.ts
export interface User {
id: string;
first_name: string;
last_name: string;
}
app/app.component.ts
app/app.component.html
app/app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from './user';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
users: User[] = [];
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get<{ data: User[] }>('https://reqres.in/api/users').subscribe(resp => {
this.users = resp.data;
});
}
}
app/app.component.html
<ul>
<li *ngFor="let user of users">
#{{ user.id }} {{ user.first_name }} {{ user.last_name }}
</li>
</ul>
ユーザーリスト

次のページからは、このアプリケーションを段階的にリファクタリングしていきます。