読者です 読者をやめる 読者になる 読者になる

masalibの日記

システム開発、運用と猫の写真ブログです

Angular:componentを作ってみる(手動)

Angular(バージョン2以降)の勉強、その5です
componentはAngularでは重要な単位です

今時のWEBデザインならヘッダー、メイン、サイドメニュー、フッターみたいな形になっています

参考URL
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ

Angularではこのデザインの単位で
componentを作成することで
機能追加や更新をしやすくしています
componentの作ってみたいと思います


appのフォルダの配下に
「server」というフォルダを作成する

f:id:masalib:20170504201427p:plain

作成したらその配下に
/app/server/server.component.ts
というファイルを作成する

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

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html'
})
export class ServerComponent {

}

解説

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

コアの読み込み

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html'
})

セレクターはhtmlで動的に読み込ませる部分になる
(このプロジェクトでのユニークにしないといけいない)
テンプレートは指定されたhtmlを動的に切り替える所になる
(最後に使う)

/app/server/server.component.html
というファイルを作成する

<p>The Server Component</p>

2ファイルの作成が完了したら
appのcomponentと結びつける作業をおこなう

修正前:/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

修正後:/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';

@NgModule({
  declarations: [
    AppComponent,
    ServerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

追加したのは
import { ServerComponent } from './server/server.component';

declarations: [
AppComponent,
ServerComponent ←ここ
],

これでcomponentの追加ができたので
appのテンプレートに
app-serverのセレクターを記述して表示させる

/app/app.component.html

<h1>
  {{title}}I'm componet
</h1>
<hr>
<app-server></app-server>←この部分を追加

f:id:masalib:20170504201546p:plain

The Server Componentが表示されていれば
無事に読み込まれていることが確認できた

次はCLIでのcomponent作成です
masalib.hatenablog.com