0からのAngular ①

開発でAngularを触ることがあったので、まずは環境構築とチュートリアルを進めてみるかというくらいにはAngular初心者。ちなみに「Angular」のスペルミスもひどかった、、、
まずは、環境構築を兼ねたGETTING STARTEDをやってみる。

環境構築

何をするにも環境構築ということで、必要なツールをインストールしていく。
インストールするのはAngular CLIというコマンドでプロジェクトを作成したりファイルを作成できるようにする。
yarnでグローバルにインストールした。

yarn global add @angular/cli

yarnを使用するのでパッケージマネージャをyarnに変更しておく。

ng set --global packageManager=yarn

プロジェクトの作成

Angular CLIでプロジェクトを作成する。

ng new my-app

アプリケーションを立ち上げる

プロジェクトのディレクトリに移動し、サーバを起動する。

cd my-app
ng serve --open

ng serveとするとサーバが起動し、今後の変更も監視し、リロードしてくれるみたい。
サーバが起動すると、ブラウザが開かれる。（ブラウザが自動で開かれるのは--openをつけたおかげ）
これだけでもちょっと嬉しい(´ω｀)

コンポーネントを編集する

Angular CLIが作成したファイル郡の中のプロジェクトのルート/src/app/app.component.tsがルートコンポーネントになっている。
8行目のtitleプロパティをappからMy first Angular Appに変更する。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My first Angular App';
}

こうなる。
エディタで保存するとブラウザが自動でリロードされるのが何気にうれしい(´ω｀)

続いて、プロジェクトのルート/src/app/app.component.cssを以下のように編集する。

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

終わりに

軽く触るだけだったが、1時間くらいでできたのが良かった。
全く関係ないが、英語が少しスムーズに読めて嬉しくなった(´ω｀)
次はチュートリアルをやろうと思う。

続きはこちら