Angular アプリで最初のHelloWorldを表示するまでの経緯

2537 ワード
angular-cli Angular8 angular-cli テキストリンク

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（それか他の言語で）を作り、スケーラブルでモダンな開発環境を完成させていきたいと思います。

参考にしたドキュメント

ローカル環境とワークスペースのセットアップ