オッサンが始めるAngular(その1)：Hello World

Angular 2に入門しようと思ったらいつのまにかAngular 4になっていました。

時の流れは早いものです。

Angularのチュートリアルで勉強します。

 

エディタの用意

Angularをインストールするまえに、エディタをインストールします。エディタは好きなもの使えばいいですが、ここではVSCodeを使ってみます。

 

 

 

CLI QUICK START

AngularのチュートリアルのCLI QUICK STARTをやってみます。

CLI Quickstart - ts - CLI-QUICKSTART

 

【超手抜き翻訳】 

Angular CLIはAngularで開発する際に利用するコマンドラインインターフェースです。

このガイドの目的はAngular CLIを使用してTypeScriptで記述したAngularのアプリケーションをビルド・実行することです。

以下のステップで説明します。

1. 開発環境のセットアップ
2. プロジェクトとスケルトンアプリケーションの作成
3. アプリケーションの実行
4. アプリケーションの編集

 

Step1. 開発環境のセットアップ

Node.jsとnpmをインストールします。最低でもnode 6.9.x, npm 3.x.x を使用してください。

https://nodejs.org/en/download/

 

 

 nodeとnpmのバージョンを確認。

 

Angular CLIをグローバルにインストールしてください。

 

完了。

 

Step2. 新規プロジェクトの作成

ng newコマンドでプロジェクト(my-app)とスケルトンアプリケーションを作ります。

 

しばらく待ちます。長い。

 

 my-appの下にいろいろ生成されています。

 

Step3. アプリケーションの実行

プロジェクトのディレクトリへ移動し、サーバーを起動しましょう。

ng serveコマンドでサーバーを起動します。

 

ブラウザでアプリケーションが開きます。

 

Step4. Angularのコンポーネントを編集する

my-app\src\app　にapp.component.tsが生成されています。（中身はTypeScript）

 

app.component.tsをVSCodeで開きます。

titleのテキストを'My First Angular App'書き換えます。

 

保存すると、ng serveがファイルの変更を検出してリビルドが実行され、ページがリロードされます。

 

同様に、app.component.cssを編集します。

 

保存すると、ng serveがファイルの変更を検出してリビルドが実行され、ページがリロードされます。

 

 

CLI QUICKSTARTは以上です。