Tôi đang bắt đầu ứng dụng Angular đầu tiên của mình và thiết lập cơ bản của tôi đã hoàn tất.
Làm cách nào để thêm Bootstrap vào ứng dụng của tôi?
Nếu bạn có thể cung cấp một ví dụ thì nó sẽ là một trợ giúp tuyệt vời.
Tôi đang bắt đầu ứng dụng Angular đầu tiên của mình và thiết lập cơ bản của tôi đã hoàn tất.
Làm cách nào để thêm Bootstrap vào ứng dụng của tôi?
Nếu bạn có thể cung cấp một ví dụ thì nó sẽ là một trợ giúp tuyệt vời.
Câu trả lời:
Với điều kiện bạn sử dụng Angular-CLI để tạo các dự án mới, có một cách khác để bootstrap có thể truy cập được trong Angular 2/4 .
$ npm install --save bootstrap. Các --savetùy chọn sẽ làm cho bootstrap xuất hiện trong các phụ thuộc."styles"mảng. Tham chiếu phải là đường dẫn tương đối đến tệp bootstrap được tải xuống với npm. Trong trường hợp của tôi, đó là:"../node_modules/bootstrap/dist/css/bootstrap.min.css",Ví dụ của tôi .angular-cli.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "bootstrap-test"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}Bây giờ bootstrap nên là một phần của cài đặt mặc định của bạn.
Một tích hợp với Angular2 cũng có sẵn thông qua dự án ng2-bootstrap : https://github.com/valor-software/ng2-bootstrap .
Để cài đặt, chỉ cần đặt các tệp này vào trang HTML chính của bạn:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">Sau đó, bạn có thể sử dụng nó vào các thành phần của bạn theo cách này:
import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'my-app',
directives: [Alert],
template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}Tất cả những gì bạn cần làm là bao gồm css boostrap trong tệp index.html của bạn.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">app.component.html. xin vui lòng cho biết.
Một cách khác rất tốt (tốt hơn?) Là sử dụng một bộ widget được tạo bởi nhóm angular-ui: https://ng-bootstrap.github.io
Nếu bạn có kế hoạch sử dụng Bootstrap 4 được yêu cầu với ng-bootstrap của nhóm góc cạnh được đề cập trong luồng này, bạn sẽ muốn sử dụng cái này thay thế (LƯU Ý: bạn không cần bao gồm tệp JS):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">Bạn cũng có thể tham chiếu địa phương này sau khi chạy npm install bootstrap@4.0.0-alpha.6 --savebằng cách chỉ vào tệp trong styles.scsstệp của mình , giả sử bạn đang sử dụng SASS:
@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';@importnó vào tệp SASS của bạn. Nếu không, bạn có thể thử thêm nó vào vendor.tstệp của mình , nhưng tôi không sử dụng nó trong mã của mình.
Tùy chọn phổ biến nhất là sử dụng một số thư viện bên thứ ba được phân phối dưới dạng gói npm như dự án ng2-bootstrap https://github.com/valor-software/ng2-bootstrap hoặc thư viện Bootstrap Angular UI.
Cá nhân tôi sử dụng ng2-bootstrap. Có nhiều cách để cấu hình nó, bởi vì cấu hình phụ thuộc vào cách xây dựng dự án Angular của bạn. Bên dưới tôi đăng cấu hình ví dụ dựa trên dự án QuickStart của Angular 2 https://github.com/angular/quickstart
Đầu tiên, chúng tôi thêm các phụ thuộc trong gói.json của chúng tôi
{ ...
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
...
"bootstrap": "^3.3.7",
"ng2-bootstrap": "1.1.16-11"
},
... }Sau đó, chúng ta phải ánh xạ tên tới URL thích hợp trong systemjs.config.js
(function (global) {
System.config({
...
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
//bootstrap
'moment': 'npm:moment/bundles/moment.umd.js',
'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
...
});
})(this);Chúng tôi phải nhập tệp bootstrap .css trong index.html. Chúng tôi có thể lấy nó từ thư mục / node_modules / bootstrap trên ổ cứng của chúng tôi (vì chúng tôi đã thêm phụ thuộc bootstrap 3.3.7) hoặc từ web. Ở đó chúng tôi đang lấy nó từ web:
<!DOCTYPE html>
<html>
<head>
...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>Chúng ta nên chỉnh sửa tệp app.module.ts từ thư mục / app
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
//bootstrap alert import part 2
imports: [ BrowserModule, AlertModule.forRoot() ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }Và cuối cùng là tệp app.component.ts của chúng tôi từ thư mục / app
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<alert type="success">
Well done!
</alert>
`
})
export class AppComponent {
constructor() { }
}Sau đó, chúng tôi phải cài đặt các phụ thuộc bootstrap và ng2-bootstrap trước khi chúng tôi chạy ứng dụng của mình. Chúng ta nên đi đến thư mục dự án của chúng tôi và loại
npm installCuối cùng, chúng tôi có thể bắt đầu ứng dụng của chúng tôi
npm startCó nhiều mẫu mã trên github của dự án ng2-bootstrap cho thấy cách nhập ng2-bootstrap vào các bản dựng dự án Angular 2 khác nhau. Thậm chí còn có mẫu plnkr. Ngoài ra còn có tài liệu API trên trang web Valor-software (tác giả của thư viện).
Trong môi trường góc cạnh, cách đơn giản nhất mà tôi tìm thấy là như sau:
1. Giải pháp trong môi trường có biểu định kiểu s̲c̲s̲s̲
npm install bootstrap-sass —saveTrong style.scss:
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';Lưu ý1: Ký ~tự là một tham chiếu đến thư mục bits_modules .
Lưu ý2: Khi chúng tôi đang sử dụng scss, chúng tôi có thể tùy chỉnh tất cả các biến boostrap chúng tôi muốn.
2. Giải pháp trong môi trường có biểu định kiểu c̲s̲s̲
npm install bootstrap —saveTrong style.css:
@import '~bootstrap/dist/css/bootstrap.css';Có một số cách để định cấu hình angular2 với Bootstrap, một trong những cách đầy đủ nhất để sử dụng ng-bootstrap, sử dụng cấu hình này, chúng tôi cung cấp cho algular2 quyền kiểm soát hoàn toàn đối với DOM của chúng tôi, tránh việc phải sử dụng JQuery và Boostrap .js.
1-Lấy làm điểm khởi đầu một dự án mới được tạo bằng Angular-CLI và sử dụng dòng lệnh, cài đặt ng-bootstrap:
npm install @ng-bootstrap/ng-bootstrap --saveLưu ý: Thông tin thêm tại https://ng-bootstrap.github.io/#/getting-started
2-Sau đó, chúng ta cần cài đặt bootstrap cho css và hệ thống lưới.
npm install bootstrap@4.0.0-beta.2 --saveLưu ý: Thông tin thêm tại https://getbootstrap.com/docs/4.0/getting-started/doad/
Bây giờ chúng ta đã thiết lập môi trường và vì thế chúng ta phải thay đổi .angular-cli.json thêm vào kiểu:
"../node_modules/bootstrap/dist/css/bootstrap.min.css"Đây là một ví dụ:
"apps": [
{
"root": "src",
...
],
"index": "index.html",
...
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
]Bước tiếp theo là thêm mô-đun ng-boostrap vào dự án của chúng tôi, để làm như vậy, chúng tôi cần thêm vào app.module.ts:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';Sau đó thêm mô-đun mới vào ứng dụng ứng dụng: NgbModule.forRoot ()
Thí dụ:
@NgModule({
declarations: [
AppComponent,
AppNavbarComponent
],
imports: [
BrowserModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})Bây giờ chúng ta có thể bắt đầu sử dụng bootstrap4 trong dự án angular2 / 5 của mình.
Tôi đã có cùng một câu hỏi và tìm thấy bài viết này với một giải pháp thực sự sạch sẽ:
http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/
Dưới đây là hướng dẫn, nhưng với giải pháp đơn giản hóa của tôi:
Cài đặt Bootstrap 4 ( hướng dẫn ):
npm install --save bootstrap@4.0.0-alpha.6Nếu cần, đổi tên src / style.css của bạn thành style.scss và cập nhật .angular-cli.json để phản ánh sự thay đổi:
"styles": [
"styles.scss"
],Sau đó thêm dòng này vào style.scss :
@import '~bootstrap/scss/bootstrap';chỉ cần kiểm tra tệp pack.json của bạn và thêm các phụ thuộc cho bootstrap
"dependencies": {
"bootstrap": "^3.3.7",
}sau đó thêm mã dưới đây vào .angular-cli.jsontập tin
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],Cuối cùng, bạn chỉ cần cập nhật npm cục bộ bằng cách sử dụng thiết bị đầu cuối
$ npm updateQuy trình với Angular 6+ & Bootstrap 4+:
npm install --save bootstrap@4.1.3npm install --save jquery 1.9.1npm audit fix@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";HOẶC LÀ
Thêm dòng này vào tệp index.html chính của bạn: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Tôi đã tìm kiếm câu trả lời tương tự và cuối cùng tôi đã tìm thấy liên kết này. Bạn có thể tìm thấy giải thích ba cách khác nhau để thêm bootstrap css vào dự án góc 2 của bạn. Nó đã giúp đỡ tôi.
Đây là liên kết: http://codingthesmartway.com/USE-bootstrap-with-angular/
Đề nghị của tôi sẽ là thay vì khai báo nó trong bút stylus để đặt nó vào scss để mọi thứ được biên dịch và ở một nơi.
1) cài đặt bootstrap với npm
npm install bootstrap2) Khai báo bootstrap npm trong css với các kiểu của chúng tôi
Tạo _bootstrap-custom.scss:
// Required
@import "bootstrap-custom-required";
// Optional
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
...
..
.3) Trong các style.scss chúng tôi chèn
@import "bootstrap-custom";vì vậy chúng tôi sẽ có tất cả cốt lõi của chúng tôi được biên dịch và ở một nơi
Bạn có thể thử sử dụng thư viện UI Prettyfox http://ng.prettyfox.org
Thư viện này sử dụng bootstrap 4 kiểu và không cần jquery.
Nếu bạn sử dụng cli góc, sau khi thêm bootstrap vào pack.json và cài đặt gói, tất cả những gì bạn cần là thêm boostrap.min.css vào phần "style" của .angular-cli.json.
Một điều quan trọng là "Khi bạn thực hiện thay đổi cho .angular-cli.json, bạn sẽ cần khởi động lại ng phục vụ để nhận các thay đổi cấu hình."
Tham chiếu:
https://github.com/angular/angular-cli/wiki/stories-include-bootstrap
Một cách khác rất tốt là sử dụng bộ xương Angular 2/4 + Bootstrap 4
1) Tải xuống ZIP và giải nén thư mục zip
2) ng phục vụ