Angular2に入門した話

Transcript

1. Angular2に⼊⾨した話 ~ WebAPI(Rails5)を使った todoアプリを作る ~
2. やること 1. ⾃⼰紹介 2. ⽬標 3. デモ 4. Rails5 5. Angular2 6. 最後に
3. ⾃⼰紹介 ▪ ⼤⽊ 裕介 ▪ 株式会社オクト インターン⽣ /学⽣(21) ▪ PHP/Ruby on Rails/jQuery ▪ Angular2 歴 ５⽇ ▪ 初LT
4. ⽬標 ▪ 初学者さんに雰囲気を知ってもらう – スライドを持ち帰って⼊⾨してもらう – 初⼼者がRails5とAngular2でtodoアプリを作った過程を紹介
5. demo https://github.com/y-ohgi/todo_app
6. 環境 $ node –v # v6.2.2 $ npm –v # 3.9.5 $ ruby –v # 2.2.5 $ rails –v # 5.0.0.1
7. Ruby on Rails
8. 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
9. 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
10. Rails5 ~APIサーバーの起動~ $ bundle install --path vendor/bundler $ rails server # サーバーの起動！
11. Angular2
12. Angular2 TODOの全件取得と追加を実装まで
13. Angular2 ~プロジェクト作成~ $ npm install -g angular-cli # cliの導入 $ ng new frontend # プロジェクトの作成 $ cd frontend $ ng s # サーバーの起動
14. Angular2 ~プロジェクト作成~ $ npm install -g angular-cli # cliの導入 $ ng new frontend # プロジェクトの作成 $ cd frontend $ ng s # サーバーの起動
15. Angular2 ~今回触るファイル~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html app.component.ts
16. Angular2 ~indexの編集~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html app.component.ts
17. Angular2~indexの編集~ frontend/src/app/app.component.html <h1> {{title}}</h1> <!-- 追加 --> <app-todo></app-todo>
18. Angular2 ~今回触るファイル~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html app.component.ts
19. Angular2 ~todoクラスの作成~ frontend/src/app/todo.ts # 新規作成 export class Todo{ id: string; title: string; body: string; }
20. Angular2 ~serviceの作成~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html app.component.ts
21. 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
22. 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';
23. Angular2 ~serviceの編集(2/4)~ @Injectable() export class TodoService { private url: string = 'http://localhost:3000/todos'; constructor(private http: Http) { } // 全件取得 fetchAll() { } // todo追加 postTodo() { } }
24. Angular2 ~serviceの編集(3/4)~ // 全件取得 fetchAll(): Promise<Todo[]> { return Promise.resolve( this.http.get(this.url).toPromise() .then(res =>res.json().map(todo => <Todo[]> todo)) ); }
25. Angular2 ~serviceの編集(4/4)~ // todo追加 postTodo(title: string, body: string): Promise<Todo>{ 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); }
26. Angular2 ~ componentの作成~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html app.component.ts
27. 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
28. 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 <p> todo works! </p>
29. Angular2 ~ todo.component.html~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html app.component.ts
30. Angular2 ~componentの編集 view~ frontend/src/app/todo/todo.component.html <h2>追加</h2> <form> <input #title placeholder="title" /> <br/> <input #body placeholder="body" /> <br/> <button (click)="postTodo(title.value, body.value)">submit</button> </form> <h2>一覧</h2> <ul> <li *ngFor="let todo of todos"> {{todo.title}}: {{todo.body}} </li> </ul>
31. Angular2 ~todo.component.ts~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html app.component.ts
32. 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';
33. Angular2 ~componentの編集(2/3)~ @Component({ selector: 'app-todo', providers: [TodoService], # 追加 templateUrl: './todo.component.html', styleUrls: ['./todo.component.css'] })
34. 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)); } }
35. Angular2 delete・updateはgithubで！
36. 最後に ご静聴ありがとうございました！ ツッコミお待ちしております！！！！