ReactとAngular2の使い方やコードの違いを状態管理、CSS適用、単体テストで比較する：モダンなフロントエンド開発者になるためのSPA超入門（終）（2/3 ページ）

import { Injectable } from '@angular/core';
import { Todo } from '../todo';
@Injectable()
export class TodoService {
  // アプリ内の状態をプロパティで保持
  todos: Todo[];
  constructor() {
    this.todos = [];
  }
  // 追加アクション
  addTodo(title:string): void {
    if(title){
      this.todos.push({ name: title ,enabled: true});
    }
  }
  // チェックアクション
  checkTodo(todo: Todo): void {
    todo.enabled = ! todo.enabled;
  }
}

@Component({
  selector: 'root',
  templateUrl: './app.component.html',
  providers: [TodoService], // DIするための設定
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todos:Todo[];
  //コンストラクタでサービスの受け取りが可能となる
  constructor(private service: TodoService) {
    this.todos = service.todos;
  }
}

<div class="add">
  <h2 class="title">TODOサンプルアプリケーション</h2>
  <input type="text" class="inputBox" placeholder="TODOを入力" [(ngModel)]="inputValue" >
  <input type="button" class="addBtn" (click)="addTodo()" value="登録">
</div>

import { Component, Input } from '@angular/core';
import {TodoService} from '../services/todo.service';
 
@Component({
  selector: 'add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.css']
})
export class AddComponent {
  inputValue;
  // コンストラクタで「サービス」の受け取り
  constructor(private service: TodoService) {
  }
 
  // 定義した関数内で「サービス」の呼び出し
  addTodo(): void {
    this.service.addTodo(this.inputValue);
    this.inputValue = '';
  }
}

ul li {
  position: relative;
  padding: 12px 8px 12px 10px;
  font-size: 18px;
  margin-top: 5px;
  border: solid 1px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 6px -6px #777;
}
 
ul li.checked {
  text-decoration: line-through;
}

import React from 'react';
import '../styles/todo.css';
 
const Todo = (props) => {
  const { todo, checkTodo } = props;
  if (todo.isChecked) {
    return (
      <li className="checked" onClick={() => checkTodo(todo.id)}>{todo.text}</li>
    )
  } else {
    return (
      <li onClick={() => checkTodo(todo.id)}>{todo.text}</li>
    )
  }
};
 
export default Todo;

@Component({
  ……
  styleUrls: ['./todo.component.css'] // コンポーネントとCSSファイルとのひも付け
})
export class TodoComponent {
  ……
}