今回はAngularでHello World(for Windows)する手順についてまとめました。
AngularでHello Worldする
本記事ではAngular CLIを使ってHello Worldするまでを説明します。
Angular CLIを使ってHello Worldするところまでを説明します。 Webアプリケーションを作成して、ローカル環境でサーバ立ち上げて、 localhost:8080で繋いで・・・ってやつです。
Angular開発環境構築手順(for Windows)がまだ完了していない方は以下参考にしてみて下さい。
>>Angular開発環境構築手順(for Windows)
環境について
- OS:Windows 10 64bit
- node:v6.10.3
- Angular CLI:1.1.0
- Visual Studio Code:1.12.2
AngularでHello Worldするまでの手順
- Angular CLIでプロジェクトを新規作成する
- ローカルPCでWebサーバを起動する
1.Angular CLIでプロジェクトを新規作成する
Visual Stuido Codeを起動し、PowerShellを立ち上げます。
以下コマンドでプロジェクトを新規作成します。
command
> ng new helloWorld
以上でプロジェクト新規作成は完了です。
2.ローカルPCでWebサーバを起動する
作成したプロジェクトにカレントディレクトリを移します。
command
> cd helloWorld
Webサーバを起動します。
command
> ng serve
ファイアウォールの警告はアクセスを許可します。
Google Chromeで「http://localhost:4200」にアクセスします。
以上でAngularのHello Worldは完了です。
AngularでHello Worldができたら、Angular CLIについて詳しく中身を見て理解を深めてみましょう。