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

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

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

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

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

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

作成したらその配下に
/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>

２ファイルの作成が完了したら
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>←この部分を追加

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

Angular2によるモダンWeb開発 TypeScriptを使った基本プログラミング

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