Dalam artikel ini
- Apa itu Bootstrap?
- 5 Cara Memasukkan Bootstrap Dalam Proyek Angular Anda
- Kesimpulan
- Pertanyaan yang Sering Diajukan (FAQ)
- Instal Angular CLI 13 di sistem Anda untuk membuat proyek
- Instal Bootstrap 4 dalam proyek Angular Anda
- Tambahkan bootstrap di file proyek
- Langkah 1- Menginstal Angular cli 13
- Langkah pertama adalah menginstal Angular CLI 13 pada antarmuka Anda jika belum diinstal. Anda perlu menginstal Angular CLI versi terbaru di antarmuka baris perintah yang baru dan segar.
$ npm install -g @angular/cli
Anda akan menemukan beberapa pertanyaan yang perlu Anda jawab sesuai. Anda harus memilih format lembar gaya CSS yang sesuai. Ini karena kami akan menggunakan bagian Bootstrap CSS untuk disertakan dalam proyek kami.
Setelah Anda menggunakan perintah di atas, tekan Enter. Segera setelah ini, proyek Anda akan dibuat. Itu menginstal semua file dan paket yang diperlukan untuk membuat proyek Anda. Anda akan menerima pesan.
$ ng new angular-bootstrap-examples
Gunakan perintah ng serve untuk melayani aplikasi menggunakan perintah di bawah ini.
$ ng serve
Aplikasi Anda akan mulai berjalan di port 4200 dengan URL sebagai http://localhost:4200/ .
Langkah 2- Instal Bootstrap 4 di proyek Angular Anda 13
Sekarang, kami akan menambahkan Bootstrap ke proyek. Untuk ini, Anda perlu menginstal Bootstrap di proyek. Ini dapat dilakukan dengan berbagai cara. Mari kita lihat caranya.
Ada tiga metode sebagai jawaban untuk cara memasang bootstrap di Angular.
Mereka adalah sebagai berikut-
- Menggunakan npm untuk menginstal Bootstrap dengan perintah- npm install
- Menginstal file bootstrap untuk menambahkannya secara manual ke folder src/assets proyek.
- Kami menggunakan CDN untuk mendapatkan bootstrap.
Mari kita gunakan metode pertama yang kami sebutkan di atas. Buka antarmuka baris perintah Anda dan gunakan perintah- $npm install bootstrap.
Anda akan menemukan semua file bootstrap disimpan di bawah folder node_modules proyek Anda.
Langkah 3- Menambahkan Bootstrap 5 ke Angular CLI
Di bawah ini, kami memiliki lima cara lain untuk menambahkan bootstrap ke proyek Angular CLI.
Menambahkan bootstrap menggunakan angular.json
Jadi, mari kita mulai dengan metode pertama kita untuk menambahkan bootstrap melalui file angular.json. Buka file dan lakukan perintah berikut,
node_modules/bootstrap/dist/css/bootstrap.css in the projects->architect->build->styles array, node_modules/bootstrap/dist/js/bootstrap.js in the projects->architect->build->scripts array, node_modules/bootstrap/dist/js/bootstrap.js in the projects->architect->build->scripts array,
Setelah menjalankan semua kode di atas, Anda akan menemukan file bootstrap terlampir dengan proyek Angular Anda.
Menambahkan bootstrap menggunakan file index.html
Inilah cara kedua untuk melakukan tugas yang sama. Anda dapat menggunakan file index.html dengan mengeluarkan file dari file node_modules/bootstrap. Anda perlu menambahkan beberapa tag penting ke file index.html Anda. Tag adalah sebagai berikut-
- Tambahkan file bootstrap.css di bawah bagian <head> menggunakan tag <link>.
- Anda dapat menambahkan jquery menggunakan tag <script> tepat sebelum tag <body> ditutup.
- Anda dapat menambahkan file bootstrap.js di dalam tag <script> tepat sebelum tag </body>.
Menambahkan bootstrap menggunakan file style.css
Style.css adalah cara lain untuk menambahkan file CSS di dalam bootstrap proyek Angular Anda. Untuk ini, buka file style.css di bawah folder src dan impor file bootstrap.css di dalamnya.
Gunakan perintah di bawah ini untuk mengimpor file CSS bootstrap di dalamnya.
@import "~bootstrap/dist/css/bootstrap.css."
File ini menggantikan semua gaya lain yang Anda tidak perlu menambahkan file lainnya.
Menambahkan Bootstrap menggunakan ngx bootstrap atau ng bootstrap
Bekerja dengan beberapa fitur javascript bootstrap bisa jadi sulit. Ini karena membutuhkan jquery dan library lain seperti popper.js. Mengimpor semua file ini bisa sangat merepotkan, bukan? Kami memiliki solusi mudah untuk masalah ini.
Anda dapat menggunakan ngx bootstrap atau ng bootstrap langsung dengan Angular. Ini mencakup semua perpustakaan dan dependensi penting. Jadi, inilah yang perlu Anda lakukan-
Instal pustaka ng bootstrap melalui perintah npm
$ npm install @ng-bootstrap/ng-bootstrap
Setelah terinstal, impor perpustakaan di dalam modul utama proyek.
Import {NgbModule} from ‘@ng-bootstrap/ng-bootstrap’;Kemudian tambahkan modul yang diimpor ke folder modul root Anda
Anda bisa menggunakan beragam gaya agar terlihat menarik.
Untuk ngx bootstrap, langkah-langkahnya adalah sebagai berikut-
Buka terminal Anda dan gunakan perintah di bawah ini untuk menginstal ngx bootstrap di mesin Anda.
$ npm install ngx-bootstrap
Sekarang, Anda membutuhkan file CSS bootstrap. Anda bisa mendapatkannya menggunakan CDN
Atau, instal bootstrap di dalam file angular-cli.json
“styles”: [ “../node_modules/bootstrap/dist/css/bootstrap.min.css”, “styles.css” ],
Kemudian buat perubahan yang relevan di dalam file app.module.ts. Setelah menyelesaikan semua ini, Anda siap untuk pergi.
Menambahkan Bootstrap menggunakan Skema
Dengan penambahan perintah ng add di Angular, para pengembang sekarang dapat dengan mudah menambahkan bootstrap ke proyek Angular mereka tanpa mengikuti cara lama instalasi npm.
Pengembang tidak perlu lagi bergantung pada perintah npm install untuk mendapatkan semua dependensi yang diperlukan dalam proyek mereka.
Inilah alternatif untuk perintah itu. Gunakan pernyataan perintah di bawah ini untuk memasang Bootstrap ke proyek Anda-
$ ng add @ng-bootstrap/schematics
Kesimpulan
Disini kita sudah banyak membahas tentang cara install bootstrap Angular . Angular adalah platform yang paling banyak digunakan untuk membuat antarmuka pengguna interaktif. Bootstrap adalah framework frontend lain yang banyak digunakan dengan jutaan gaya dan template desain.
Kami telah menjelaskan cara signifikan untuk menambahkan bootstrap ke proyek Angular Anda. Anda dapat mengikuti salah satu dari mereka untuk memenuhi tugas Anda. Ini mudah digunakan dalam proyek Anda. Anda dapat menambahkan bootstrap ke Angular untuk mulai membangun berbagai proyek Angular. Jadi, itu saja untuk artikel ini.
Pertanyaan yang Sering Diajukan (FAQ)
1. Bagaimana cara menginstal Bootstrap di Angular?
Jwb. Ada berbagai metode untuk menginstal Bootstrap di dalam Angular. Untuk menambahkan Bootstrap ke proyek Anda, Anda harus mengunduh Bootstrap di perangkat Anda. Dan kemudian gunakan langsung di proyek Anda. Juga, bagian di atas dengan jelas menjelaskan cara memasang bootstrap di Angular.
2. Bisakah kita menggunakan Bootstrap di Angular?
Jwb. Ya, Anda dapat menggunakan Bootstrap di proyek Angular Anda. Ini adalah komponen dalam ng angular yang memulai proyek Angular secara manual. Ini memberi Anda kendali atas inisialisasi aplikasi Anda.
3. Bagaimana saya tahu jika Bootstrap diinstal?
Jwb. Untuk mengetahui apakah Bootstrap diinstal pada perangkat Anda atau tidak, cukup periksa versi yang tersedia di file. Jika tidak ada versi, maka Bootstrap belum diinstal. Akan lebih baik jika Anda mencoba menginstalnya lagi.
4. Haruskah saya menggunakan Bootstrap Ngx atau Bootstrap?
Jwb. Ngx Bootstrap memiliki satu perbedaan signifikan dari Bootstrap. Yang pertama menggunakan string untuk mempermudah. Yang terakhir menggunakan objek untuk melakukan tugas, yang bisa sedikit rumit dalam beberapa skenario.