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.js và npm và angular đượ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 ngxbootstrapNó 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-bootstrapBạ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.743sBâ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.