ฝึก Angular 4:ตอนที่ 4 Module และ Component
ก่อนที่จะเริ่มเขียนโปรเจคแรกต้องรู้จัก Module และ Component ก่อน
Module คือการรวมกลุ่มของ Module และ Component
Component คือ ส่วนของการจัดการหน้าเว็บของ component นั้นๆ
โครงสร้างของ Component ง่ายๆ จะมี 3 ไฟล์
name.component.ts คือส่วนของคุณสมบัติทั้งหมดของ component นั้นๆ ถ้าหากจะมองภาพง่ายๆ ก็คือโค๊ด Java Script
name.component.html คือส่วนที่แสดงผล Tag HTML
name.component.scss คือส่วนของ css
ไฟล์ name.component.ts
ตัวอย่างคือ app.component.ts
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘app’;
}
ส่วนแรก
Import Component/Module ที่จำเป็นต้องใช้
import { Component } from ‘@angular/core’; ทุก component ต้องมีตัวนี้
ซึ่งจะมี Pattern ดังนี้
import { ชื่อ Class ของ component/Module นั้นๆ } from ‘Path ของ component นั้นๆ’
ส่วนที่ 2
การประกาศ คุณสมบัติของ component
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
selector คือ tag html name ที่ไว้ใช้อ้างอิงใน tag html ซึ่งจะเรียกแบบนี้ <selector_name></selector_name>
เช่น <app-root></app-root>
selector: ‘app-root’,
templateUrl คือ html ที่จะใช้ render หน้าเว็บของ component นั้นๆ
templateUrl: ‘./app.component.html’,
sytleUrls คือ css ของ component นั้นๆ
styleUrls: [‘./app.component.css’]
ส่วนที่ 3
คือ Class ของ Component นั้นๆ
ซึ่งจะมี Pattern ดังนี้ export class ชื่อCalssComponent
export class AppComponent {
title = ‘app’;
}
หมายถึง component นี้ตัวแปรชื่อ title มีค่าว่า app และมี type เป็น String เวลาจะเรียกใช้งานก็เรียกโดย {{ชื่อตัวแปร}} จากตัวอย่างใช้ {{title}}
title = ‘app’;
ไฟล์ name.component.html
ตัวอย่างคือ app.component.html
จะเห็นว่าไฟล์นี้ เป็น tag html ธรรมดา และมีการเรียกใช้ตัวแปรของ component คือ {{title}}
<div style=”text-align:center”>
<h1>
Welcome to {{title}}!
</h1>
<img width=”300" src=”data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=”>
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target=”_blank” href=”https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target=”_blank” href=”https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target=”_blank” href=”https://blog.angular.io//">Angular blog</a></h2>
</li>
</ul>
หาก run html นี้จะได้ดังรูป

โครงสร้างของ Module
ประกอบด้วยไฟล์ name.module.ts
ตัวอย่าง app.module.ts (เป็น root module ซึ่งทุกโปรเจคต้องมี)
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppComponent } from ‘./app.component’;@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ส่วนแรก
Import Component/Module ที่จำเป็นต้องใช้
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppComponent } from ‘./app.component’;
ส่วนที่ 2
คือส่วนของการเรียกใช้ Module หรือ Componet
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
declarations คือ List ของ component ที่จะใช้ render เว็บ
declarations: [AppComponent],
imports คือ Module ที่จะใช้งาน
imports: [BrowserModule],
providers คือส่วนของ service
providers: [],
คือส่วน ui หลัก
bootstrap: [AppComponent]
