ng g service services/boards
CREATE src/app/services/boards.service.spec.ts (333 bytes)
CREATE src/app/services/boards.service.ts (135 bytes)
ng g コマンドでサービスを生成した場合、そのサービスは root に所属します。appモジュールではありません。
以下のように @Injectable に providedIn というのが追加になっていて、
@Injectable({
providedIn: 'root'
})
どのモジュールから追加されるのか指定できるようになってます。
ここが 'root' の場合は app/app.module.ts への登録不要で Dependency Injection できます。
なお root 所属のサービスは全てのモジュールで同じインスタンスが利用されます(つまりシングルトン)。
import { HttpClientModule } from '@angular/common/http';
imports: [
.................................
HttpClientModule,
],
environments/environment.ts
export const environment = {
production: false ,
apiUrl: 'http://localhost:5000'
};
environments/environment.prod.ts
export const environment = {
production: true ,
apiUrl: 'http://localhost:5000'
};
app/services/boards.service.ts を以下の内容で保存
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { environment } from './../../environments/environment';
@Injectable({
providedIn: 'root'
})
export class BoardsService {
constructor(private httpClient: HttpClient) { }
getIndex(): Observable<any> {
return this.httpClient.get(environment.apiUrl + '/boards/');
}
}
app/boards/boards.component.ts を以下の内容で保存
export class BoardsComponent implements OnInit {
boards_loop = [];
constructor(
private boardsService: BoardsService ,
)
ngOnInit() {
this.boardsService.getIndex().subscribe(res => {
this.boards_loop = res;
});
}
app/boards/boards.component.html に以下を追加
<ul>
<li *ngFor="let board of boards_loop">
<span>{{board.id}}</span> : {{board.name}}
</li>
</ul>