libro
www.tuyano.com
初心者のためのAngular2入門

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

作成:2016-08-06 09:14
更新:2016-08-06 09:14

■Angular CLIでインストールする

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のインストール

この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ページ画面なのです。

※プログラムリストが表示されない場合

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


※関連コンテンツ

「初心者のためのAngular2入門」に戻る