Sử dụng Bootstrap 4 với Angular 6 | 7

Sử dụng Bootstrap 4 với Angular hiện được cập nhật lên Angular 7 và phiên bản mới nhất là Angular 8, các bạn có thể tham khảo tại thủ thuật lập trình để xem những bài viết về Angular.

1. Giới thiệu về Bootstrap
2. Cài đặt Angular CLI 7
3. Thêm Bootstrap 4 vào Angular 6
4. Thêm Bootstrap 4 Sử dụng ng-bootstrapvàngx-bootstrap
5. Thêm Bootstrap 4 vào Angular 7
6. Phần kết luận

1. Giới thiệu về Bootstrap

Bootstrap là khung HTML và CSS phổ biến nhất để xây dựng bố cục đáp ứng dễ dàng và không cần có kiến ​​thức sâu về CSS (Vẫn cần CSS tùy chỉnh để tùy chỉnh thiết kế của bạn làm cho nó khác với các trang web theo kiểu Bootstrap khác trừ khi bạn đang sử dụng BS chủ đề được phát triển riêng cho bạn).

Bootstrap 4 là phiên bản mới nhất của BS mang đến nhiều tính năng mới và mạnh mẽ cho khung công tác quan trọng nhất là Flexbox, hiện là hệ thống hiển thị mặc định cho bố cục lưới BS (một trong những tính năng quan trọng nhất của BS).

Trong hướng dẫn này, chúng ta sẽ xem cách sử dụng Bootstrap để tạo kiểu cho các trang web được xây dựng bằng khung Angular 6 | 5. Chúng ta sẽ thấy làm thế nào chúng ta có thể dễ dàng tích hợp cả hai, sử dụng ng-bootstrapso với ngx-bootstrap các gói và sử dụng Angular CLI để tạo ra một dự án hoàn toàn mới.

2. Cài đặt Angular CLI 6

Vì vậy, hãy bắt đầu bằng cách cài đặt Angular CLI 7 trong trường hợp nó chưa được cài đặt trên hệ thống của bạn.
Đi đến thiết bị đầu cuối hoặc dấu nhắc lệnh của bạn, sau đó chạy lệnh sau để cài đặt phiên bản mới nhất của Angular CLI (Phiên bản 6 kể từ khi viết bài này)

$ npm install -g @angular/cli@latest

Điều này sẽ cài đặt CLI v6 trên toàn cầu, do đó tùy thuộc vào cấu hình npm của bạn, bạn có thể cần thêm sudo (để truy cập siêu người dùng).
Sau khi cài đặt, bạn sẽ tùy ý sử dụng tiện ích ng . Hãy sử dụng nó để tạo ra một dự án Angular 7 mới.

$ ng new ng5bootstrap4

Điều này sẽ tạo cấu trúc thư mục và các tệp cần thiết cho dự án và sẽ cài đặt các phụ thuộc.

Tiếp theo điều hướng trong thư mục gốc của dự án mới được tạo

cd ng5bootstrap4

Sau đó, bạn có thể phục vụ ứng dụng Angular 7 của mình bằng ng serve lệnh:

ng serve

Ứng dụng của bạn sẽ được phục vụ từ http://localhost:4200/

3. Thêm Bootstrap 4 vào Angular 6 | 7

Bây giờ quay trở lại thiết bị đầu cuối của bạn sau đó cài đặt Bootstrap 4 qua npm

 $ npm install --save bootstrap

Điều này cũng sẽ thêm bootstrap vào package.json.
Các thư viện của  Bootstrap 4 được cài đặt bên trong node_modules/bootstrap thư mục, do đó bạn sẽ cần bao gồm các tệp CSS ở đầu tệp HTML chính của ứng dụng hoặc với @import trong style.css

@import "~bootstrap/dist/css/bootstrap.css"

Xin lưu ý rằng Bootstrap 4 phụ thuộc vào thư viện jQuery và Popper.js và vì chúng tôi không bao gồm chúng bất kỳ thành phần Bootstrap nào dựa vào JavaScript sẽ không hoạt động. Vậy tại sao không bao gồm những libs? Đối với Angular, tốt hơn hết là tránh sử dụng các thư viện thực hiện thao tác trực tiếp với DOM (như jQuery) và để Angular xử lý việc đó. Bây giờ nếu bạn cần các tính năng đầy đủ của Bootstrap 4 thì sao?

Bạn có các cách khác nhau bao gồm jQuery Popper.js và bootstrap.js không khuyến nghị sử dụng mảng script trong .angular-cli.json tệp

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/popper.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

4. Thêm Bootstrap 4 Sử dụng ng-bootstrapvàngx-bootstrap

Một cách khác tốt hơn là sử dụng các thư viện thành phần được tạo ra nhằm mục đích làm cho Bootstrap hoạt động trơn tru với Angular như ng-bootstrap hoặc ngx-bootstrap Tôi nên thêm bootstrap.js hoặc bootstrap.min.js vào dự án của mình?

