はじめてのAngularjs

#### インストール
```aidl
//node がインストールされているか確認
$ brew list
//アングラーをインストール
$ npm install -g @angular/cli
? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. (y/N) 
//取り敢えずNで進む

$ ng v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.0.6
Node: 12.4.0
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.800.6
@angular-devkit/core         8.0.6
@angular-devkit/schematics   8.0.6
@schematics/angular          8.0.6
@schematics/update           0.800.6
rxjs                         6.4.0
```

#### 適当に新規アプリを作成

```aidl
$ ng new MyApp
Would you like to add Angular routing?
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
```
結構時間かかる

出来上がったMyAppフォルダは 3620 directories, 29149 files も作成されていた。

なんかメッチャ多いですねなにこれ。

#### アプリの起動

```aidl
$ cd MyApp/
$ ng serve
```

Compiled successfully.と出たらhttp://localhost:4200/ にアクセス

Welcome to MyApp!と書かれたサイトが表示される

#### 適当に変更してみる

Welcome toでファイルを検索すると下記3ファイルが該当

- MyApp/e2e/src/app.e2e-spec.ts
- MyApp/src/app/app.component.spec.ts
- MyApp/src/app/app.component.html

MyApp/src/app/app.component.html このファイルを書き換えて保存すると、
自動的にサーバがリビルドしてくれてブラウザまで再表示してくれた。

#### ファイルの書き方

MyApp/src/app/app.component.html

```aidl
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

<router-outlet></router-outlet>
```

{{ title }}!は下記で設定されている

MyApp/src/app/app.component.ts

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

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

このファイルを見るとどうやら下記3ファイルを更新するとリビルドとブラウザの再表示がされる。

- MyApp/src/app/app.component.ts
- MyApp/src/app/app.component.html
- MyApp/src/app/app.component.css



## コンポーネントの追加

```aidl
$ ng g component input
```

MyApp/src/app/input ディレクトリが出来上がった

#### 作成されたディレクトリの中身

```aidl
src/app/input
├── input.component.css
├── input.component.html
├── input.component.spec.ts
└── input.component.ts
```

これを書き換えてページを作っていくって感じなんですね。

単純にリンクつけるだけだとリダイレクトで戻されたのでルールをちゃんと覚えて適切に使うという感じなんでしょうね。

## 参考
- [Angular CLI 環境作成方法（Mac環境）](https://qiita.com/koronpo/items/cc7d3a1aabb7900e1e8e)
- [Angular ルーティング による画面遷移](https://qiita.com/ksh-fthr/items/91c85a06998314c95648)