angular-cliを使ってみる｜AngularでWebサイト作成

Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。

基本的な部分は公式チュートリアルなどを参考にしながら進めています。

今回はangular-cliツールの導入からブラウザで初期表示の確認までを行います。

開発環境

・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode

手順

手順1.angular-cliのインストール

VisualStudioCodeのコンソールか、コマンドプロンプトで今回のアプリケーションを作成するフォルダに移動してから、
以下のコマンドを実行します。

> npm install -g @angular/cli@latest

「@latest」をつけることで最新版がインストールされます。
バージョンを確認したい場合は「ng」コマンドの「-v」オプションで表示できます。

> ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.3.2
node: 7.2.1
os: win32 x64
@angular/animations: 4.3.6
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.3.2
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6

手順2.アプリケーションの生成

次に今回のサンプル用にsampleAppという名前のアプリケーションを作ります。
手順1でngコマンドが使えるようになりましたので、そのコマンドを使います。

> ng new sampleApp

「sampleApp」フォルダが出来上がり、その中に「node_modules」や「src」といったフォルダが生成されました。
「node_modules」というフォルダにはAngularで使うモジュールが沢山インストールされています。
今後の操作は基本的に「src」配下で行っていきます。

手順3.Angularサーバ起動

Angularが簡易的なWebサーバを提供してくれているので、それを起動することでローカルで動作確認が行えます。
サーバを起動するタイミングで各種トランスパイルを行ってくれている様子です。

> cd sampleApp
> ng serve

手順4.ブラウザ確認

Angularサーバ起動時のメッセージにも表示されますが、「http://localhost:4200」というポート番号4200でローカルホストにアクセスすると、初期画面が表示されます。

ここまでで、AngularでWebサイトを開発する準備が整いました。

感想

今回は割愛しましたが、node,npmのインストールなど、事前準備が少し大変です。
nodeのバージョン管理をしてくれるnodistを入れておくと今後別バージョンのnodeを使用する際に便利だと思います。

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載