▷ Cách thêm Bootstrap vào Angular [Step-by-Step]

HTML, JavaScript và CSS là một số trụ cột của phát triển front-end. Angular là một trong những framework JavaScript được sử dụng rộng rãi nhất để phát triển các ứng dụng phía máy khách. Mặt khác, Bootstrap là một trong những khung giao diện người dùng (UI) phổ biến nhất.

Khung là tập hợp các bộ mã, công cụ và thư viện được tạo sẵn cung cấp cách thức được xác định trước để tạo ứng dụng. Bootstrap và Angular đều là framework.

Trong bài viết này, chúng tôi sẽ xác định từng nền tảng và thảo luận về những lợi thế của việc kết hợp hai công nghệ cũng như cách kết hợp chúng để tạo ra các ứng dụng mạnh mẽ và hấp dẫn về mặt hình ảnh.

Bootstrap là gì?

Bootstrap là bộ công cụ ngoại vi miễn phí để phát triển các ứng dụng di động. Cấu trúc HTML, CSS và JavaScript này chứa một tập hợp lớn các đoạn mã có thể tái sử dụng mà nhà phát triển có thể sử dụng trong các phần khác nhau trong dự án của họ.

Nền tảng này bao gồm các mẫu thiết kế cho nhiều tính năng khác nhau như nút, phương thức, băng chuyền hình ảnh, bảng, điều hướng, v.v. Bootstrap có tài liệu phong phú giúp bạn dễ dàng sử dụng.

AngularJS là gì?

AngularJS là một khung JavaScript mở rộng cú pháp HTML ngoài ngôn ngữ đánh dấu thông thường. Khung này giới thiệu các tính năng như liên kết dữ liệu cho phép các nhà phát triển tránh được quá trình phức tạp trong việc tạo các trang web phản hồi khi sử dụng HTML.

AngularJS sử dụng khung công tác mô hình-khung nhìn-điều khiển (MVC) trong đó có sự tách biệt rõ ràng giữa logic ứng dụng và giao diện người dùng. Các nhà phát triển có thể sử dụng AngularJS để xây dựng các ứng dụng web một trang, ứng dụng mạng xã hội, nền tảng thương mại điện tử, hệ thống quản lý nội dung, v.v.

Lợi ích của việc sử dụng Bootstrap trong Angular

Các thành phần giao diện người dùng có sẵn: Bạn không cần phải tạo các thanh điều hướng, nút, băng chuyền và tab từ đầu vì Bootstrap có các đoạn mã tạo sẵn mà bạn có thể sử dụng. Bằng cách này, các nhà phát triển có thể tập trung hơn vào chức năng trong khi Bootstrap xử lý cấu trúc và kiểu dáng cơ bản.
Có thể tùy chỉnh: các thành phần dựng sẵn cung cấp mã mẫu. Tuy nhiên, bạn có thể tùy chỉnh mã trong ứng dụng của mình. Ví dụ: nếu bạn lấy một tab từ Bootstrap, bạn có thể thay đổi nhiều thành phần khác nhau như hình ảnh và văn bản để phù hợp với nhu cầu của mình.
Khả năng phản hồi: Người dùng web hiện đại duyệt web trên nhiều thiết bị khác nhau, từ điện thoại thông minh, máy tính bảng đến máy tính. Bạn không cần tạo ứng dụng cho mọi kích thước màn hình vì Bootstrap cung cấp các ứng dụng web đáp ứng.
Cung cấp phong cách nhất quán: Một ứng dụng web tốt phải có phong cách và giao diện nhất quán trên các trang. Việc sử dụng các phần tử và thành phần Bootstrap có thể giúp bạn đạt được mục tiêu này.
Cộng đồng mạnh mẽ: Framework này có nhiều tài nguyên và tài liệu vững chắc và được nhiều nhà phát triển hỗ trợ.

Điều kiện tiên quyết

# 1. Node.js

Đây là thời gian chạy JavaScript mà bạn sẽ sử dụng để chạy JavaScript bên ngoài trình duyệt của mình. Bạn có thể kiểm tra phiên bản hiện tại của Node.js bằng cách chạy lệnh này;

nút -v

Bạn có thể cài đặt nó từ trang web chính thức nếu nó chưa được cài đặt.

#2. Trình quản lý gói nút (NPM)

NPM sẽ quản lý tất cả các gói liên quan bạn cần cho ứng dụng Angular của mình. NPM được cài đặt mặc định khi cài đặt Node.js. Bạn có thể kiểm tra phiên bản hiện tại bằng lệnh này;

