Angular サービス

今回は処理ロジックをサービスとして外に出してしまいます。

フォームで作成したものをベースにします。
今回はそこから変更分のみ載せますので、足りないソースはフォームを見てください。

サービス作成

Angular CLIでサービスを作成します。

				
ng generate service login

ソースファイル

src\app\login.service.ts

サービスにログイン処理を実装します

				
import { Injectable } from '@angular/core';
import { LoginModel } from './loginModel';

@Injectable({
  providedIn: 'root'
})
export class LoginService {

  constructor() { }

  isLogin(model: LoginModel): boolean {
    if (model.loginId == model.password) {
      return true;
    } else {
      return false;
    }
  }
}

src\app\app.component.ts

コンポーネントをサービスを呼び出すように変更します。

				
import { Component } from '@angular/core';
import { LoginModel } from './loginModel';
import { LoginService } from './login.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [LoginService]
})
export class AppComponent {
  model = new LoginModel('', '');

  constructor(private loginService: LoginService) { }

  onSubmit() {
    if (this.loginService.isLogin(this.model)) {
      this.model.message = "ログインしました";
      this.model.loginId = "---";
      this.model.password = "---";
    } else {
      this.model.message = "ログインに失敗しました";
    }
  }
}

上記変更後、プロジェクトフォルダで以下を実行すると動作確認できます。

				
ng serve --open

実行イメージ

ページのトップへ戻る