Angular2に⼊⾨した話 ~ WebAPI(Rails5)を使った todoアプリを作る ~

やること 1. ⾃⼰紹介 2. ⽬標 3. デモ 4. Rails5 5. Angular2 6. 最後に

⾃⼰紹介 ■ ⼤⽊ 裕介 ■ 株式会社オクト インターン⽣ /学⽣(21) ■ PHP/Ruby on Rails/jQuery ■ Angular2 歴 ５⽇ ■ 初LT

⽬標 ■ 初学者さんに雰囲気を知ってもらう – スライドを持ち帰って⼊⾨してもらう – 初⼼者がRails5とAngular2でtodoアプリを作った過程を紹介

demo https://github.com/y-ohgi/todo_app

環境 $ node –v # v6.2.2 $ npm –v # 3.9.5 $ ruby –v # 2.2.5 $ rails –v # 5.0.0.1

Ruby on Rails

Rails5 ~プロジェクトの作成からscaffold~ $ rails new backend --api # apiモードでプロジェクトの作成 $ cd backend $ bundle install --path vendor/bundler # scaffoldの作成 $ rails g scaffold Todo title:string body:string $ rails db:migrate

Rails5 ~CORS対応~ $ backend/Gemfile gem 'rack-cors' # gem ’rack-cros' $ backend/config/initializers/cors.rb Rails.application.config.middleware.insert_befo re 0, Rack::Cors do allow do origins ‘*’ # ここで許可するドメインを指定！ resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head] end end #Rails.application.config.middleware.insert_ before 0, Rack::Cors do # allow do # origins ’example.com’ # resource '*', # headers: :any, # methods: [:get, :post, :put, :patch, :delete, :options, :head] # end #end

Rails5 ~APIサーバーの起動~ $ bundle install --path vendor/bundler $ rails server # サーバーの起動！

Angular2

Angular2 TODOの全件取得と追加を実装まで

Angular2 ~プロジェクト作成~ $ npm install -g angular-cli # cliの導入 $ ng new frontend # プロジェクトの作成 $ cd frontend $ ng s # サーバーの起動

Angular2 ~プロジェクト作成~ $ npm install -g angular-cli # cliの導入 $ ng new frontend # プロジェクトの作成 $ cd frontend $ ng s # サーバーの起動

Angular2 ~今回触るファイル~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html app.component.ts

Angular2 ~indexの編集~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html app.component.ts

Angular2~indexの編集~ frontend/src/app/app.component.html

{{title}}

Angular2 ~今回触るファイル~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html app.component.ts

Angular2 ~todoクラスの作成~ frontend/src/app/todo.ts # 新規作成 export class Todo{ id: string; title: string; body: string; }

Angular2 ~serviceの作成~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html app.component.ts

Angular2 ~serviceの作成~ $ ng g service todo create src/app/todo.service.spec.ts create src/app/todo.service.ts import { Injectable } from '@angular/core'; @Injectable() export class TodoService { constructor() { } } $ src/app/todo.service.ts

Angular2 ~service scaffoldの編集~ ⚠ ここからソースコードがメインになります！

Angular2 ~serviceの編集(1/4)~ frontend/src/app/todo.service.ts import { Injectable } from '@angular/core'; // 追加 import { Http, Headers, RequestOptions, Response } from '@angular/http'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/switchMap'; import 'rxjs/add/operator/toPromise'; import 'rxjs/add/operator/find'; import { Todo } from './todo';

Angular2 ~serviceの編集(2/4)~ @Injectable() export class TodoService { private url: string = 'http://localhost:3000/todos'; constructor(private http: Http) { } // 全件取得 fetchAll() { } // todo追加 postTodo() { } }

Angular2 ~serviceの編集(3/4)~ // 全件取得 fetchAll(): Promise { return Promise.resolve( this.http.get(this.url).toPromise() .then(res =>res.json().map(todo => todo)) ); }

Angular2 ~serviceの編集(4/4)~ // todo追加 postTodo(title: string, body: string): Promise{ let params = JSON.stringify({ 'todo': { 'title': title, 'body': body } }); let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); return this.http.post(this.url, params, options).toPromise() .then(res => res.json() as Todo); }

Angular2 ~ componentの作成~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html app.component.ts

Angular2 ~ componentの作成~ $ ng g component todo create src/app/todo/todo.component.css create src/app/todo/todo.component.html create src/app/todo/todo.component.spec.ts create src/app/todo/todo.component.ts

Angular2 ~ componentの作成~ $ src/app/todo/todo.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-todo', templateUrl: './todo.component.html', styleUrls: ['./todo.component.css'] }) export class TodoComponent implements OnInit { constructor() { } ngOnInit() { } } $ src/app/todo/todo.component.html

todo works!

Angular2 ~ todo.component.html~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html app.component.ts

Angular2 ~componentの編集 view~ frontend/src/app/todo/todo.component.html

追加

submit

一覧

• {{todo.title}}: {{todo.body}}

Angular2 ~todo.component.ts~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html app.component.ts

Angular2 ~componentの編集(1/3)~ frontend/src/app/todo/todo.component.ts import { Component, OnInit } from '@angular/core'; // 追加 import { Observable } from 'rxjs/Observable'; import { TodoService } from '../todo.service'; import { Todo } from '../todo';

Angular2 ~componentの編集(2/3)~ @Component({ selector: 'app-todo', providers: [TodoService], # 追加 templateUrl: './todo.component.html', styleUrls: ['./todo.component.css'] })

Angular2 ~componentの編集(3/3)~ export class TodoComponent implements OnInit { selecttodo: Todo; todos: Todo[]; constructor(private todoService: TodoService) { } ngOnInit() { this.fetchAll(); } // 全件取得 fetchAll(){ this.todoService.fetchAll() .then((todos) => this.todos = todos); } // todo追加 postTodo(title: string, body: string){ this.todoService.postTodo(title, body) .then((todo) => this.todos.push(todo)); } }

Angular2 delete・updateはgithubで！

最後に ご静聴ありがとうございました！ ツッコミお待ちしております！！！！

No content