ฝึก 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]

)

Start Learning Front End

Written by

เป็น back-end developer ที่อยากเรียนรู้ front-end :เขียน JAVA,PHP,C#,Android รักการปั่นจักรยานและการนอน

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade