トッカンソフトウェア

Angular 2 画面遷移

今回はAngular2のRouterを使って画面遷移をやります。ログイン画面からメニュー画面に遷移するサンプルをやります。
前回同様、名前とパスワードが等しければログインOKでメニュー画面に遷移します。いきなりメニュー画面に
アクセスできてしまうので、実際のログイン認証とは程遠いのですが、あくまでも画面遷移のサンプルとして見て下さい。

初回の作成したものをベースにするので、まずは初回分を作成し、 その後に今回分を追加、上書きを行って下さい。


ソースファイル

app\app.component.ts

				
import { Component } from '@angular/core';
@Component({
    moduleId: module.id,
    selector: 'my-app',
    template: '<router-outlet></router-outlet>'
})
export class AppComponent {
}


			
<router-outlet></router-outlet>の場所にコンポーネントを表示し、イベント発生時に切り替えます。

app\login.component.ts

				
import { Component } from '@angular/core';
import { Router } from '@angular/router'
import { Login } from './login';
@Component({
    moduleId: module.id,
    templateUrl: 'login.component.html'
})
export class LoginComponent {
    model = new Login('', '');
    constructor(private router: Router) { }

    onSubmit() {
        if (this.model.loginId == this.model.password) {
            this.router.navigate(['menu']);
        } else {
            this.model.message = "ログインに失敗しました";
        }
    }
}


			
ログイン画面のコンポーネントになります。JavaScriptの処理でコンポーネントを切り替えます。

Routerのnavigateメソッドを使用してコンポーネント切り替えを行います。

Routerはコンストラクタでオブジェクトを取得して下さい。

app\menu.component.ts

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

@Component({
    moduleId: module.id,
    template: '<h1>Menu</h1><a routerLink="/login">ログアウト</a>'
})
export class MenuComponent {

}


			
メニュー画面のコンポーネントになります。HTMLのリンクでコンポーネントを切り替えます。

routerLinkディレクティブを使用してコンポーネントの切り替えを行います。

app\app.module.ts

				
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { RouterModule }   from '@angular/router';
import { AppComponent }  from './app.component';
import { LoginComponent }  from './login.component';
import { MenuComponent }  from './menu.component';
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot([
            { path: 'menu', component: MenuComponent },
            { path: '', redirectTo: 'login', pathMatch: 'full' },
            { path: 'login', component: LoginComponent }
        ])
    ],
    declarations: [
        LoginComponent,
        MenuComponent,
        AppComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

			
RouterModuleのforRootメソッドでルーティング設定を行います。
リダイレクトを行うにはredirectToを指定します。

app\main.ts

				
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);


			

app\login.ts

				
export class Login {
    constructor(
        public name: string,
        public password: string,
        public message?: string
    ) { }
}


			

app\login.component.html

				
<div class="container">
    <h1>Login</h1>
    <form (ngSubmit)="onSubmit()" #loginForm="ngForm">
        <table>
            <tr>
                <td><label for="name">名前</label></td>
                <td><input type="text" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel">
                    <span [hidden]="name.valid || name.pristine">
                        名前を入力して下さい。
                    </span></td>
            </tr>
            <tr>
                <td><label for="password">パスワード</label></td>
                <td><input type="text" id="password" required [(ngModel)]="model.password" name="password" #password="ngModel">
                    <span [hidden]="password.valid || password.pristine">
                            パスワードを入力して下さい。
                        </span>
                </td>
            </tr>
        </table>
        <button type="submit" [disabled]="!loginForm.form.valid">ログイン</button>
        <br /> {{model.message}}
    </form>
</div>


			

index.html

				
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    <base href="/">
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>


			
baseタグで全体の基準となるURLを指定します。


実行イメージ





ページのトップへ戻る