角度4-例

この章では、Angular 4に関連するいくつかの例を説明します。

まず、 username および password として入力するログインフォームを示す例を作成しました。正しい値を入力すると、内部に入力され、顧客の詳細を入力できる別のフォームが表示されます。さらに、ヘッダー、フッター、ユーザーログイン、メインページの4つのコンポーネントを作成しました。

コンポーネントは、次のコマンドを使用して作成されます-

ng gコンポーネントヘッダー

C:\ngexamples\aexamples>ng g component header
installing component
   create src\app\header\header.component.css
   create src\app\header\header.componentl
   create src\app\header\header.component.spec.ts
   create src\app\header\header.component.ts
   update src\app\app.module.ts

ng gコンポーネントフッター

C:\ngexamples\aexamples>ng g component footer
installing component
   create src\app\footer\footer.component.css
   create src\app\footer\footer.componentl
   create src\app\footer\footer.component.spec.ts
   create src\app\footer\footer.component.ts
   update src\app\app.module.ts

ng gコンポーネントのユーザーログイン

C:\ngexamples\aexamples>ng g component userlogin
installing component
   create src\app\userlogin\userlogin.component.css
   create src\app\userlogin\userlogin.componentl
   create src\app\userlogin\userlogin.component.spec.ts
   create src\app\userlogin\userlogin.component.ts
   update src\app\app.module.ts

ng gコンポーネントのメインページ

C:\ngexamples\aexamples>ng g component mainpage
installing component
   create src\app\mainpage\mainpage.component.css
   create src\app\mainpage\mainpage.componentl
   create src\app\mainpage\mainpage.component.spec.ts
   create src\app\mainpage\mainpage.component.ts
   update src\app\app.module.ts

*app.module.ts* では、親モジュールには作成時に追加されたすべてのコンポーネントがあります。 ファイルは次のようになります-

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

import { RouterModule, Routes} froms '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MdTableModule} from '@angular/material';

import {HttpModule} from "@angular/http";
import {MdInputModule} from '@angular/material';
import { AppComponent } from './app.component';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

@NgModule({
   declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      UserloginComponent,
      MainpageComponent
   ],

   imports: [
      BrowserModule,
      ReactiveFormsModule,
      RouterModule.forRoot(appRoutes),
      BrowserAnimationsModule,
      HttpModule,
      MdTableModule,
      MdInputModule
   ],

   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

上記で作成したコンポーネントが追加されます-

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

コンポーネントも宣言に追加されます-

declarations: [
   AppComponent,
   HeaderComponent,
   FooterComponent,
   UserloginComponent,
   MainpageComponent
],

親の app.componentl に、ユーザーに表示されるファイルの主要な構造を追加しました。

<div class="mainpage">
   <app-header></app-header>
   <router-outlet></router-outlet>
   <app-footer></app-footer>
</div>

divを作成し、 <app-header> </app-header> 、 <router-outlet> </router-outlet> および <app-footer> </app-footer> を追加しました。

*<router-outlet> </router-outlet>* は、あるページから別のページへのナビゲーションに使用されます。 ここでは、ページはログインフォームであり、成功すると、メインページ、つまり顧客フォームにリダイレクトされます。

最初にログインフォームを取得し、後でmainpage.componentlを取得するには、以下に示すように app.module.ts で変更を行います-

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

import { RouterModule, Routes} from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MdTableModule} from '@angular/material';

import {HttpModule} from "@angular/http";
import {MdInputModule} from '@angular/material';
import { AppComponent } from './app.component';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