npm -v

#3. CLI góc

Đây là công cụ dòng lệnh mà chúng ta sẽ sử dụng để tạo cấu trúc cơ bản của ứng dụng Angular. Bạn có thể cài đặt Angular CLI bằng lệnh này;

cài đặt npm -g @angular/cli

#4. Môi trường phát triển tích hợp (IDE)

Đây là nơi bạn sẽ viết mã của mình. Bạn có thể sử dụng bất kỳ IDE nào hỗ trợ JavaScript, chẳng hạn như Visual Studio Code hoặc Webstorm.

Cách thêm Bootstrap vào Angular

Bây giờ chúng tôi có tất cả các công cụ cần thiết để tạo ứng dụng Angular. Có hai cách tiếp cận chính để thêm Bootstrap vào Angular; 1. Cài đặt Bootstrap bằng NPM. 2. Sử dụng liên kết CDN

Tiếp cận 1: Sử dụng NPM

Chúng ta có thể cài đặt toàn bộ thư viện Bootstrap vào dự án của mình bằng NPM. Thực hiện theo các bước sau;

Bước chân 1: Sử dụng Angular CLI để định cấu hình cấu trúc cơ bản của ứng dụng

Một ứng dụng Angular điển hình có nhiều tệp. Chúng tôi sẽ gọi ứng dụng của mình là Angular-bootstrap-mockup (bạn có thể đặt cho ứng dụng của mình bất kỳ tên nào bạn thích). Sử dụng lệnh này để định cấu hình ứng dụng của bạn;

Mô hình khởi động góc cạnh mới

Bạn sẽ được hướng dẫn qua những câu hỏi này;

Bạn có muốn thêm định tuyến góc không? (y/N) nhập y
Bạn muốn sử dụng định dạng biểu định kiểu nào? Chọn CSS

Sau khi thiết lập hoàn tất, bạn sẽ có thứ gì đó tương tự như thế này trên thiết bị đầu cuối của mình.

Chuyển đến dự án đã tạo và bỏ qua bước này 2. Bạn có thể sử dụng lệnh này;

cd góc-bootstrap-mock

Mở dự án trong trình soạn thảo mã của bạn. Cấu trúc của dự án sẽ như sau;

Bước chân 2: cài đặt biểu tượng bootstrap và bootstrap.

Chạy lệnh này để cài đặt cả hai;

npm cài đặt biểu tượng bootstrap bootstrap

Bước chân 3: Bao gồm Bootstrap trong tệp Angular.json

Tìm tệp Angular.json trong thư mục gốc của ứng dụng của bạn và thay đổi những dòng này;

"styles": [

  "node_modules/bootstrap/scss/bootstrap.scss",

  "node_modules/bootstrap-icons/font/bootstrap-icons.css",

  "src/styles.scss"

],

"scripts": [

  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"

]

Bước chân 4: cài đặt ng-bootstrap

Ng-bootstrap là tập hợp các thành phần Angular UI được xây dựng trên khung Bootstrap. Nhiều thành phần khác nhau trong thư viện này được thiết kế để hoạt động với AngularJS.

Sử dụng lệnh này để cài đặt nó;

cài đặt npm @ng-bootstrap/ng-bootstrap

Bước chân 5: Sửa đổi tệp app.module.ts để bao gồm NgbModule.

Thay đổi nội dung của tệp app.module.ts bằng cái này;

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent,

  ],

  imports: [

    BrowserModule,

    NgbModule,

    AppRoutingModule,

  ],

  providers: [

  ],

  bootstrap: [

    AppComponent,

  ],

})

export class AppModule {

}

Bước chân 5: Sửa đổi tệp app.comComponent.ts

import { Component } from '@angular/core';

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss'],

})

export class AppComponent {

  constructor(private modalService: NgbModal) {

  }

  public open(modal: any): void {

    this.modalService.open(modal);

  }

}

Bước chân 6: Thêm các phần tử Bootstrap vào tệp app.comComponent.html

Có rất nhiều thành phần để lựa chọn trên trang web Bootstrap. Chúng ta sẽ tạo một thanh điều hướng đơn giản và thêm hai nút.

Thay đổi nội dung của app.comComponent.html như sau;

<ul class="nav">

  <li class="nav-item">

    <a class="nav-link active" aria-current="page" href="#">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Services</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">About</a>

  </li>

  <li class="nav-item">

    <a class="nav-link disabled">Blog</a>

  </li>

</ul>

<button type="button" class="btn btn-primary btn-lg">Angular</button>

