アプリケーションの作成

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

ユーザーリストの取得

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

https://jsonplaceholder.typicode.com/users

AppComponent

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

app/user.ts
export interface User {
id: string;
name: string;
}
app/app.component.ts
app/app.component.html
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<User[]>('https://jsonplaceholder.typicode.com/users').subscribe(data => {
this.users = data;
});
}
}
<ul>
<li *ngFor="let user of users">
#{{ user.id }} {{ user.name }}
</li>
</ul>
ユーザーリスト

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