Rails5 APIモード + Angular SPA環境 爆速構築の手順 その2。
2017.04.19
この記事は最終更新日から1年以上が経過しています。
前回の続きです。
GitHub
今回はブランチ名「step_connection」に切り替えております。
Rails データ作成
では、早速Railsを用いてデータを作成していきましょう。
rails generate scaffold コマンドでuserを作成します。
$ rails generate scaffold user name:string
migrateファイルが生成されますので、migrateコマンドを実行。
$ rails db:migrate
ブラウザで以下のURLを確認。
または、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。でした。
お疲れ様でした。
次回は、認証・認可周りについて記述出来ればと思います。
ではではぁ。
