Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
ch-1
ch-2 fix(material-todoapp): 少し親切に修正 Mar 14, 2017
ch-3
ch-4
ch-5
example
README.md

README.md

Todo App with Angular-CLI + Angular Material

このハンズオンは、Angular-CLIAngular Materialを使ったTODOアプリケーションを作成します。

ハンズオンを始める前に

ハンズオンを円滑に進行するために、事前に開発環境の準備を行います。

このハンズオンに必要な開発環境は以下のとおりです

  • Node.js 6系
  • Angular-CLI
  • JavaScript/TypeScriptのコーディングに適したテキストエディタ(Visual Studio Codeの使用をおすすめします。)

Node.jsのインストール

Node.jsからお使いのOSに合わせたNode.jsをインストールしてください。

ターミナル(コマンドプロンプト)を開いて以下のコマンドが実行できればインストール成功です

$ node -v
v6.9.5

Angular-CLIのインストール

このハンズオンでは、AngularのコマンドラインツールであるAngular-CLIを使います。 次のコマンドを実行してインストールしてください。

$ npm install -g @angular/cli

ただしくインストールされたかどうかを確認するためにng versionコマンドを実行します

$ ng version
                             _                           _  _
  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/
@angular/cli: 1.0.0-beta.30
node: 6.9.5
os: darwin x64

ハンズオン用のプロジェクトを作成

ハンズオンで開発するプロジェクトを、Angular-CLIを使って生成します。 作業用のディレクトリを作成したい場所で、次のコマンドを実行してください。 todo-appはただのディレクトリ名なので、好きな名前でかまいません。

$ ng new todo-app

しばらく時間がかかりますが、最終的に現在のディレクトリの下にtodo-appディレクトリが生成されているはずです。

最後に、生成したディレクトリに移動しておきます。

$ cd todo-app

目次

  1. はじめに - Hello World
  2. Todoタスクを表示しよう
  3. Todoの状態を更新しよう
  4. Todo作成フォームを作ろう
  5. マテリアルデザインのライブラリを使おう

参考リンク