Let's Angular
こんにちわ。本日は、Angular アプリの最初のHelloWorldを作ってみようと思います。最終的には、Angular をフロントエンドアプリとし、apiアプリをruby やその他言語で作って、スケーラブルでモダンなウェブアプリの完成を目指したいと思います。今回は、Angularを使いAngularCLIの導入から実際にブラウザへHelloWorldを表示します。参考にしたurlは本家が出しているドキュメントです。深く、Angular を使いこなすには、TypeScript の知見が必要なので、それも覚えましょう〜。
ローカルの環境
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.14.5
BuildVersion: 18F132
実装
最新のAngularを使うにはnodeのバージョンで10.9.0以上が必要になるようです。
$ nodebrew use 10.9.0
use v10.9.0
$ node -v
v10.9.0
$ npm -v
6.1.0
ステップ1: Angular CLIをインストールする
$ npm install -g @angular/cli
アプリを作る
ng new my-app
ワークスペースと初期アプリケーションを作成する。ここでプログラムから質問を聞かれますがエンターしていいです。ここでくれば、もうアプリの雛形はできているので（rails的な）ngコマンドでアプリを立ち上げます。
$ cd my-app
$ ng serve --open --port 3005
そうすると、自動で生成されたviewが出現します。今回は、ブラウザにHelloWorldを表示させることがゴールなので、ファイルを少し丸っと書き換えます。 /my-app/src/app/app.component.html のファイルをを下記のように変更すると画面が自動的に変わります。
<h1>Hello World</h1>
以上になります。最後に、Angularでバージョンを確認してみましょう。
$ ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 8.3.19
Node: 10.9.0
OS: darwin x64
Angular: 8.2.14
次回は、APIモードでrails（それか他の言語で）を作り、スケーラブルでモダンな開発環境を完成させていきたいと思います。