このサイトは、只今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

まだ間に合う!!「RSコンポーネンツ」で、ラズベリーパイが 配送料無料で購入できるキャンペーン中!

RaspberryPi

2018.12.07

IntelliJ + Spring Initializr + Gradleで、サクッとSpring Boot環境を構築

Java

2018.11.24

Mavenを用いたアプリケーション作成方法

Java

2018.11.24

Gradleを用いたアプリケーション作成方法

Java

2018.11.23

Jenkins 認証情報「Jenkinsマスター上の~/.sshから」が表示しない

tool

2018.11.17

流れで、Raspberry Pi Zero WHを購入。気がつけばもうラズパイ4台。

RaspberryPi

2018.11.06

安く電子工作を始めるなら、電子パーツ購入は「aitendo」がおすすめ!

RaspberryPi

2018.11.06

ASUS Chromebook Flip C101PAに、Visual Studio Codeをインストール

Chromebook

2018.10.15

Chromebookに、Ubuntu (Xubuntu)をインストールしたあとの日本語入力設定

Chromebook

2018.10.14

ASUS Chromebook Flip C101PAに、Ubuntu (Linux)インストール手順

Chromebook

2018.10.10

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

JavaScript

2018.09.26

安い!軽い!早い! ノートPC(開発環境)。 Chromebookをついに購入いたしました!

Chromebook

2018.07.22

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US