ติดตั้ง Bootstrap ใน AngulaJS

AngularJS ไม่ได้มีเรื่องเกี่ยวกับความสวยงามมาให้ด้วย ตรงนี้เปิดโอกาสให้ผู็พัฒนาได้เลือกใช้ตามความถนัดของตนเอง ซึ่งใน workshop นี้จะขอเริ่มที่ bootstrap ก่อน

ไปที่ Project แล้วพิมพ์คำสั่งนี้ลงใน command prompt

npm install bootstrap@3 jquery --save

หลังจากเสร็จแล้ว จะมีไฟล์ 3 ไฟล์ที่ต้องสนใจ

• node_modules/jquery/dist/jquery.min.js
• node_modules/bootstrap/dist/css/bootstrap.min.css
• node_modules/bootstrap/dist/js/bootstrap.min.js

เปิดไฟล์ angular-cli.json ทำการเพิ่มโค้ดเหล่านี้เข้าไป

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

ลองใช้งาน bootstrap style

  <div class="container">
  <div class="jumbotron">
    <h1>Welcome</h1>
    <h2>Angular & Bootstrap Demo</h2>
  </div>
  <div class="panel panel-primary">
    <div class="panel-heading">Status</div>
    <div class="panel-body">
      <h3>{{title}}</h3>
    </div>
  </div>
</div>

ศึกษาเพิ่มเติมเกี่ยวกับ Bootstrap3 http://bootstrapdocs.com/v3.0.3/docs/css/