Cách đưa Bootstrap vào AngularJS bằng ng-bootstrap

Chí Vỹ

AngularJS có thể được tích hợp với Bootstrap CSS và Javascript. Ngoài ra, bạn có thể dùng AngularJS để tạo biểu mẫu sáng tạo, bảng biểu, thanh điều hướng…

Kết hợp Bootstrap với AngularJS

Hướng dẫn đưa Bootstrap vào trong AngularJS

1. Đảm bảo Angular CLI nằm trong hệ thống nếu không, hãy chạy lệnh sau trong terminal để làm việc đó.

npm install -g @angular/cli

2. Tạo một dự án mới trên Visual Studio Code bằng cách chạy code ng new project-name.

3. Sau khi tạo dự án mới, mở dự án đó trên Visual Studio và terminal của nó. Đảm bảo đường dẫn này nằm trong thư mục của dự án vừa mới tạo. Tiếp theo, chạy lệnh sau:

npm install bootstrap@4.0.0-alpha.6 --save
npm install --save @ng-bootstrap/ng-bootstrap
npm install jquery --save

4. Nhập NgbModule trong app.module.ts bằng cách dùng import { NgbModule } from ‘@ng-bootstrap/ng-bootstrap’; đồng thời, bao gồm nó trong danh sách imports:

imports: [
BrowserModule,
NgbModule.forRoot()
],

5. Bổ sung thêm code sau vào trong angular.json/angular-cli.json, có sẵn ở code Visual Studio.

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

6. Có hai kiểu [] và scripts[] trong angular.js, vì thế, chúng ta chỉ thêm phần này vào phần đầu tiên. Ngoài ra, đảm bảo “./node_modules/bootstrap/dist/css/bootstrap.min.css” được viết trên “src/styles.css”, không cần bao gồm file .js bởi các lệnh gốc của Angular dựa trên mã đánh dấu (markup) của Bootstrap và CSS chứ không phải trên javascript của jQuery hoặc Bootstraps.

Index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<title>
Include Bootstrap in AngularJS
</title>

<base href="/">

<meta name="viewport"
content="width=device-width, initial-scale=1">

<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
<app-root>
loading...
</app-root>
</body>

</html>

Code này chỉ hiển thị “loading…” trước khi app.component.html thực sự được tải.

app.component.html

<!DOCTYPE html>
<html>

<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
</script>

<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
</script>

<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js">
</script>
</head>

<body>
<div class="container">
<ngb-tabset>
<ngb-tab title="Welcome">
<ng-template ngbTabContent>
Welcome to GeeksforGeeks
</ng-template>
</ngb-tab>

<ngb-tab>
<ng-template ngbTabTitle>
Learn <b>Angular</b>
</ng-template>

<ng-template ngbTabContent>
Refer various Angular articles available
in GeeksforGeeks.
</ng-template>
</ngb-tab>

<ngb-tab title="Edit" [disabled]="true">
<ng-template ngbTabContent>
<p>
Make various changes in the
code and explore
</p>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
</body>

Kết quả:

1. Chọn tab Welcome:

Tab Welcome