Print
Details: Category: บทความ Angular | Published: 27 September 2018 | Hits: 6884

โจทย์ เป็นอย่างนี่ เราต้องการใช้ Front End Framwork อย่าง Bootstrap บน Angular ต้องทำอย่างไร ? เริ่มจากเรา สร้างโปรเจ็ค Angular เสร็จแล้ว ใครยังไม่ได้สร้างไปดูที่ http://androidthai.in.th/android-article-2/80-create-new-project-angular ครับ

ไปที่ Terminal ใน VS code ให้พิมพ์คำสั่ง nam install --save bootstrap เพื่อติดตั้ง Bootstrap

ต่อ เน็ตด้วยละ 

ได้มาละ Bootstrap ของเรา แต่แค่นี่ยังไม่ทำงานครับ ยังขาด jQuery ครับ

 

 

การติดตั้ง jquery แค่ พิมพ์คำสั่ง install jquery --save

ได้มาละ jquery เวอร์ชั่น 3.3.1 ของเรา

 

 ต่อไปตัวสุดท้ายละ popper ให้พิมพ์คำสั่งแบบนี่เข้าไปครับ npm install --save popper.js

ไปเปิด ไฟร์นี่ออกมาดูครับ package.json

ถ้าติดตั้งเสร็จทั้ง 3 อย่างจะได้แบบนี้ ต่อไปทำให้ Angular รู้จัก Bootstrap

เปิดไฟร์ นี่ครับ angular.json

มองหา styles ครับ และ ค่อยไปที่

และ เข้าไปที่ node_modules 

 

ไปที่ bootstrap.min.js  และ

 

คลิกขวาและ Copy Path ไว้

ให้ Paste ไปแล้วตัดข้างหน้าออกให้ได้แบบนี่ครับ

ต่อไปลงมาที่ scripts บ้าง

เก็บ Path ของ query.slim.min.js

 เก็บ Path ของ popper.js

และสุดท้าย bootstrap.min.js

ไปใส่ที่ Scripts จนได้แบบนี่ครับ 

และ ไปทดสอบผล โดยการไปที่ Terminal พิมพ์ คำสั่ง ng serve ไปที่ Chrome พิ่มพ์ localhost:4200 จะพบว่า การแสดงผลสวยขึ้นแสดงว่า Bootstrap และ  Jquery ทำงานละ