Không, mục tiêu của ng-bootstrap là thay thế hoàn toàn việc triển khai JavaScript cho các thành phần. Bạn cũng không nên bao gồm các phụ thuộc khác như jQuery hoặc popper.js. Nó không phải là cần thiết và có thể can thiệp vào mã ng-bootstrap nguồn Vì vậy, trước tiên bạn sẽ cần cài đặt thư viện từ npm bằng lệnh sau:

npm install --save @ng-bootstrap/ng-bootstrap

Sau khi hoàn tất cài đặt, bạn sẽ cần nhập mô-đun chính.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

Tiếp theo, bạn sẽ cần thêm mô-đun bạn đã nhập trong mô-đun gốc ứng dụng của mình

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  declarations: [/*...*/],
  imports: [/*...*/, NgbModule.forRoot()],
  /*...*/
})
export class AppModule {
}

Xin lưu ý rằng ng-bootstrap cần phải có tệp CSS Bootstrap 4.

Bạn có thể thêm nó trong mảng kiểu của .angular-cli.json tệp như thế:

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

Bây giờ bạn có thể sử dụng Bootstrap 4 trong ứng dụng Angular của bạn.

Bạn có thể tìm thấy tất cả các thành phần có sẵn thông qua liên kết này .

Bạn cũng có thể sử dụng ngx-bootstrap thư viện Bootstrap 4 trong Angular 7.

Chỉ cần quay lại thiết bị đầu cuối của bạn, đảm bảo bạn đang ở trong dự án Angular của mình, sau đó chạy lệnh sau để cài đặt ngx-bootstrap

npm install ngx-bootstrap --save

Bạn cũng cần các tệp CSS Bootstrap 4. Thêm dòng sau vào <head>ứng dụng Angular của bạn, bao gồm Bootstrap từ CDN

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

Bạn cũng có thể cài đặt bootstrap từ npm và sử dụng cách trước để bao gồm tệp CSS (thông qua mảng kiểu trong angular-cli.json tệp)

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

Tiếp theo mở src/app/app.module.ts và thêm

import { BsDropdownModule} from 'ngx-bootstrap/dropdown';
import { AlertModule } from 'ngx-bootstrap';
/*...*/
@NgModule({
   /*...*/
   imports: [BsDropdownModule.forRoot(),AlertModule.forRoot(), /*...*/ ],
    /*...*/
})

Đây là một ví dụ về việc nhập hai thành phần BsDropdownModule và AlertModule .

Bạn cần nhập mô-đun cho từng thành phần bạn muốn sử dụng theo cùng một cách.

ngx-bootstrap cung cấp từng thành phần BS trong mỗi mô-đun riêng để bạn chỉ nhập các thành phần bạn cần. Bằng cách này, ứng dụng của bạn sẽ nhỏ hơn vì nó chỉ gói các thành phần bạn đang thực sự sử dụng.

Bạn có thể tìm thấy tất cả các thành phần có sẵn mà bạn có thể sử dụng từ các tài liệu

5. Thêm Bootstrap 4 vào Angular 6

Các cách trước đây để thêm Bootstrap 4 trong Angular 5 cũng hoạt động cho Angular 6 hoặc Angular 7. Nhưng nhờ ng addlệnh mới được thêm vào Angular 6, bạn có một cách đơn giản và dễ dàng hơn để thêm Bootstrap mà không npm installcần phụ thuộc một cách rõ ràng hoặc thêm bất kỳ cấu hình nào. Bạn chỉ có thể chạy lệnh sau để thêm ng-bootstrap bằng cách sử dụng Sơ đồ:

ng add @ng-bootstrap/schematics

Đó là nó. Bây giờ bạn có hỗ trợ cho các thành phần và kiểu Bootstrap mà không cần thêm cấu hình nào. Bạn cũng không cần jQuery vì chúng tôi đang sử dụng ng-bootstrap.

6. Phần kết luận

Trong bài viết này, chúng tôi đã thấy các cách khác nhau bao gồm Bootstrap 4 trong ứng dụng Angular 5: Sử dụng tài sản Bootstrap 4 ban đầu từ npm, sử dụng ng-bootstrapthư viện và cuối cùng sử dụng ngx-bootstrap.
Nếu bạn muốn so sánh ng-bootstrap với ngx-bootstrap điểm quan trọng nhất là cách ngx-bootstrap sử dụng các mô-đun riêng biệt cho các thành phần để giảm kích thước ứng dụng cuối cùng.
Bài viết này cũng được cập nhật để chỉ cho bạn cách nhanh chóng thêm Bootstrap 4 vào phiên bản Angular 7 mới bằng cách sử dụng ng add lệnh mới .