はじめてのAngular
はじめに
筆者は現在あるシステムのプロトタイプを開発しています。コントローラのUIにAngularを利用することにしました。筆者のこれまでの経験分野は、次の通りでWebアプリの専門家というわけではありません。
- Linuxカーネル・GLIBCなどのLinux OSのコア部 (C言語)
- Gstreamerを利用した動画プレイヤ
- OpenGL
- NPAPIベースのブラウザプラグイン
- WebKitベースの独自ブラウザ (C++)
- OSS統合監視ソフトHatohol (C++, Python, MySQL, WebUI)
- DPDK, Open vSwitch
- FPGA (高位合成)
Webに関連するものは上記の中ではHatoholのUIで、以下の技術を使いました。
- Django
- JavaScript
- jQuery
Angularは面白そうな反面、日本語での情報はまだそれほど多くないと感じています。いろいろと嵌りそうな予感もしており、得た知見をブログで情報を発信して、他の方のお役に立てればと考えています。
Angularを選択した理由は、フルスタックのSPAフレームワークを使ってみたかったこと、筆者が新しいもの好きという点が大きいです。推奨されているTypeScriptコードのぱっと見の印象がC++やJavaなどの強い静的型付け言語と近いものを感じたもの選択の一因です。
Angularは、Angular2とかAngularJS2とかも呼ばれることもありますが、本ブログでは公式サイトの表記に合わせて単にAngularと記します。
Linuxへのインストール
ターゲットOSは、Ubuntu 16.04 LTSです。
nodejsとnpmのインストール
デフォルトのaptでインストールされるnodejsはバージョンが低く、Angularの要件を満たしていないので、次の様にNode.jsの公式のものを利用しました。
# curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
# apt-get install nodejs
次のバージョンのものがインストールされました。
$ node -v
v6.10.2
$ npm -v
3.10.10
Angularのインストール
公式サイトのドキュメントを参照して、以下のように実行します。
$ sudo npm install -g @angular/cli
はい、これだけでインストールが完了しました。
動作確認
ドキュメントに従って次のように入力してみます。
$ ng new my-app
my-appというディレクトリと最小のファイルセットが作成されます。次のコマンドでそれを表示できます。
$ cd my-app
$ ng serve --open
Webブラウザで、http://localhost:4200に接続し、次のように表示されるとOKです。
