コンポーネントを生成する|AngularでWebサイト作成


コンポーネントを生成する|AngularでWebサイト作成

Angularの学習の為に、AngularでWebサイトを作ってみることにしました(Angularのバージョンは4.3.6です)。
適宜作業内容をまとめていきます。

基本的な部分は公式チュートリアルなどを参考にしながら進めています。

今回はangular-cliでコンポーネントを生成し、ブラウザに表示するまでを行います。
※angular-cliの導入手順は前回の記事をご確認下さい。

開発環境

・OS:Windows8.1 64bit
・node:v7.2.1
・npm:4.0.5
・Angular:4.3.6
・開発ツール:VisualStudioCode

手順

手順1.コンポーネント生成コマンドの実行

VisualStudioCodeのコンソールか、コマンドプロンプトで前回生成したsampleAppフォルダに移動してから、
以下のコマンドを実行します。

> ng generate component test

このコマンドで「app」フォルダの下に「test」フォルダが生成されます。
中には以下の4ファイルが生成されました。

・test.component.css
・test.component.html
・test.component.spec.ts
・test.component.ts

コンポーネントは画面の一部分(一要素)を担うパーツのようなもので、
今回のtestコンポーネントにのみ適用するCSSが「test.component.css」、
testコンポーネントのHTMLが「test.component.html」、
testコンポーネントの変数の変更などの処理を担うのが「test.component.ts」という役割分担になります。
(「test.component.spec.ts」はテストプログラムのようです。今回は省略します。)

手順2.app.module.htmlの編集

手順1で生成したコンポーネントを初期画面に表示してみます。
まず、「test.component.ts」の以下の記述を確認してみましょう。

~略~
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
~略~

この「selector」の部分がこのコンポーネントのセレクタ名になります。
このselectorを「app.module.html」に指定していきます。
以下の様にapp-testセレクタを用いたタグを追加しましょう。

<router-outlet></router-outlet>
<app-test></app-test> //←追加

これだけではまだtestコンポーネントは表示されませんので、
次の手順3に進みます。

手順3.app.module.tsの編集

app.moduleにtestコンポーネントを含めてあげる必要があります。
ファイルの先頭に「import」文が書かれていますので、まずそこに以下のimport文を追記します。

import { TestComponent } from './test/test.component'; //←追加

次に「@NgModule」というモジュールの設定部分の「declarations」という配列に、「TestComponent」を追加します。

@NgModule({
  declarations: [
     ~省略~
     TestComponent //←追加
  ],

※追記する1行前のComponentの末尾に「,(カンマ)」を付けるのを忘れないようにしましょう。

手順4.ブラウザ確認

ここまでできたらブラウザで確認してみましょう。
test.component.htmlの内容が表示されていればOKです。

感想

今回はコンポーネントの簡単な埋め込みを行ってみました。
画面要素をコンポーネントという単位に分割し、それを組み合わせて利用することができることが分かります。
ngコマンドを使うとコンポーネント用のファイルがまとめて生成できるので便利です。

  • このエントリーをはてなブックマークに追加

PAGE TOP