Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular2に入門した

y-ohgi
October 03, 2016

 Angular2に入門した

y-ohgi

October 03, 2016
Tweet

More Decks by y-ohgi

Other Decks in Programming

Transcript

  1. 環境 $ node –v # v6.2.2 $ npm –v #

    3.9.5 $ ruby –v # 2.2.5 $ rails –v # 5.0.0.1
  2. 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
  3. 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
  4. Angular2 ~プロジェクト作成~ $ npm install -g angular-cli # cliの導入 $

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

    ng new frontend # プロジェクトの作成 $ cd frontend $ ng s # サーバーの起動
  6. 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
  7. 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';
  8. Angular2 ~serviceの編集(2/4)~ @Injectable() export class TodoService { private url: string

    = 'http://localhost:3000/todos'; constructor(private http: Http) { } // 全件取得 fetchAll() { } // todo追加 postTodo() { } }
  9. 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); }
  10. 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
  11. 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>
  12. 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>
  13. 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';
  14. 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)); } }