Bagaimana cara Memasang Bootstrap di Angular? 4 Cara Terbaik

Dalam artikel ini

Apa itu Bootstrap?
5 Cara Memasukkan Bootstrap Dalam Proyek Angular Anda
Kesimpulan
Pertanyaan yang Sering Diajukan (FAQ)

Apa itu Bootstrap?

Bootstrap adalah framework front-end open-source untuk membangun dan mendesain berbagai halaman web yang responsif. Ini mencakup beberapa templat berbasis CSS dan JavaScript, kisi responsif, komponen bawaan, formulir, tombol, alat navigasi, korsel, dan antarmuka lainnya.

Angular adalah aplikasi web populer, kerangka kerja sumber terbuka berbasis TypeScript. Angular adalah bahasa platform-independen yang digunakan pada berbagai sistem seperti desktop, seluler, web laptop, dll.

Selain itu, Angular memiliki fitur yang tak terhitung jumlahnya seperti kinerja tinggi, kecepatan, kerangka kerja bawaan, dan komponen. Bootstrap juga kompatibel dengan framework JavaScript, Angular, dan React. Selain itu, ia memiliki beberapa alat pengembangan berguna yang membantu pengembang membuat halaman web dengan desain dan templat kreatif. Anda dapat memilih templat yang disukai dan menyesuaikannya secara manual dengan menambahkan berbagai komponen.

Dengan bootstrap, Anda harus terbiasa dengan HTML, CSS, dan JavaScript untuk memilih template dan desain terbaik. Menambahkan fungsionalitas ekstra di luar desain yang ada adalah tugas yang mudah. Yang perlu Anda lakukan hanyalah menulis kode, memeriksa desainnya, menulis lebih banyak kode, dan Anda siap melakukannya. Kedengarannya cukup menarik, bukan? Dia. Ikuti kursus terbaik untuk mempelajari Angular dan temukan kursus yang relevan sesuai minat Anda.

5 Cara Memasukkan Bootstrap 4 Dalam Proyek Angular Anda

Di sini, kita akan belajar cara memasang bootstrap di Angular. Bootstrap membantu Anda mengatur gaya aplikasi Anda dalam sejuta tema berbeda. Anda dapat menambahkan Bootstrap ke proyek Angular Anda dalam beberapa cara untuk membuat proyek Anda lebih menarik dan mengasyikkan secara bersamaan. Kunjungi kursus pelatihan pengembangan web dan pelajari pengembangan dari awal.

Di sini, kita akan menggunakan Angular CLI 13 untuk membuat proyek dari awal. Prosesnya melibatkan langkah-langkah berikut. Mari kita daftar dulu.

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.

Jalankan perintah di bawah ini untuk menginstalnya-

$ 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.

Sekarang, Anda harus masuk ke folder root. Anda dapat melakukan ini menggunakan perintah berikut.

$ 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.

Wallpoin

Cari Blog Ini