[続・超入門] Angular4 Serviceを追加してみた

すっばらしいですね!(過保護のかほこ的な)
こんなにすっばらしいブログサイトを立ち上げてくれたキムさんには感謝ですね

どうもざわです。やる気があるうちに書きます。
前回簡単にプロジェクトの作成したので、その続きです。

やること

  • WordPressのAPIから記事一覧を取得するサービスを作成
  • トップ画面に表示

サービス作成

おなじみCLIからサービスを作成します。

ng g service blog

app/blog.service.tsを以下の様に修正します。
blog.asnpce.com部分は適宜変更ください。

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class BlogService {

  private API_URL = "http://blog.asnpce.com/wp-json/wp/v2";

  constructor(private http: Http) { }

  getPosts(){
    return this.http
    .get(this.API_URL + '/posts?_embed').map(response => response.json());
  }
}

_embedをつけるとアイキャッチ画像なども含めて取得できます。

app/app.module.tsを以下の様に修正します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { routing } from './app.routing';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { AboutComponent } from './about/about.component';
import { TopComponent } from './top/top.component'; //追加

import { HttpModule } from '@angular/http';  //追加
import { BlogService } from './blog.service';  //追加

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    AboutComponent,
    TopComponent //追加
  ],
  imports: [
    BrowserModule,
    routing,
    HttpModule //追加
  ],
  providers: [BlogService],  //追加
  bootstrap: [AppComponent]
})
export class AppModule { }

トップ画面用のコンポーネント作成

続いてサービスを利用するコンポーネントを作成します。

ng g component top

app/top/top.component.tsからサービスを呼び出す処理を記述します。

import { Component, OnInit } from '@angular/core';
import { BlogService } from '../blog.service';

@Component({
  selector: 'app-top',
  templateUrl: './top.component.html',
  styleUrls: ['./top.component.css'],
})
export class TopComponent implements OnInit {

  blogs: any[];

  constructor(private blogService: BlogService) { }

  ngOnInit() {
    this.blogService.getPosts()
    .subscribe((data) => {
        this.blogs = data;
    });
  }
}

BlogServiceのgetPosts()から記事一覧を取得して、blogsに格納します。

画面部分

app/top/top.component.htmlにて記事一覧を表示させます。

<ul class="flexbox">
  <li *ngFor="let blog of blogs">
      <span *ngIf='blog._embedded["wp:featuredmedia"][0].media_details!==undefined'>
          <a [href]="blog.link"><img [src]='blog._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url'></a>
      </span>

      <span *ngIf='blog._embedded["wp:featuredmedia"][0].media_details===undefined'>
          <a [href]="blog.link">アイキャッチ画像なし</a>
      </span>
      <p>{{blog.title.rendered}}</p>
  </li>
</ul>

*ngForでblogsを回して、記事数分表示させます。
アイキャッチ画像がない記事の場合エラーになるので、*ngIfで表示を切り替えてます。

一応app/top/top.component.css

.flexbox {  
    display: flex;
    width: 350;
    height: 350;
    flex-flow: row wrap;
}
.flexbox li {
    list-style: none;
    width: 300;
    height: 300;
    margin: 10px;
}

Routerの設定

最後にapp/app.routing.tsにトップコンポーネントを設定しておしまいです。

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TopComponent } from './top/top.component';
import { AboutComponent } from './about/about.component';

const appRoutes: Routes = [
    {
        path: '', //追加
        component: TopComponent //追加
    },
    {
        path: 'menu1',
        component: AboutComponent
    },
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

確認

ng serve --open

http://localhost:4200/にアクセスしてみましょう

記事一覧が表示されてます!(少ないけど!!)
以上、すっばらしいですね!!

サーバサイドエンジニア。オムライスが好物

シェアする

  • このエントリーをはてなブックマークに追加

フォローする