オッサンが始める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のアプリケーションをビルド・実行することです。
以下のステップで説明します。
- 開発環境のセットアップ
- プロジェクトとスケルトンアプリケーションの作成
- アプリケーションの実行
- アプリケーションの編集
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は以上です。
