Angularをセットアップする (2/4)

Angularを利用するには、いくつかの方法があります。ただし、誰もがすぐに思いつく「ファイルをダウンロードしてプロジェクトにコピーする」という方法は残念ながら現時点では用意されていません。Angularのサイトでは、ファイルのダウンロードを行っていないのです。

次に思いつくものといえば、「npmを利用する」という方法でしょう。コマンドっプロンプトでWebアプリケーションのフォルダに移動し、

npm install angular2

このように実行すればインストールされます。ただし、現時点（2016年8月）では、npm install angular2でインストールされるのはベータ版までであり、その後のRC版は用意されていないようです。（npm install angularでは？と思った人。これだと、更に前の1.xがインストールされてしまいます）

では、どうするのが一番なのか。おそらく最適な方法は「Angular CLI」を利用する方法でしょう。これは、Angularを利用するための専用ツールで、以下のURLで公開されています。

https://cli.angular.io/

といっても、このサイトからファイルをダウンロードするわけではありません。ここで公開されているのは、使い方などのドキュメントです。インストールは、npmを使います。コマンドプロンプトなどを起動し、

npm install -g angular-cli

このように実行しましょう。これでAngular CLIがインストールされます。



このAngular CLIは、コマンドラインで実行するツールです。Angularを利用する場合は、まず、コマンドプロンプトなどを起動し、プロジェクトを作成する場所にcdコマンドで移動してください。（デスクトップなら、cd Desktopですね）

そして、以下のようにコマンドを実行します。

ng new プロジェクト名

これで、Angularを利用するプロジェクトが生成されます。たとえば「myapp」という名前で作成するなら、「ng new myapp」と実行すると、「myapp」フォルダが作られ、その中に必要なファイルがすべて作成されるわけです。



アプリケーションの実行も、Angular CLIを使って行えます。cdコマンドでプロジェクトのフォルダ内に移動し、「ng serve」と実行してください。これで内蔵サーバーが起動し、以下のアドレスでアプリケーションにアクセスできるようになります。（ただし、初回はビルドのためかなり起動に時間がかかります）

http://localhost:4200/

画面に「app works!」と表示されたら、アプリケーションが正常に実行されています。これが、サンプルで作成されているAngularアプリのWebページ画面なのです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。