AngularJS 8 試してみました

![cover_angular-8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230433/3e720b6f-012f-51c5-5f97-0f30eaa985ba.jpeg)
# 環境の準備


node.js＆npmが必要になります。


angular CLIのインストール

```
npm install -g @angular/cli
```

プロジェクトフォルダーを作る

```
ng new ng8
```

いくつか質問が出てくるので以下のように答えます：

> Angular routing:
SPA（シングルページアプリケーション）のルーティングについて説明していませんが、簡単に言うと、一つのページで作って、複数のページに見せかける事だと糧にイメージしています。
複数ページ作るのでAngular routing使います

```
> *Would you like to add Angular routing?
Yes
```

SCSS使いたいのでSCSSを選びます

```
> Which stylesheet format would you like to use?
SCSS
```


`ng serve`ローカルサーバを起動させる。
[http://localhost:4200/](http://localhost:4200/)にアクセスして動作の確認。

```
cd ng8
ng serve -o
```

# コンポーネント
フォルダーの中身を確認する  `/src/app/`

```
/app.component.html // HTMLテンプレート
/app.component.scss // scss
/app.component.ts // typescript
```

ファイルの中身を確認する `/app.component.ts`

```ts:/app.component.ts`
import { Component } from '@angular/core';

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

コンポーネントを生成するコマンド
`nav`を生成するとnavフォルダーが追加される

```
> ng generate component nav
```

コンポーネントを生成するコマンドの短いバージョン

> generate -> g
> component -> c

```
> ng g c nav
```

`app.component.html`ファイルを確認

> グロナビ用タグ `<app-nav></app-nav>`
コンテンツ用タグ `<router-outlet></router-outlet>`

```html:/app.component.html`
<app-nav></app-nav>

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

`/src/app/nav/nav.component.html`　ファイルの編集
普段HTMLで`href`と書きますが、angularJsでは`routerLink`と書きます
> 例）routerLink="/" ホーム

```html:/src/app/nav/nav.component.html`
<header>
  <div class="container">
    <a routerLink="/" class="logo">PAGE TITLE</a>
    <nav>
      <ul>
        <li><a routerLink="/">HOME</a></li>
      </ul>
    </nav>
  </div>
</header>
```

動的タイトルのついか
`/src/app/nav/nav.component.ts`　ファイルの編集

```ts:/src/app/nav/nav.component.ts`
<a routerLink="/">PAGE TITLE</a>
// ↓↓↓
<a routerLink="/">{{ appTitle }}</a>
```

`nav.component.ts`　ファイルの編集

```ts:/src/app/nav/nav.component.ts`
export class NavComponent implements OnInit {

  appTitle: string = ‘HELLO KHALED!’;
  constructor() { }

  ngOnInit() {
  }

}
```

`/src/styles.scss`　ファイルの編集

```scss:/src/styles.scss`
body, html {
    height: 100%;
    margin: 0 auto;
}

body {
    font-size: 18px;
}

a {
    text-decoration: none;
}

.container {
    width: 80%;
    margin: 0 auto;
    padding: 1.3em;
    display: grid;
    grid-template-columns: 30% auto;

    a {
        color: white;
    }
}

section {
    width: 80%;
    margin: 0 auto;
    padding: 2em;
}
```

`nav/component.scss`　ファイルの編集

```scss:nav/component.scss`
header {
    background: #000000;
    .logo {
        font-weight: bold;
    }
    nav {
        justify-self: right;
        ul {
            list-style-type: none;
            margin: 0; padding: 0;
            li {
                float: left;
                a {
                    padding: 1.5em;
                    text-transform: uppercase;
                    font-size: .8em;
                    &:hover {
                        background: red;
                    }
                }
            }
        }
    }
}
```

# ルーティング
`/src/app/app-routing.module.ts`　ファイルの編集

```ts:/src/app/app-routing.module.ts`
// import省略しています

import { helloComponent } from './hello/hello.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: '', component: helloComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
];

// Other code removed for brevity
```
---

つづく、、、