angular
Pocket

Reactをずっと勉強してたんですが、仕事上Angular4が後々導入されることになり(その時はまたバージョン変わってるかな…)、いよいよAngularを触ってみることにしました。

Anugular4が出たタイミングでもあったので、ちょうどいい機会です。ついでにAngular CLIという便利なツールも使ってみました。

TypeScriptとか覚えること多そうですが、とりあえずサクッと簡単なTodoを作ってAngularやTypeScriptがどんなものか雰囲気だけつかんでみました。

もくじ
  1. Angular CLIのインストール
  2. プロジェクト作成と立ち上げ
  3. コンポーネント作成
  4. Todoリスト表示
  5. Todo追加
  6. Todo削除

Angular CLIのインストール

Angular CLIをインストールします。

npm install -g @angular/cli

インストールが完了されたらngコマンドが使えるようになります。以下のコマンドを打つとコマンドやオプションが表示されます。

ng help

たくさんあるのでこの辺はぼちぼち勉強しよう…。

プロジェクト作成と立ち上げ

Angular CLIのコマンドを使えるようになったので、プロジェクトやコンポーネントの作成、サーバー起動などはコマンド操作でできます。まずは以下のコマンドで新規プロジェクトを作成します。

ng new ngtodo

ちょっと時間かかりますが、しばらくするとファイル一式ができてるので移動します。

cd ngtodo

こんな感じでファイル一式ができています。

.
├── README.md
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.e2e.json
├── karma.conf.js
├── node_modules/
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
└── tslint.json

サーバーを立ち上げるには以下のコマンドを打ちます。

ng server

以下をブラウザで表示すると「app works!」と表示されるはずです。

http://localhost:4200/

これで準備OKです。

コンポーネント作成

コンポーネントを作るのもコマンド一発でできます。まずはTodoリストを表示するコンポーネントを作ります。

ng g component todo-list

コマンドを打つとsrc/appディレクトリに新しくtodo-listというディレクトリができます。中にはtsファイルやhtml、cssまでまるっと作ってくれてます。

また、app.module.tsにはこのTodoListComponentをインポートする記述も追加してくれています。

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { TodoListComponent } from './todo-list/todo-list.component';

@NgModule({
  declarations: [
    AppComponent,
    TodoListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

あとは、app.component.htmlにこのリストを表示するコードを追加すればTodoListComponentが表示されます。

src/app/app.component.html

<h1>
  {{title}}
</h1>
<app-todo-list></app-todo-list>

Todoリスト表示

Todoを表示されるコードです。あとはつらつらコードを貼っていきます。

src/app/todo-list/todo-list.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit {
  @Input() todos: string[] = [];

  constructor() { }

  ngOnInit() {
  }

}

src/app/app.component.html

<h1>
  {{title}}
</h1>
<app-todo-list [todos]="todos"></app-todo-list>

src/app/app.component.ts

import { Component } from '@angular/core';

export class Todo {
  id: number;
  item: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  todos: Todo[] = [{
    id: 1,
    item: "カレーを作る"
  }]
}

src/app/todo-list/todo-list.component.html

<ul>
  <li *ngFor="let todo of todos">
    {{todo.id}}
    {{todo.item}}
  </li>
</ul>

これで「カレーを作る」というのが表示されたと思います。

Todo追加

次にTodoを追加するフォームを作ります。まずはng gでコンポーネントを作成するところから。

ng g component todo-form

src/app/todo-form/todo-form.component.ts

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-todo-form',
  templateUrl: './todo-form.component.html',
  styleUrls: ['./todo-form.component.css']
})
export class TodoFormComponent implements OnInit {

  @Output() createTodo = new EventEmitter();

  id = 2;
  item = "";

  constructor() { }

  ngOnInit() {
  }

  onCreateTodo() {
    if(this.item !== "") this.createTodo.next({
      id: this.id,
      item: this.item
    });
    this.item = "";
    this.id++;
  }

}

src/app/todo-form/todo-form.component.html

<div>
  <form (ngSubmit)="onCreateTodo()">
    <input
      type="text"
      name="todo"
      [(ngModel)]="item"
    >
    <button type="submit">
      登録
    </button>
  </form>
</div>

src/app/app.component.html

<h1>
  {{title}}
</h1>
<app-todo-form (createTodo)="onCreateTodo($event)"></app-todo-form>
<app-todo-list [todos]="todos"></app-todo-list>

src/app/app.component.ts

import { Component } from '@angular/core';

export class Todo {
  id: number;
  item: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  todos: Todo[] = [{
    id: 1,
    item: "カレーを作る"
  }]

  onCreateTodo(todo) {
    this.todos.push({
      id: todo.id,
      item: todo.item
    });
  }
}

これでフォームからTodoを追加できるようになりました。

Todo削除

最後に削除ボタンもつけちゃいます。

src/app/todo-list/todo-list.component.html

<ul>
  <li *ngFor="let todo of todos">
    {{todo.id}}
    {{todo.item}}
    <button (click)="onDeleteTodo(todo)">削除</button>
  </li>
</ul>

src/app/todo-list/todo-list.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit {

  @Input() todos: string[] = [];
  @Output() deleteTodo = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

  onDeleteTodo(todo) {
    this.deleteTodo.next(todo);
  }

}

src/app/app.component.html

<h1>
  {{title}}
</h1>
<app-todo-form (createTodo)="onCreateTodo($event)"></app-todo-form>
<app-todo-list [todos]="todos" (deleteTodo)="onDeleteTodo($event)"></app-todo-list>

src/app/app.component.ts

import { Component } from '@angular/core';

export class Todo {
  id: number;
  item: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  todos: Todo[] = [{
    id: 1,
    item: "カレーを作る"
  }]

  onCreateTodo(todo) {
    this.todos.push({
      id: todo.id,
      item: todo.item
    });
  }

  onDeleteTodo(todo) {
    var index = this.todos.indexOf(todo);
    this.todos.splice(index, 1)
  }
}

これで削除できるようになりました。

さいごに

Angularは難しいかなと思ってましたが、Angular CLIを使うと最初につまづきそうなところは全部やってくれて、この簡単なTodoアプリぐらいなら時間をかけずにできました。

まだまだ生成されたファイルがどんなものか分からないですし、serviceとかまだまだあるんで徐々に学習していこうと思います。

Pocket

Category : Tag :