Save 37% off PRO during our Black Friday Sale! »

Angular2に入門した

4365312f9f662ab058e50d1459165e5f?s=47 y-ohgi
October 03, 2016

 Angular2に入門した

4365312f9f662ab058e50d1459165e5f?s=128

y-ohgi

October 03, 2016
Tweet

Transcript

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

  2. やること 1. ⾃⼰紹介 2. ⽬標 3. デモ 4. Rails5 5.

    Angular2 6. 最後に
  3. ⾃⼰紹介 ▪ ⼤⽊ 裕介 ▪ 株式会社オクト インターン⽣ /学⽣(21) ▪ PHP/Ruby

    on Rails/jQuery ▪ Angular2 歴 5⽇ ▪ 初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 scaffoldの編集~ ⚠ ここからソースコードがメインになります!

  23. 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';
  24. Angular2 ~serviceの編集(2/4)~ @Injectable() export class TodoService { private url: string

    = 'http://localhost:3000/todos'; constructor(private http: Http) { } // 全件取得 fetchAll() { } // todo追加 postTodo() { } }
  25. Angular2 ~serviceの編集(3/4)~ // 全件取得 fetchAll(): Promise<Todo[]> { return Promise.resolve( this.http.get(this.url).toPromise()

    .then(res =>res.json().map(todo => <Todo[]> todo)) ); }
  26. 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); }
  27. Angular2 ~ componentの作成~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html

    app.component.ts
  28. 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
  29. 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>
  30. Angular2 ~ todo.component.html~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html

    app.component.ts
  31. 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>
  32. Angular2 ~todo.component.ts~ todo.ts todo.component. html todo.component.ts todo.service.ts app.component. html app.component.ts

  33. 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';
  34. Angular2 ~componentの編集(2/3)~ @Component({ selector: 'app-todo', providers: [TodoService], # 追加 templateUrl:

    './todo.component.html', styleUrls: ['./todo.component.css'] })
  35. 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)); } }
  36. Angular2 delete・updateはgithubで!

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

  38. None