<button type="button" class="btn btn-secondary btn-lg">Bootstrap</button>

Bước chân 7: Bắt đầu ứng dụng của bạn

Sử dụng lệnh này;

phục vụ

Sau khi bắt đầu phát triển Angular, bạn có thể mở http://localhost:4200/ trong trình duyệt của mình.

Tiếp cận 2: Thêm Bootstrap vào Angular bằng liên kết CDN

Cách tiếp cận này cho phép bạn kết nối trực tiếp với mạng phân phối nội dung (CDN) lưu trữ các tệp Bootstrap.

Sử dụng phương pháp này, chúng ta có thể tạo một số nút trong dự án mới. Thực hiện theo các bước sau;

Bước chân 1: Tạo một dự án góc mới

Chúng tôi sẽ gọi ứng dụng của chúng tôi là Angular-bootstrap-cdn. (Bạn có thể chọn bất kỳ tên nào).

Chạy lệnh này;

góc-bootstrap-cdn mới

Sau khi cài đặt hoàn tất, hãy thay đổi thư mục và mở dự án của bạn trong trình chỉnh sửa mã. Bạn có thể sử dụng lệnh này để vào thư mục dự án;

cd góc-bootstrap-cdn

Bước chân 2: Đặt link CDN vào file index.html

Tìm file src/index.html và link CDN ở phần head.

<head>

…….

  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

………

</head>

Bước chân 3: Thêm mã Bootstrap vào tệp app.comComponent.html

Tìm tệp src/app/app.comComponent.html.

Bạn có thể thêm mã này vào tệp;

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Bước chân 4: Bắt đầu ứng dụng của bạn

phục vụ

Các câu hỏi thường gặp

Bạn có thể sử dụng Bootstrap và Angular Material cùng nhau trong cùng một dự án không?

Đúng. Bootstrap và Angular Material là các thư viện UI được tạo cho cùng một mục đích. Tuy nhiên, bạn không nên sử dụng cả hai thư viện khi xử lý cùng một thành phần vì chúng có thể bị hỏng. Ví dụ: nếu bạn muốn tạo trang đăng nhập, hãy chọn một trong các thành phần có sẵn.

Phiên bản Bootstrap nào tương thích với Angular?

Phiên bản hiện tại của Bootstrap tại thời điểm viết bài là v5.3.0-alpha2. Mặt khác, phiên bản hiện tại của Angular là Angular 15. Tất cả đều có Bootstrap 4 tương thích với các phiên bản khác nhau của Angular. Tuy nhiên, hãy luôn kiểm tra tài liệu trên trang Bootstrap và Angular chính thức khi kết hợp hai công nghệ

Bạn có thể xây dựng loại dự án nào bằng Bootstrap và Angular?

Không có giới hạn nào về bản chất của các ứng dụng có thể được xây dựng bằng Bootstrap và Angular. Hai cái này có thể được sử dụng để xây dựng các ứng dụng một trang, trang thương mại điện tử, nền tảng xã hội, trang tổng quan và bảng quản trị. Bạn cũng có thể sử dụng Angular với khung Ionic để phát triển ứng dụng di động.

Angular là khung JavaScript hay TypeScript?

Angular là một khung JavaScript. Tuy nhiên, Angular được viết bằng TypeScript, một siêu bộ JavaScript. TypeScript giới thiệu các tính năng mới không có trong JavaScript. Bằng cách này bạn có thể sử dụng Angular với cả ứng dụng TypeScript và Angular.

Ứng dụng

Giờ đây, bạn có thể sử dụng thuận tiện hai trong số các framework giao diện người dùng phổ biến nhất là Angular và Bootstrap để xây dựng các ứng dụng khác nhau.

Cách tiếp cận bạn chọn sẽ tùy thuộc vào trường hợp sử dụng của bạn và loại ứng dụng bạn muốn xây dựng.

Mặc dù cách tiếp cận CDN có vẻ dễ dàng nhưng nó cũng có nhiều nhược điểm. Thách thức chính là tính bảo mật của ứng dụng của bạn vì tin tặc có thể sử dụng CDN để gửi các tập lệnh độc hại đến trang web của bạn.

Việc cài đặt Bootstrap bằng NPM cho phép bạn kiểm soát mã bạn đưa vào ứng dụng của mình. Tuy nhiên, cách tiếp cận này có thể tốn thời gian vì bạn cần tải xuống tất cả các phần phụ thuộc.

Hãy xem cách thêm Bootstrap vào ứng dụng React của bạn.

Mục lục

Cách thêm Bootstrap vào Angular [Step-by-Step]