[超入門]Angular4の始め方とRouterを使ってみる

Angularには便利なCLIが用意されているので、それを使って始めてみます。

環境

$ node -v
v8.2.1
$ npm -v
5.3.0 (4.0.5でもいけました)

Angular cliのインストール

npm install -g @angular/cli

プロジェクトの作成

ng new demo-angular4

こんなカンジのが自動生成されます。

demo-angular4
├── README.md
├── e2e
├── karma.conf.js
├── node_modules/
├── package.json
├── protractor.conf.js
├── src
│   ├── app  #主にappの中を修正していきます。
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
└── tslint.json

起動

cd demo-angular4
ng serve --open

–open をつけると勝手にブラウザでhttp://localhost:4200/を開いてくれます。

コンポーネントの作成

試しに共通メニューのコンポーネントを作ってみます。
以下のコマンドを実行するとapp配下にmenuディレクトリと関連ファイルが生成されます。

# ng g component [任意のコンポーネント名]
ng g component menu

app/menu/menu.component.htmlを以下のように編集します。

<div id="nav">
  <ul>
    <li><a href="menu1">MENU1</a></li>
    <li><a href="menu2">MENU2</a></li>
    <li><a href="menu3">MENU3</a></li>
    <li><a href="menu4">MENU4</a></li>
  </ul>
</div>

app/menu/menu.component.cssも修正して横並びメニューにしておきます。

#nav {
    list-style: none;
}

#nav ul li{
    display: inline;
}

さいごにapp/app.component.html<app-menu></app-menu>を追加して反映させます。

(省略)
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">

  <app-menu></app-menu>

  <h1>
    Welcome to {{title}}!
  </h1>
(省略)

すると画面上部にメニューが追加されましたね。

ちなみに、なんで<app-menu>タグなのかは
app/menu/menu.component.tsselectorで定義されています。

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

@Component({
  selector: 'app-menu', ←コレ
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Routerを使う

せっかくmenuを作ったのでルータを使ってページ遷移させてみます。
例)aboutページ

ng g component about

ここまでは先ほどと同じ要領です。

app/app.routing.tsを以下の内容で新規作成します(手動)。

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AboutComponent } from './about/about.component';

const appRoutes: Routes = [
    {
        path: 'menu1',
        component: AboutComponent
    }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

URLが/menu1の場合、AboutComponentを呼び出しますって感じです。

app/app.module.tsに上で作成したapp.routingを読み込ませます。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { routing } from './app.routing'; //追記
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    routing //追記
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app/app.component.htmlを以下のように修正します。

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <app-menu></app-menu>
  <router-outlet></router-outlet>
</div>

<router-outlet></router-outlet>にRouterで指定したコンポーネントの内容が表示されます。

それではhttp://localhost:4200/にアクセスしてみましょう!

MENU1をクリックするとaboutコンポーネントの内容が表示されます!

さいごに

駆け足でしたが、Angular4でRouterを使うところまでを簡単に作ってみました。
何かの参考になればと思います。

サーバサイドエンジニア。オムライスが好物

シェアする

  • このエントリーをはてなブックマークに追加

フォローする