[Thực hành] Cài đặt thư viện bootstrap cho app Angular

Mục tiêu

Cài đặt thư viện bootstrap cho app Angular- Biết cài đặt và sử dụng thư viện bootstrap cho dự án Angular.

Nội dung- cài đặt thư viện bootstrap cho app Angular

Để bootstrap có thể sử dụng được thì cần làm cho những thư viện sau hiện diện trên app:

• thư viện bootstrap stylesheet
• thư viện bootstrap javascript
• các thư viện khác mà bootstrap javascript cần tới.

Hướng dẫn

Bước 1: install thư viện bootstrap

Khai báo bổ sung dependence bootstrap và các thư viện cần thiết của nó vào file package.json, sau đó chạy npm i để cài đặt các gói.

"dependencies": {
  "bootstrap": "^4.3.1",
  "jquery": "^3.4.1",
  "popper.js": "^1.15.0"
}

Thư viện bootstrap sẽ được cài đặt vào thư mục nodemodules, tiếp theo ta khai báo để angular nạp thư viện này vào lúc khởi động.

Bước 2: nạp bootstrap.css

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

Nếu thành công, thư viện bootstrap style sẽ hiện diện:

Bước 3: nạp bootstrap.js và các thư viện javascript khác mà nó cần tới

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

Nếu thành công, đối tượng bootstrap sẽ có khả năng truy cập:

Bootstrap đã sẵn sàng để sử dụng.

Trên đây CodeGym đã cùng với bạn luyện tập về component data binding trong Angular. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé!