Angular

Angular : Data Binding & 2-Way Data Binding

by

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 … Read more

Angular with Bootstrap & Component

by

ในบทความนี้เรานำ 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 ขึ้นมา ในส่วนของ … Read more

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

by

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 … Read more