Tag: Angular

  • Angular : Data Binding & 2-Way Data Binding

    maliwan.s

    Data Binding เป็นการติดต่อสื่อสารกันระหว่าง Business Logic หรือไฟล์ที่เป็นนามสกุล .ts กับ .html เราจะทดลองสร้างคอมโพเนนท์ใหม่ ชื่อ Calculator ดังภาพที่ 1

    ภาพที่ 1 คำสั่งสร้างคอมโพเนนท์

    และแก้ไขไฟล์ app.component.html ให้แสดงเฉพาะคอมโพเนนท์ calculator โดยการลบโค้ดทั้งหมดในไฟล์และใส่โค้ดดังภาพที่ 2

    ภาพที่ 2 เพิ่ม Tag app-calculator

    ในไฟล์ calculator.component.html (ภาพที่ 3) เราจะใส่ property binding ใน HTML Tag ให้เป็นไปตามที่เราต้องการโดยการใช้เครื่องหมาย [ ] ซึ่งเราจะลองทำให้ตัวแปรกำหนดการ disabled ปุ่ม และในไฟล์ calculator.component.ts (ภาพที่ 4) เราจะกำหนดตัวแปรชื่อ isAllowed เป็น true ก็จะสามารถกดปุ่มได้ แต่หากเป็น false จะเป็นการ disable ปุ่ม ซึ่งตรงนี้เราเป็นการใช้ property binding

    ภาพที่3 property binding ใน HTML Tag

     

    ภาพที่ 4 สร้างตัวแปร Binding

    ต่อไปเราจะสร้าง events เช่น การกดปุ่ม การคลิ๊ก เป็นต้น เราจะใช้เครื่องหมาย ( ) ในการกำหนด โดยเราจะเพิ่ม Event Binding ลงในปุ่ม CALCULATE ในไฟล์ calculator.component.html ดังภาพที่ 5

    ภาพที่ 5 เพิ่ม events

    และสร้างตัวแปร result กับ ฟังก์ชั่น calculate() ไว้ใน calculator.component.ts ซึ่งเมื่อเรามีการกดปุ่ม แอพจะไปเรียก calculate() ขึ้นมาดังภาพที่ 6

    ภาพที่ 6 เขียนฟังก์ชั่น calculate

    หลังจากนี้เราจะมาทำ 2-Way Binding ซึ่งก็คือการนำค่าของตัวแปรมาผูกกับค่าขอ HTML Form ต่างๆ ทำให้เมื่อแก้ไขค่าใน Form นั้นๆ แล้วค่าของตัวแปรจะเปี่ยนทันที โดยจะใช้สัญลักษณ์ [( )] ในตัวอย่างต่อไปเราจะสร้างตัวแปรสองตัวและนำค่ามาแสดง โดยสามารถเปลี่ยนค่าได้จาก Textbox เปิดไฟล์ calculator.component.html ขึ้นมารับค่า input 2 ตัว ดังภาพที่ 7

    ภาพที่ 7 สร้าง input รับค่า

    และเปิดไฟล์ calculator.component.ts สร้างตัวแปรเก็บค่าชื่อ num1และ num2 และ addResult เก็บค่าผลบวกของทั้งสองตัวเพื่อเอามาแสดงใน result เมื่อกดปุ่ม calculate จะไปเรียกฟังก์ชั่น calculate() ดังภาพที่ 8 และเมื่อรันแอพขึ้นมาจะปรากฏหน้าจอดังภาพที่ 9

    ภาพที่ 8 เขียนโค้ดบวกค่า input ทั้งสอง และแสดงผล

     

    ภาพที่ 9 แสดงผลการรันแอพ

  • Angular with Bootstrap & Component

    maliwan.s

    ในบทความนี้เรานำ Bootstrap มาใช้ในโปรเจค ซึ่ง Bootstrap เป็น CSS Framework ที่ใช้ในการตกแต่งเว็บให้มีความสวยงามและเป็นระเบียบมากยิ่งขึ้น ก่อนอื่นเราต้องติดตั้ง Bootstrap โดยใช้คำสั่ง

    เปิดไฟล์ angular.json และเพิ่มโค้ดในส่วน styles

    หลังจากนั้นลองรันแอพ จะเห็นได้ว่า font ของตัวอักษรเปลี่ยนแปลงไป หากต้องการดูว่า Bootstrap 3 ทำอะไรได้บ้าง สามารถดูได้ที่ https://getbootstrap.com/docs/3.3/ ต่อไปเราจะมาดูกันว่าหลังจากรันแอพแล้วเกิดอะไรขึ้นบ้าง มีการโหลดไฟล์ใดบ้าง

    ไฟล์แรกที่จะถูกเรียกขึ้นมาก็คือ main.ts

    ในบรรทัดที่ 11 จะมีการเรียกต่อไปยังโมดูลที่ชื่อ AppModule โดยดูจากการ import ด้านบนแล้วโมดูลนี้ก็คือไฟล์ app/app.module ซึ่งอยู่ที่ src > app > app.module.ts หากเราเข้ามาดูในไฟล์นี้จะพบโค้ดตามรูปข้างล่าง

    จากรูปในบรรทัดที่15 เป็นการบอกให้เริ่มจากการโหลดคอมโพเนนท์ที่ชื่อว่า AppComponent และเราก็ดูที่ import เหมือนเดิมว่าไฟล์นี้อยู่ที่ไหน และทำการเปิดไฟล์ app.component.ts ขึ้นมา

    ในส่วนของ @Component ประกอบด้วย properties :

    1. selector: ‘app-root’ หากไปดูที่ไฟล์ index.html เราจะพบ HTML Tag ที่ชื่อว่า app-root ซึ่งเป็นการกำหนดว่าสิ่งที่เกิดขึ้นในคอมโพเนนท์นี้จะไปใส่ไว้ในไหน โดยที่ template ในข้อ2 จะถูกเอามาใส่ใน tag app-root โดยอัตโนมัติ
    2. templateUrl: เพื่อบอกว่าเราจะเอา template มาจากไฟล์ไหน ในที่นี้คือ app.component.html
    3. styleUrls: เป็นส่วนที่ใช้ตกแต่ง โดยไฟล์ในข้อ2 จะใช้ style ที่อยู่ในไฟล์ที่กำหนด

    ทดลองเพิ่มโค้ดในไฟล์ app.component.css และ index.html ตามลำดับ

    และลองดูผลลัพธ์ที่เกิดขึ้น จะเห็นว่า “Hello… World” เป็นสีดำ แต่ “Welcome to My App 22-5-2018” เป็นสีแดง เป็นเพราะว่าเราตั้งค่าไว้ว่าเฉพาะคอมโพเนนท์นี้ให้ใช้ไฟล์ตกแต่งชื่อ app.component.css ทำให้ส่วนอื่นที่ไม่ได้อยู่ใน sector ที่กำหนดไม่ได้ใช้การตกแต่งนี้

     

     

  • รู้จัก Angular กันดีกว่า

    maliwan.s

    Angular เป็น Front-end JavaScript Framework ที่ทำงานบนฝั่ง Client ที่เรานำไปสร้าง Reactive Single Page Applications (SPA) ซึ่งก็คือทุกๆหน้าจะถูกโหลดมารวมอยู่ในหน้าเดียว การคลิ๊กเปลี่ยนหน้าหรือการคลิ๊กปุ่มต่างๆ จะทำให้เรารู้สึกเหมือนเป็น Desktop Application ที่ไม่มีการโหลดเปลี่ยนหน้า Angular เป็น Model-View-Controller (MCV) และยังเป็น Model-View-ViewModel (MVVM) อีกด้วย มีการเชื่อมการทำงานระหว่าง JavaScript เข้ากับ DOM Element ของ HTML ใช้การทำงาน client-side template สามารถสร้าง template ไปใส่ไว้ในที่ที่เรากำหนดไว้ได้ และเป็น 2-way data binding เพื่อ sync Model กับ View

    เดิม Angular 1 เป็น javascript และตั้งแต่ Angular 2 ขึ้นไปเป็น typescript ปัจจุบัน Angular 6 ซึ่งมีอะไรใหม่ๆเพิ่มเข้ามา ได้แก่

    • Angular CLI เพิ่มคำสั่ง ng add, ng update, ng generate library(สร้าง Library)
    • Angular 6 ได้มีฟีเจอร์ใหม่ที่เรียกว่า Workspace ทำให้สามารถสร้าง Project ได้หลายตัวภายใน Workspace เดียว จึงได้มีการเพิ่มโฟลเดอร์ภายในโฟลเดอร์ dist เพื่อบอกว่าเป็นไฟล์ของโปรเจคใด

    • สามารถสร้าง Web Component ด้วย Angular Elements
    • Angular Material เพิ่ม Component ใหม่อย่าง Tree, Badge และ Bottom Sheet ส่วนตัว CDK ตัว overlay เพิ่ม positionStrategy แบบใหม่
    • Provider แบบใหม่ที่สนับสนุนการทำ Tree Shaking เพื่อช่วยในการลดขนาด Bundle เพิ่มประสิทธิภาพ Animation
    • มาพร้อมกับ RxJS 6 (A reactive programming library for JavaScript) เวอร์ชันใหม่ ซึ่งมีการเปลี่ยนวิธี import แบบใหม่มาตั้งแต่ versions 5

    เรามาทดลองสร้างโปรเจคกันดีกว่า ก่อนอื่นเราจะต้องติดตั้ง nodejs, Visual Studio Code และ

    1. ติดตั้ง angular

    2. สร้างแอพพลิเคชั่น

    การรัน server สามารถทำได้ด้วยการพิมพ์คำสั่งเข้าไปในโฟลเดอร์ของโปรเจค และ คำสั่งที่ใช้ในการรันแอพ ดังนี้

    3. เปิด Project โดยใช้ “Visual Studio Code” ที่ได้ติดตั้งไว้ในตอนแรก File > Open Floder… > my-app ดังในรูปด้านล่าง

    ซึ่งโฟลเดอร์ที่เราสนใจหลักๆ ก็คือ src/app เปิดไฟล์ app.component.html เพิ่มในส่วน <h1> … </h1>

    และเปิดไฟล์ app.component.ts ขึ้นมา ในส่วนนี้เป็นตัวควบคุมของ component นี้

    ในบรรทัดที่ 9,10 เป็นการสร้างตัวแปร title , Date ตามลำดับ ที่ถูกนำไปใช้ในไฟล์ app.component.html ซึ่งในส่วนนี้จะเรียกว่า Data Binding และทำการเปิด Browser ไปที่ http://localhost:4200/ จะได้ผลลัพธ์ดังรูป

    ใน Angular จะใช้โมดูลเปรียบเสมือนกล่องแต่ละชิ้นมาประกอบกันเพื่อทำงานในแต่ละส่วนโดยมีข้อดีคือสามารถนำโค้ดกลับมาใช้ใหม่ได้ (reusable) และหากมีหลายๆโมดูลที่จะเรียกใช้สามารถเรียงลำดับก่อนหลังได้ หรือจะใช้คู่ขนานก็ได้ ซึ่งในโมดูลก็จะประกอบไปด้วย

    • Controllers
    • Services
    • Filters
    • Directives
    • อื่นๆ

    ทดลองใช้ FormsModule ซึ่งเป็นโมดูลที่ใช้ในการจัดการฟอร์มต่างๆ ของ HTML รวมทั้งช่วยในการทำ Data Binding ในส่วนของข้อมูลฝั่งควบคุมกับค่าในฟอร์มของฝั่งที่แสดง เปิดไฟล์ app.module.ts และทำการแก้ไข ดังนี้

    บรรทัดที่เพิ่มเข้าไปคือการเพิ่มโค้ดเข้าไปเพื่อดึงโมดูลนี้มาใช้งาน จากนั้นลองนำส่วนของฟอร์มมาใช้กับโปรเจคโดยเปิดไฟล์ app.component.html ขึ้นมา และเพิ่มโค้ดตามรูปด้านล่าง

    และลองรัน Browser จะได้ผลัพธ์ ดังนี้