@NgModule({
   declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      UserloginComponent,
      MainpageComponent
   ],

   imports: [
      BrowserModule,
      ReactiveFormsModule,
      RouterModule.forRoot(appRoutes),
      BrowserAnimationsModule,
      HttpModule,
      MdTableModule,
      MdInputModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

*RouterModule* と *Routes* を *@ anuglar/router* からインポートしました。 インポートでは、RouterModulesはappRoutesを上記のように定義されたパラメーターとして受け取ります-

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

ルートはコンポーネントの配列を受け取り、デフォルトでuserloginComponentが呼び出されます。

*userlogin.component.ts* で、ルーターをインポートし、次のように条件に基づいてmainpage.componentlに移動しました-

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';

@Component({
   selector: 'app-userlogin',
   templateUrl: './userlogin.componentl',
   styleUrls: ['./userlogin.component.css']
})

export class UserloginComponent implements OnInit {
   formdata;
   constructor(private router: Router) { }
   ngOnInit() {
      this.formdata = new FormGroup({
         uname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(6)
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }

   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }

   onClickSubmit(data) {
      console.log(data.uname);
      if (data.uname=="systemadmin" && data.passwd=="admin123") {
         alert("Login Successful");
         this.router.navigate(['app-mainpage'])
      } else {
         alert("Invalid Login");
         return false;
      }
   }
}

以下は app.component.ts の.tsファイルです。デフォルトの詳細のみが存在します。

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'app';}

次に、各コンポーネントファイルの詳細を表示します。まず、ヘッダーコンポーネントを取得します。新しいコンポーネントでは、4つのファイルが作成されます header.component.ts、header.componentl、header.component.css、およびheader.component.spec.ts 。

header.component.ts

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

@Component({
   selector: 'app-header',
   templateUrl: './header.componentl',
   styleUrls: ['./header.component.css']
})

export class HeaderComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

header.componentl

<div>
   <hr/>
</div>

cssは追加していません。これにより、header.component.cssファイルが空になります。また、テストケースはここでは考慮されないため、 header.compoent.spec.ts ファイルは空です。

ヘッダーには、水平線を描画します。ロゴやその他の詳細を追加して、ヘッダーをよりクリエイティブに見せることができます。

ここで、フッターコンポーネントの作成を検討しましょう。

フッターコンポーネントの場合、 footer.component.ts、footer.componentl、footer.component.spec.ts、footer.component.css ファイルが作成されます。

footer.component.ts

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

@Component({
   selector: 'app-footer',
   templateUrl: './footer.componentl',
   styleUrls: ['./footer.component.css']
})

export class FooterComponent implements OnInit {
   constructor() { }
   ngOnInit() { }
}

footer.componentl

<hr/>

cssを追加していないため、 footer.component.css ファイルは空です。また、テストケースはここでは考慮されないため、 footer.compoent.spec.ts ファイルは空です。

フッターについては、lファイルに示すように、水平線を描画します。

ここで、userloginコンポーネントがどのように機能するかを見てみましょう。作成されるuserloginコンポーネントの次のファイルは、* userlogin.component.css、userlogin.componentl、userlogin.component.ts、および userlogin.component.spec.ts。*です。

ファイルの詳細は次のとおりです-

userlogin.componentl

<div class="form_container">
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <header>Login</header>
      <label>Username <span>*</span></label>
      <input type="text" name="uname" formControlName="uname"/>

      <div class="help">At least 6 character</div>
      <label>Password <span>*</span></label>
      <input type="password" class="fortextbox" name="passwd" formControlName="passwd"/>

      <div class="help">Use upper and lowercase lettes as well</div>
      <button [disabled]="!formdata.valid" value="Login">Login</button>
   </form>
</div>

ここでは、 Username と Password の2つの入力コントロールを持つフォームを作成しました。これはモデル駆動型のフォームアプローチであり、その詳細は第14章-フォームで説明されています。

ユーザー名とパスワードは必須であると考えているため、同じものに対する検証がtsに追加されます。送信ボタンをクリックすると、コントロールはtsファイルで定義されている onClickSubmit に渡されます。

userlogin.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';

@Component({
   selector: 'app-userlogin',
   templateUrl: './userlogin.componentl',
   styleUrls: ['./userlogin.component.css']
})

export class UserloginComponent implements OnInit {
   formdata;
   constructor(private router: Router) { }
   ngOnInit() {
      this.formdata = new FormGroup({
         uname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(6)
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {
      console.log(data.uname);
      if (data.uname == "systemadmin" && data.passwd == "admin123") {
         alert("Login Successful");
         this.router.navigate(['app-mainpage'])
      }
   }
}

フォーム制御と検証の場合、モジュールは次のようにインポートされます

import { FormGroup, FormControl, Validators} from '@angular/forms';

ユーザーとパスワードが正しい場合、別のコンポーネントに移動するためのルーターが必要です。このため、ルータは以下に示すようにインポートされます-

import { Router} from '@angular/router';

*ngOnInit* では、フォームの検証が行われます。 ユーザー名は6文字を超える必要があり、フィールドは必須です。 同じ条件がパスワードにも適用されます。

[送信]をクリックすると、ユーザー名が systemadmin で、パスワードが admin123 であるかどうかを確認できます。「はい」の場合、「ログイン成功」を示すダイアログボックスが表示され、ルーターはメインページコンポーネントのセレクターであるアプリメインページに移動します。

*userlogin.component.css* ファイルのフォームにCSSが追加されています-

.form_container{
   margin : 0 auto;
   width:600px;
}

form {
   background: white;
   width: 500px;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
   font-family: lato;
   position: relative;
   color: #333;
   border-radius: 10px;
}

form header {
   background: #FF3838;
   padding: 30px 20px;
   color: white;
   font-size: 1.2em;
   font-weight: 600;
   border-radius: 10px 10px 0 0;
}

form label {
   margin-left: 20px;
   display: inline-block;
   margin-top: 30px;
   margin-bottom: 5px;
   position: relative;
}

form label span {
   color: #FF3838;
   font-size: 2em;
   position: absolute;
   left: 2.3em;
   top: -10px;
}
form input {
   display: block;
   width: 50%;
   margin-left: 20px;
   padding: 5px 20px;
   font-size: 1em;
   border-radius: 3px;
   outline: none;
   border: 1px solid #ccc;
}

form .help {
   margin-left: 20px;
   font-size: 0.8em;
   color: #777;
}

form button {
   position: relative;
   margin-top: 30px;
   margin-bottom: 30px;
   left: 50%;
   transform: translate(-50%, 0);
   font-family: inherit;
   color: white;
   background: #FF3838;
   outline: none;
   border: none;
   padding: 5px 15px;
   font-size: 1.3em;
   font-weight: 400;
   border-radius: 3px;
   box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
   cursor: pointer;
   transition: all 0.15s ease-in-out;
}
form button:hover {
   background: #ff5252;
}

現在、 userlogin.component.spec.ts ファイルは空です。テストケースがないためです。

ここで、メインページコンポーネントの機能について説明します。 mainpageコンポーネント用に作成されるファイルは、* mainpage.component.ts、mainpage.componentl、mainpage.component.css、および *mainpage.component.spect.ts です。

mainpage.component.ts

import { Component, OnInit, ViewChild} from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

import {Http, Response, Headers, RequestOptions } from "@angular/http";
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-mainpage',
   templateUrl: './mainpage.componentl',
   styleUrls: ['./mainpage.component.css']
})

export class MainpageComponent implements OnInit {
   formdata;
   cutomerdata;
   constructor(private http: Http) { }
   stateCtrl: FormControl;
   ngOnInit() {
      this.formdata = new FormGroup({
         fname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(3)
         ])),
         lname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(3)
         ])),
         address:new FormControl(""),
         phoneno:new FormControl("")
      });
   }
   onClickSubmit(data) {
      document.getElementById("custtable").style.display="";
      this.cutomerdata = [];
      for (var prop in data) {
         this.cutomerdata.push(data[prop]);
      }
      console.log(this.cutomerdata);
   }
}

