Ngx-Bootstrap - Thiết lập môi trường

Trong chương này, bạn sẽ tìm hiểu chi tiết về cách thiết lập môi trường làm việc của ngx-bootstrap trên máy tính cục bộ của bạn. Vì ngx-bootstrap chủ yếu dành cho các dự án góc cạnh, hãy đảm bảo rằng bạn cóNode.jsnpmangular được cài đặt trên hệ thống của bạn.

Tạo một dự án góc cạnh

Đầu tiên, hãy tạo một dự án góc cạnh để kiểm tra các thành phần ngx-bootstrap bằng các lệnh sau.

ng new ngxbootstrap

Nó sẽ tạo một dự án góc có tên ngxbootstrap.

Thêm ngx-bootstrap làm phụ thuộc

Bạn có thể sử dụng lệnh sau để cài đặt ngx-bootstrap trong dự án mới tạo

npm install ngx-bootstrap

Bạn có thể quan sát kết quả sau khi ngx-bootstrap được cài đặt thành công:

+ [email protected]
added 1 package from 1 contributor and audited 1454 packages in 16.743s

Bây giờ, để kiểm tra xem bootstrap có hoạt động tốt với Node.js hay không, hãy tạo thành phần thử nghiệm bằng lệnh sau:

ng g component test
CREATE src/app/test/test.component.html (19 bytes)
CREATE src/app/test/test.component.spec.ts (614 bytes)
CREATE src/app/test/test.component.ts (267 bytes)
CREATE src/app/test/test.component.css (0 bytes)
UPDATE src/app/app.module.ts (388 bytes)

Xóa nội dung của app.component.html và cập nhật nội dung sau.

app.component.html

<app-test></app-test>

Cập nhật nội dung của app.module.ts để bao gồm mô-đun accordion ngx-bootstrap. Chúng tôi sẽ thêm mô-đun khác trong các chương tiếp theo. Cập nhật nội dung sau.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion'
@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Cập nhật nội dung của index.html để bao gồm bootstrap.css. Cập nhật nội dung sau.

index.html

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Ngxbootstrap</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

Trong chương tiếp theo, chúng tôi sẽ cập nhật thành phần thử nghiệm để sử dụng các thành phần ngx-bootstrap.