超初心者のAngular学習〜2日目〜

前回のおさらい

1日目を参照してください（爆）
では今回の二日目ではAngularをインストールして公式サイトのはじめにをやっていきましょう。

構築環境

手持ちのメインPCのUbuntuで実行します。nodeとnpmのバージョンはこんな感じです。

test@test-ThinkStation-E30:~$ node -v
v10.12.0
test@test-ThinkStation-E30:~$ npm -v
6.4.1

では、Angularをインストールしていきます。

test@test-ThinkStation-E30:~$ npm install -g @angular/cli

Angular CLIインストールはこれでOK
※開発環境がUbuntuでインストールの際にエラーが発生する場合はこの手順を実施するとエラーが解消されます。自分は対策１の手順でエラーが解消されました。書かれてる内容でエラーが改善されない場合はエラー内容をググって検索してください（爆）
一応、公式サイトにも改善方法がありますので参考にしてください。

プロジェクト作成

公式に書かれてるとおりに実行

test@test-ThinkStation-E30:~$ ng new my-app

アプリケーションのサーブ

要はサーバーを起動するということです。この場合は当然ローカルホストでデフォルトのlocalhost:4200になります。openコマンドを追加することで起動後にブラウザで表示することができます。

test@test-ThinkStation-E30:~$ ls  //一応ディレクトリ（さっき作ったプロジェクト）があるかの確認
test@test-ThinkStation-E30:~$ cd my-app
test@test-ThinkStation-E30:~/my-app$ ng serve --open

これでWelcome to app !!と表示されればオッケー

表示されてる文章を書き換える

これはコンポーネント(component)を書き換えます。
書き換えるに僕はVSCodeを使用しました。VSCodeのインストールの仕方はかなりありますが、僕は公式からパッケージをダウンロードしてインストールしました。各々のやりかたはググってください（爆）また、VSCodeをインストールした際は多様なアドオンが使えるのでインストールしておくと便利かもしれません。
僕がインストールしたアドオンは、

• Angular 6 Snippets
• Japanese Language Pack for Visual Studio Code
• GitLens

gitと日本語パッケージについては好みと用途なんでインストールは不要だと思います。(そもそもVSCodeよりもATOMの方が好きな人は多いかも)
書き換える内容は、~/src/app/app.component.tsの、title = 'my-app';のmy-appの部分です。
ここを公式サイトのように書き換えるとあれなので"あんぎゃらちゃん"とかにでもしちゃいましょう。
こんなかんじで。

export class AppComponent {
  //title = 'my-app';
  title = 'あんぎゃらちゃん';
}

では動かして確認しましょう。my-appがあんぎゃらちゃんになってれば成功

では、次にCSSの編集を始めましょう。~src/app/app.component.cssを

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

にすれば完成と、ここまでははじめに書いてることですね！！
では、三日目はチュートリアルと各種Angularの機能を分解していこうかなと思います。