Cách thêm Bootstrap vào góc [Step-by-Step]
HTML, JavaScript và CSS là một trong những trụ cột của sự phát triển giao diện người dùng. Angular là một trong những khung JavaScript được sử dụng nhiều nhất để xây dựng 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.
Các khung là tập hợp của một bộ mã, công cụ và thư viện được tạo sẵn cung cấp một cách được xác định trước để xây dựng các ứng dụng. Bootstrap và Angular đều là các khung.
Bài viết này sẽ xác định từng khung và thảo luận về lợi ích 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ụ giao diện người dùng miễn phí để tạo các ứng dụng ưu tiên thiết bị di động. Khung HTML, CSS và JavaScript này có một bộ sưu tập lớn các đoạn mã có thể tái sử dụng mà các nhà phát triển có thể sử dụng trên nhiều phần khác nhau trong dự án của họ.
Khung này có các mẫu thiết kế cho các 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ó nhiều tài liệu để dễ sử dụng.
AngularJS là gì?
AngularJS là một khung JavaScript mở rộng cú pháp của 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 tạo các trang web đáp ứng phức tạp khi sử dụng HTML.
AngularJS sử dụng khung công tác mô hình-khung nhìn-bộ điều khiển (MVC), trong đó có sự tách biệt rõ ràng giữa logic của ứng dụng và giao diện người dùng. Các nhà phát triển có thể sử dụng AngularJS để tạo 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 dựng sẵn: Bạn không phải tạo thanh điều hướng, nút, băng chuyền và thẻ từ đầu vì Bootstrap có các đoạn mã dựng sẵn mà bạn có thể sử dụng. Do đó, các nhà phát triển có thể tập trung nhiều hơn vào chức năng trong khi Bootstrap đảm nhận 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ã soạn sẵn. Tuy nhiên, bạn có thể tùy chỉnh mã trong khi sử dụng ứng dụng của mình. Chẳng hạn, nếu bạn lấy một thẻ từ Bootstrap, bạn có thể thay đổi các yếu tố khác nhau, chẳng hạn như hình ảnh và văn bản cho phù hợp với nhu cầu của mình.
- Đáp ứng: Người dùng web hiện đại duyệt trên nhiều thiết bị khác nhau, từ điện thoại thông minh và máy tính bảng đến máy tính. Bạn không cần phải tạo ứng dụng cho từng kích thước màn hình vì Bootstrap cung cấp các ứng dụng web đáp ứng.
- Mang lại kiểu dáng nhất quán: Một ứng dụng web tốt phải có cảm giác và giao diện nhất quán trên các trang khác nhau. 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ẽ: Khung này được tích hợp nhiều tài nguyên và tài liệu mạnh mẽ và được hỗ trợ bởi nhiều nhà phát triển.
điều kiện tiên quyết
#1. Node.js
Đây là môi trường thời gian chạy JavaScript mà bạn sẽ sử dụng để chạy mã JavaScript bên ngoài trình duyệt. 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 mà bạn cần cho ứng dụng Angular của mình. NPM được cài đặt mặc định khi bạn 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
Nó là một 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 góc
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ủa mình. 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
Cách tiếp cận 1: Sử dụng NPM
Chúng tôi có thể cài đặt toàn bộ thư viện Bootstrap cho dự án của mình bằng NPM. Thực hiện theo các bước sau;
Bước 1: Sử dụng Angular CLI để thiết lập cấu trúc ứng dụng cơ bản
Một ứng dụng Angular điển hình có nhiều tệp. Chúng tôi sẽ đặt tên cho ứ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 muốn). Sử dụng lệnh này để thiết lập ứng dụng của bạn;
ng new angular-bootstrap-mockup
Bạn sẽ được đưa 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
Khi quá trình thiết lập kết thúc, bạn sẽ có một cái gì đó tương tự như thế này trên thiết bị đầu cuối của mình.
Điều hướng vào dự án đã tạo và chuyển sang bước 2. Bạn có thể sử dụng lệnh này;
cd góc-bootstrap-mockup
Mở dự án trong trình chỉnh sửa mã của bạn. Cấu trúc dự án sẽ như sau;
Bước 2: cài đặt bootstrap và bootstrap icon.
Chạy lệnh này để cài đặt cả hai;
npm cài đặt bootstrap bootstrap-icon
Bước 3: Bao gồm Bootstrap trên tệp angular.json
Định vị tệp angular.json trên thư mục gốc của ứng dụng của bạn và thay đổi các 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 4: cài đặt ng-bootstrap
Ng-bootstrap là tập hợp các thành phần UI góc được xây dựng trên khung Bootstrap. Các 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ó;
npm cài đặt @ng-bootstrap/ng-bootstrap
Bước 5: Sửa đổi 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 5: Sửa đổi app.component.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 6: Thêm các phần tử Bootstrap vào tệp app.component.html
Có rất nhiều thành phần để chọn trên trang web Bootstrap. Chúng tôi 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.component.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 7: Chạy ứng dụng của bạn
Sử dụng lệnh này;
phục vụ
Khi quá trình phát triển Angular chạy, bạn có thể mở http://localhost:4200/ trên trình duyệt của mình.
Cách 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 liên kết trực tiếp với Mạng phân phối nội dung (CDN) lưu trữ các tệp Bootstrap.
Chúng ta có thể tạo một số nút bằng cách sử dụng phương pháp này trên một dự án mới. Thực hiện theo các bước sau;
Bước 1: Tạo một dự án Angular mới
Chúng tôi sẽ đặt tên cho ứ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;
ng góc-bootstrap-cdn mới
Khi quá trình cài đặt kết thúc, 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 2: Đưa link CDN vào file index.html
Tìm tệp src/index.html và liên kết CDN trong phần đầu.
<head> ……. href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> ……… </head>
Bước 3: Thêm mã Bootstrap vào tệp app.component.html
Định vị tệp src/app/app.component.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 4: Chạy ứ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 ra để phục vụ 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ó khả năng bị lỗi. Chẳng hạn, nếu bạn muốn tạo một trang đăng nhập, hãy chọn dựa trên 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ính đến thời điểm viết bài này, là v5.3.0-alpha2. Mặt khác, phiên bản hiện tại của Angular là Angular 15. Mọi thứ từ Bootstrap 4 đều tương thích với các phiên bản Angular khác nhau. Tuy nhiên, hãy luôn kiểm tra tài liệu trên cả trang web chính thức của Bootstrap và Angular khi kết hợp hai công nghệ
Những dự án nào bạn có thể xây dựng bằng Bootstrap và Angular?
Không có giới hạn về bản chất của các ứng dụng bạn có thể xây dựng bằng Bootstrap và Angular. Bạn có thể sử dụng cả hai để xây dựng các ứng dụng một trang, trang web Thương mại điện tử, nền tảng xã hội, bảng điều khiển và bảng quản trị. Bạn cũng có thể sử dụng Angular với Ionic framework để tạo các ứng dụng di động.
Angular có phải là khung JavaScript hay TypeScript không?
Góc 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 chức năng mới không có trong JavaScript. Do đó, bạn có thể sử dụng Angular với cả ứng dụng TypeScript và Angular.
Phần kết luận
Giờ đây, bạn có thể thoải mái sử dụng hai trong số các khung giao diện người dùng phổ biến nhất, Angular và Bootstrap, để tạo các ứng dụng khác nhau.
Việc lựa chọn cách tiếp cận sẽ tùy thuộc vào trường hợp sử dụng và loại ứng dụng bạn muốn tạo.
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 khác nhau. 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 để đẩy các tập lệnh độc hại vào trang web của bạn.
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 phải tải xuống tất cả các phần phụ thuộc.
Kiểm tra cách thêm Bootstrap vào ứng dụng React.
