このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2017.04.19

Rails5 APIモード + Angular SPA環境 爆速構築の手順 その2。

前回の続きです。

GitHub

rails-api-angular-example

今回はブランチ名「step_connection」に切り替えております。

Rails データ作成

では、早速Railsを用いてデータを作成していきましょう。

rails generate scaffold コマンドでuserを作成します。

$ rails generate scaffold user name:string

migrateファイルが生成されますので、migrateコマンドを実行。

$ rails db:migrate

ブラウザで以下のURLを確認。

http://localhost:4200/users

または、curlコマンドで確認。

$ curl http://localhost:4200/user

すると、空の配列が返却されるのが確認できます。

[]

rails consoleにて、Userのデータを作成、挿入します。

rails console

$ rails c
$ user = User.new(name:'daisuke.takayama');

‘daisuke.takayama’の nameを持ったユーザーを作成。

保存。

$ user.save

再び、ブラウザ または curlコマンドで確認すると、userが作成されているのが確認できます。

[{"id":1,"name":"daisuke.takayama","created_at":"2017-04-09T11:49:55.040Z","updated_at":"2017-04-09T11:49:55.040Z"}]

コンポーネント作成 & router追加

Userのデータを作成出来ましたので、Angular側の作業を行なっていきます。

GitHub
commit

ngコマンドで、「user」の、componentを作成します。

$ ng g component user

以下の様に「component」などディレクトリを切ってまとめた方が良いかと思いますが、今回はとりあえずそのままで作成して進めていきます。

$ ng g component component/user

app/user/user.component.ts

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() {

  }

}

onInitのinterfaceをimplements用いて実装します。

ルーティング設定

GitHub
ng g component user & add routing

Angular CLIを用いている場合、アプリケーションを作成する際、以下のコマンドでルーティングに伴うファイルも作成と同時に生成することが可能です。

$ ng new your-project --routing

ですが、今回 上記のコマンドは行なっていないので、手動で「app-routing.module.ts」ファイルを作成します。

app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './user/user.component';

const routes: Routes = [
  {
    path: 'users',
    component: UserComponent,
    children: []
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

NgModule、component、@angular/routeをそれぞれimport。

「user」の URL path設定を行います。

add routerLink

GitHub
ng g component user & add routing

app/user/user.component.html

<h1>
  {{title}}
</h1>
<a routerLink="/users" routerLinkActive="active">users</a>
  
<router-outlet></router-outlet>

useHashオプション追加

APIのエンドポイントと、フロントのURLを分離するために、useHashオプションをtrueにします。

こちらを行うことによって、URLは「http://hoge/#/」 の様に「#」がrootとなるURLに設定する事が出来ます。

GitHub
add routes option useHash

app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './user/user.component';

const routes: Routes = [
  {
    path: 'users',
    component: UserComponent,
    children: []
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

User サービスクラス作成

Userに関するデータをhttp通信行えるように、サービスクラスを作成します。

GitHub
ng g service user

「ng g service」コマンドで、「user」のサービスクラスを生成します。

$ ng g service user

app/user.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {

  constructor() { }

}

User 抽象クラス作成

「ng g class」コマンドを用いて、「user」の抽象クラスである「User」を作成します。

$ ng g class user

GitHub
ng g class user

app/user.ts

export class User {
}

User 抽象クラス プロパティ追加

DBデータで「name」カラムを保持しているので、それと対となる「name」のプロパティを追加します。

GitHub
add user class property

app/user.ts

export class User {
  name: string;
}

UserService classの実装

UserService classの実装を行なっていきます。

GitHub
create UserService

app/user.service.ts

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

import { User } from './user';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class UserService {
  private userUrl = '/users';

  constructor (private http: Http) {}

  getUser(): Observable<User[]> {
    return this.http.get(this.userUrl)
      .map(this.extractData)
      .catch(this.handleError);
  }

  // レスポンスデータ整形
  private extractData(res: Response) {
    if (res.status < 200 || res.status >= 300) {
      throw new Error('Bad response status: ' + res.status);
    }
    let body = res.json();

    return body || { };
  }

  // エラー処理
  private handleError(error: any) {
    let errMsg = error.message || 'Server error';

    return Observable.throw(errMsg);
  }

}

‘/users’のエンドポイントから、該当するユーザーデータを取得できるように実装します。

getUser関数を実行することによって、Userの配列をを持ったObservable型で返却します。

app/user/user.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';

import { User } from '../user';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css'],
  providers: [UserService]
})
export class UserComponent implements OnInit {
  users: User[];

  constructor(private userService: UserService) { }

  getUser(): void {
    this.userService.getUser()
      .subscribe((users) => {
        this.users = users;
      });
  }

  ngOnInit() {
    this.getUser();
  }
}

HTML側は、usersの数だけngForで繰り返し、描画します。

app/user/user.component.html

<p>
  user works!
</p>

<ul class="userList" *ngIf="users">
  <li *ngFor="let user of users">
    <p>ID: <span>{{user.id}}</span></p>
    <p>名前: <span>{{user.name}}</span></p>
  </li>
</ul>

ビルド

最後にビルドコマンド(ng build –prod)を行い、digest付きのファイルを生成。

GitHub
ng build –prod

$ ng build --prod

それでは、確認。

ブラウザで以下のURLを表示。
http://localhost:3000/

「users」のリンクをクリックし、以下の様にユーザーの情報が表示されれば成功です。

最後に

と、Rails5 APIモード + Angular SPA環境 爆速構築の手順 その2。でした。
お疲れ様でした。

次回は、認証・認可周りについて記述出来ればと思います。

ではではぁ。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。