このハンズオンは、Angular-CLIとAngular Materialを使ったTODOアプリケーションを作成します。
ハンズオンを円滑に進行するために、事前に開発環境の準備を行います。
このハンズオンに必要な開発環境は以下のとおりです
- Node.js 6系
- Angular-CLI
- JavaScript/TypeScriptのコーディングに適したテキストエディタ（Visual Studio Codeの使用をおすすめします。）
Node.jsからお使いのOSに合わせたNode.jsをインストールしてください。
ターミナル(コマンドプロンプト)を開いて以下のコマンドが実行できればインストール成功です
$ node -v
v6.9.5
このハンズオンでは、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