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

Archives Details

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

Angular2

2017.04.19

この記事は最終更新日から1年以上が経過しています。

前回の続きです。

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。でした。
お疲れ様でした。

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

ではではぁ。

Comment

Related Article

Angular 「スマホ・PC」でcomponentとCSSを切り替える(分岐させる)方法

2017.10.15

Angular4 + SSR(サーバーサイドレンダリング)(Universal JavaScript)環境の最小最短 構築方法

2017.10.08

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

2017.04.19

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

2017.04.10

Angular CLIで、Angularアプリをかんたん楽々構築!

2017.04.09

Angular2の始め方。Angular2 公式チュートリアル – HTTP(簡単な和訳)

2017.04.09

Angular2の始め方。Angular2 公式チュートリアル – Routing(簡単な和訳)

2017.04.06

Angular2の始め方。Angular2 公式チュートリアル – Services(簡単な和訳)

2017.04.03

Angular2の始め方。Angular2 公式チュートリアル – Multiple Components(簡単な和訳)

2017.04.03

Angular2の始め方。Angular2 公式チュートリアル – Master/Detail(簡単な和訳)

2017.01.20

CATEGORY LIST

LATEST NEWS

MacでWindowsアプリ(TeraPad)を動かす(Wine 4.0.3)

mac

2019.12.08

kindleストア7周年記念セール中!技術書なども40%OFF以上でお買い得!(11/7まで)

イベント

2019.10.28

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

JavaScript

2019.10.21

Arduino IDEとArduino接続して、サクッと設定。

電子工作

2019.08.15

ついに、M5Stack Gray 購入!! その他諸々、購入したボードの振り返りなど。

電子工作

2019.08.12

正規表現 先読み後読み 論理積

JavaScript

2019.07.28

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

JavaScript

2019.06.22

Wordpress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

WordPress

2019.06.18

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US