HTML, JavaScript, dan CSS adalah beberapa pilar pengembangan front-end. Angular adalah salah satu framework JavaScript yang paling banyak digunakan untuk membangun aplikasi sisi klien. Di sisi lain, Bootstrap adalah salah satu kerangka kerja Antarmuka Pengguna (UI) paling populer.
Kerangka kerja adalah kumpulan kode, alat, dan pustaka bawaan yang menawarkan cara yang telah ditentukan sebelumnya untuk membuat aplikasi. Bootstrap dan Angular keduanya kerangka kerja.
Artikel ini akan menjelaskan setiap kerangka kerja dan membahas manfaat menggabungkan dua teknologi dan cara menggabungkannya untuk membuat aplikasi yang menarik secara visual dan kuat.
Apa itu Bootstrap?
Bootstrap adalah toolkit front-end gratis untuk membuat aplikasi mobile-first. Kerangka kerja HTML, CSS, dan JavaScript ini memiliki banyak koleksi kode yang dapat digunakan kembali yang dapat digunakan pengembang di berbagai bagian proyek mereka.
Framework ini memiliki template desain untuk berbagai fitur seperti tombol, modals, komidi putar gambar, tabel, navigasi, dan banyak lagi. Bootstrap memiliki dokumentasi yang luas untuk membuatnya mudah digunakan.
Apa itu AngularJS?
AngularJS adalah framework JavaScript yang memperluas sintaks HTML di luar bahasa markup biasa. Framework ini memperkenalkan fitur seperti pengikatan data yang memungkinkan developer menghindari proses rumit dalam membuat halaman web responsif saat menggunakan HTML.
AngularJS menggunakan kerangka kerja model-view-controller (MVC), di mana terdapat pemisahan yang jelas antara logika aplikasi dan antarmuka pengguna. Pengembang dapat menggunakan AngularJS untuk membuat aplikasi web satu halaman, aplikasi jejaring sosial, platform eCommerce, sistem manajemen konten, dan banyak lagi.
Manfaat menggunakan Bootstrap di Angular
- Komponen UI bawaan: Anda tidak perlu membuat bilah navigasi, tombol, komidi putar, dan kartu dari awal, karena Bootstrap memiliki potongan kode pra-bangun yang dapat Anda gunakan. Dengan demikian, pengembang dapat lebih fokus pada fungsionalitas sementara Bootstrap menangani struktur dan gaya dasar.
- Dapat disesuaikan: Komponen pra-bangun menyediakan kode boilerplate. Namun, Anda dapat menyesuaikan kode saat berada di aplikasi Anda. Misalnya, jika Anda mengambil kartu dari Bootstrap, Anda dapat mengubah berbagai elemen seperti gambar dan teks sesuai kebutuhan Anda.
- Responsif: Pengguna web modern menjelajah di berbagai perangkat, dari smartphone dan tablet hingga komputer. Anda tidak perlu membuat aplikasi untuk setiap ukuran layar, karena Bootstrap menyediakan aplikasi web yang responsif.
- Menghadirkan gaya yang konsisten: Aplikasi web yang baik harus memiliki nuansa dan tampilan yang konsisten di berbagai halaman. Penggunaan elemen dan komponen Bootstrap dapat membantu Anda mencapai tujuan ini.
- Komunitas yang kuat: Kerangka kerja ini dikemas dengan banyak sumber daya dan dokumentasi yang kuat serta didukung oleh banyak pengembang.
Prasyarat
#1. Node.js
Ini adalah lingkungan waktu proses JavaScript yang akan Anda gunakan untuk menjalankan kode JavaScript di luar browser. Anda dapat memeriksa versi Node.js Anda saat ini dengan menjalankan perintah ini;
simpul -v
Anda dapat menginstalnya dari situs web resmi jika belum diinstal.
#2. Manajer Paket Node (NPM)
NPM akan mengelola semua paket terkait yang Anda perlukan untuk aplikasi Angular Anda. NPM diinstal secara default saat Anda menginstal Node.js. Anda dapat memeriksa versi saat ini menggunakan perintah ini;
npm -v
#3. CLI sudut
Ini adalah alat baris perintah yang akan kita gunakan untuk membuat struktur dasar aplikasi Angular. Anda dapat menginstal Angular CLI menggunakan perintah ini;
npm install -g @angular/cli
#4. Lingkungan Pengembangan Terintegrasi (IDE)
Di sinilah Anda akan menulis kode Anda. Anda dapat menggunakan IDE apa pun yang mendukung JavaScript, seperti Visual Studio Code atau Webstorm.
Bagaimana cara menambahkan Bootstrap ke Angular
Kami sekarang memiliki semua alat yang diperlukan untuk membuat aplikasi Angular kami. Ada dua pendekatan utama untuk menambahkan Bootstrap ke Angular; 1. Menginstal Bootstrap menggunakan NPM. 2. Menggunakan tautan CDN
Pendekatan 1: Menggunakan NPM
Kami dapat menginstal seluruh pustaka Bootstrap ke proyek kami menggunakan NPM. Ikuti langkah ini;
Langkah 1: Gunakan Angular CLI untuk menyiapkan struktur aplikasi dasar
Aplikasi Angular tipikal memiliki banyak file. Kami akan menamai aplikasi kami angular-bootstrap-mockup (Anda dapat memberi aplikasi Anda nama apa pun yang Anda sukai). Gunakan perintah ini untuk menyiapkan aplikasi Anda;
ng baru angular-bootstrap-mockup
Anda akan dibawa melalui pertanyaan-pertanyaan ini;
- Apakah Anda ingin menambahkan perutean Angular? (y/T) masukkan y
- Format stylesheet mana yang ingin Anda gunakan? Pilih CSS
Setelah pengaturan selesai, Anda akan memiliki sesuatu yang mirip dengan ini di terminal Anda.
Arahkan ke proyek yang dibuat dan lanjutkan ke langkah 2. Anda dapat menggunakan perintah ini;
cd angular-bootstrap-mockup
Buka proyek di editor kode Anda. Struktur proyek akan menjadi sebagai berikut;
Langkah 2: instal ikon bootstrap dan bootstrap.
Jalankan perintah ini untuk menginstal keduanya;
npm instal bootstrap ikon bootstrap
Langkah 3: Sertakan Bootstrap pada file angular.json
Temukan file angular.json di folder root aplikasi Anda dan ubah baris ini;
"styles": [ "node_modules/bootstrap/scss/bootstrap.scss", "node_modules/bootstrap-icons/font/bootstrap-icons.css", "src/styles.scss" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ]
Langkah 4: instal ng-bootstrap
Ng-bootstrap adalah kumpulan komponen Angular UI yang dibangun di atas framework Bootstrap. Berbagai komponen di perpustakaan ini dirancang untuk bekerja dengan AngularJS.
Gunakan perintah ini untuk menginstalnya;
npm instal @ng-bootstrap/ng-bootstrap
Langkah 5: Ubah app.module.ts untuk menyertakan NgbModule.
Ubah isi file app.module.ts dengan ini;
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
NgbModule,
AppRoutingModule,
],
providers: [
],
bootstrap: [
AppComponent,
],
})
export class AppModule {
}
Langkah 5: Ubah app.component.ts
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(private modalService: NgbModal) {
}
public open(modal: any): void {
this.modalService.open(modal);
}
}
Langkah 6: Tambahkan elemen Bootstrap ke file app.component.html
Ada banyak komponen untuk dipilih di situs web Bootstrap. Kami akan membuat navbar sederhana dan menambahkan dua tombol.
Ubah isi app.component.html sebagai berikut;
<ul class="nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link disabled">Blog</a> </li> </ul> <button type="button" class="btn btn-primary btn-lg">Angular</button> <button type="button" class="btn btn-secondary btn-lg">Bootstrap</button>
Langkah 7: Jalankan aplikasi Anda
Gunakan perintah ini;
melayani
Saat pengembangan Angular berjalan, Anda dapat membuka http://localhost:4200/ di browser Anda.
Pendekatan 2: Tambahkan Bootstrap ke Angular menggunakan tautan CDN
Pendekatan ini memungkinkan Anda menautkan langsung ke Content Delivery Network (CDN) yang menyimpan file Bootstrap.
Kami dapat membuat beberapa tombol menggunakan pendekatan ini pada proyek baru. Ikuti langkah ini;
Langkah 1: Buat proyek Angular baru
Kami akan menamai aplikasi kami angular-bootstrap-cdn. (Anda dapat memilih nama apapun).
Jalankan perintah ini;
ng baru angular-bootstrap-cdn
Setelah penginstalan selesai, ubah direktori dan buka proyek Anda di editor kode. Anda dapat menggunakan perintah ini untuk masuk ke direktori proyek;
cd sudut-bootstrap-cdn
Langkah 2: Sertakan tautan CDN pada file index.html
Temukan file src/index.html dan tautan CDN di bagian head.
<head> ……. href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> ……… </head>
Langkah 3: Tambahkan kode Bootstrap ke file app.component.html
Temukan file src/app/app.component.html.
Anda dapat menambahkan kode ini ke file;
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>
Langkah 4: Jalankan aplikasi Anda
melayani
Pertanyaan yang Sering Diajukan
Bisakah Anda menggunakan Bootstrap dan Angular Material bersama-sama dalam proyek yang sama?
Ya. Bootstrap dan Angular Material adalah pustaka UI yang dibuat untuk melayani tujuan yang sama. Namun, Anda sebaiknya tidak menggunakan kedua pustaka saat menangani komponen yang sama, karena kemungkinan besar akan macet. Misalnya, jika Anda ingin membuat halaman login, pilih berdasarkan komponen yang tersedia.
Versi Bootstrap apa yang kompatibel dengan Angular?
Versi Bootstrap saat ini, saat tulisan ini dibuat, adalah v5.3.0-alpha2. Di sisi lain, versi Angular saat ini adalah Angular 15. Apapun dari Bootstrap 4 kompatibel dengan berbagai versi Angular. Namun, selalu periksa dokumentasi di situs web resmi Bootstrap dan Angular saat menggabungkan kedua teknologi tersebut
Proyek mana yang dapat Anda bangun menggunakan Bootstrap dan Angular?
Tidak ada batasan pada sifat aplikasi yang dapat Anda bangun menggunakan Bootstrap dan Angular. Anda dapat menggunakan keduanya untuk membuat aplikasi satu halaman, situs web eCommerce, platform sosial, dasbor, dan panel admin. Anda juga dapat menggunakan Angular dengan framework Ionic untuk membuat aplikasi seluler.
Apakah Angular kerangka kerja JavaScript atau TypeScript?
Angular adalah kerangka kerja JavaScript. Namun, Angular ditulis dalam TypeScript, sebuah superset dari JavaScript. TypeScript memperkenalkan fungsionalitas baru yang tidak tersedia di JavaScript. Dengan demikian Anda dapat menggunakan Angular dengan aplikasi TypeScript dan Angular.
Kesimpulan
Anda sekarang dapat dengan nyaman menggunakan dua framework front-end paling populer, Angular dan Bootstrap, untuk membuat berbagai aplikasi.
Pilihan pendekatan akan bergantung pada kasus penggunaan dan jenis aplikasi yang ingin Anda buat.
Meskipun pendekatan CDN terlihat mudah, namun juga memiliki berbagai kelemahan. Tantangan utama adalah keamanan aplikasi Anda, karena peretas dapat menggunakan CDN untuk memasukkan skrip berbahaya ke situs web Anda.
Menginstal Bootstrap menggunakan NPM memberi Anda kendali atas kode yang Anda sertakan dalam aplikasi Anda. Namun, pendekatan ini dapat memakan waktu karena Anda harus mengunduh semua dependensi.
Lihat cara menambahkan Bootstrap ke aplikasi React.