名、姓、住所、電話番号を含む顧客フォームを作成しました。同じ検証は、 ngOnInit 関数を使用して行われます。 [送信]をクリックすると、コントロールは onClickSubmit 関数に移動します。ここでは、入力された詳細を表示するために使用されるテーブルが表示されます。

customerdataはjsonから配列に変換されるため、テーブルのngForで同じように使用できます。これは、以下に示すようにlファイルで行われます。

mainpage.componentl

<div class="form_container">
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <header>Customer Details</header>
      <label>FirstName <span>*</span></label>
      <input type="text" name="fname" formControlName="fname"/>
      <label>LastName <span>*</span></label>

      <input type="text" name="lname" formControlName="lname"/>
      <label>Address <span></span></label>
      <input type="text" name="address" formControlName="address"/>
      <label>Phone No <span></span></label>
      <input type="text" name="phoneno" formControlName="phoneno"/>
      <button [disabled]="!formdata.valid" value="Submit">Submit</button>
   </form>
</div>
<br/>

<div id="custtable" style="display:none;margin:0 auto;">
   <table>
      <tr>
         <td>FirstName</td>
         <td>LastName</td>
         <td>Address</td>
         <td>Phone No</td>
      </tr>
      <tr>
         <td *ngFor="let data of cutomerdata">
            <h5>{{data}}</h5>
         </td>
      </tr>
   </table>
</div>

ここでは、最初のdivに顧客の詳細があり、2番目のdivにテーブルがあり、入力した詳細が表示されます。ユーザーログインと顧客の詳細の表示は以下のとおりです。これは、ログインフォームとヘッダーとフッターのあるページです。

ログインメインページ

詳細を入力すると、表示は次のようになります

ログインメインページ-2

[送信]をクリックすると、ログイン成功を示すダイアログボックスが表示されます。

成功したログインのメインページ

詳細が無効な場合、以下に示すように無効なログインを示すダイアログボックスが表示されます-

無効なログインメインページ

ログインが成功した場合、以下に示すように、顧客の詳細の次のフォームに進みます-

顧客詳細ログインメインページ

詳細を入力して送信すると、下のスクリーンショットに示すように、顧客の詳細が追加されたことを示すダイアログボックスが表示されます-

追加された顧客の詳細