AngularJS 8 試してみました

14343 ワード
Angular7 Angular Angular8 Angular テキストリンク

環境の準備

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/にアクセスして動作の確認。

cd ng8
ng serve -o

コンポーネント

フォルダーの中身を確認する /src/app/

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

ファイルの中身を確認する /app.component.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>

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

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

/src/app/nav/nav.component.html　ファイルの編集
普段HTMLでhrefと書きますが、angularJsではrouterLinkと書きます

例）routerLink="/" ホーム

/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　ファイルの編集

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

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

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

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

  ngOnInit() {
  }

}

/src/styles.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　ファイルの編集

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　ファイルの編集

/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

つづく、、、