HTML, JavaScript ve CSS, ön uç geliştirmenin temel direkleri arasındadır. Angular, istemci tarafı uygulamalar oluşturmak için en çok kullanılan JavaScript çerçevelerinden biridir. Öte yandan Bootstrap, en popüler Kullanıcı Arayüzü (UI) çerçeveleri arasındadır.
Çerçeveler, uygulama oluşturmak için önceden tanımlanmış bir yol sunan önceden oluşturulmuş bir dizi kod, araç ve kitaplıktan oluşan bir koleksiyondur. Bootstrap ve Angular her ikisi de çerçevelerdir.
Bu makale, her bir çerçeveyi tanımlayacak ve iki teknolojiyi birleştirmenin faydalarını ve görsel olarak çekici ve güçlü uygulamalar oluşturmak için bunların nasıl birleştirileceğini tartışacaktır.
Bootstrap nedir?
Bootstrap, mobile öncelik veren uygulamalar oluşturmak için ücretsiz bir ön uç araç takımıdır. Bu HTML, CSS ve JavaScript çerçevesi, geliştiricilerin projelerinin çeşitli bölümlerinde kullanabilecekleri, yeniden kullanılabilir kod parçalarından oluşan büyük bir koleksiyona sahiptir.
Bu çerçeve, düğmeler, kipler, resim döngüleri, tablolar, gezinmeler ve çok daha fazlası gibi çeşitli özellikler için tasarım şablonlarına sahiptir. Bootstrap, kullanımını kolaylaştırmak için kapsamlı belgelere sahiptir.
AngularJS nedir?
AngularJS, HTML sözdizimini normal bir biçimlendirme dilinin ötesine taşıyan bir JavaScript çerçevesidir. Bu çerçeve, geliştiricilerin HTML kullanırken duyarlı web sayfaları oluşturmanın karmaşık sürecinden kaçınmasına olanak tanıyan veri bağlama gibi özellikler sunar.
AngularJS, uygulamanın mantığı ile kullanıcı arabirimi arasında net bir ayrımın olduğu model-view-controller (MVC) çerçevesini kullanır. Geliştiriciler, tek sayfalık web uygulamaları, sosyal ağ uygulamaları, e-ticaret platformları, içerik yönetim sistemleri ve daha fazlasını oluşturmak için AngularJS’yi kullanabilir.
Angular’da Bootstrap kullanmanın faydaları
- Önceden oluşturulmuş UI bileşenleri: Bootstrap kullanabileceğiniz önceden oluşturulmuş kod parçalarına sahip olduğundan, sıfırdan gezinme çubukları, düğmeler, karuseller ve kartlar oluşturmanız gerekmez. Böylece, Bootstrap temel yapı ve stil ile ilgilenirken, geliştiriciler işlevselliğe daha fazla odaklanabilir.
- Özelleştirilebilir: Önceden oluşturulmuş bileşenler standart kod sağlar. Ancak, uygulamanız sırasında kodu özelleştirebilirsiniz. Örneğin, Bootstrap’ten bir kart alırsanız, görüntü ve metin gibi çeşitli öğeleri ihtiyaçlarınıza göre değiştirebilirsiniz.
- Duyarlı: Modern web kullanıcıları, akıllı telefonlar ve tabletlerden bilgisayarlara kadar çeşitli cihazlarda gezinir. Bootstrap duyarlı web uygulamaları sağladığından, her ekran boyutu için bir uygulama oluşturmanız gerekmez.
- Tutarlı stil sağlar: İyi bir web uygulamasının farklı sayfalarda tutarlı bir hissi ve görünümü olmalıdır. Bootstrap öğelerinin ve bileşenlerinin kullanılması, bu hedefe ulaşmanıza yardımcı olabilir.
- Güçlü topluluk: Bu çerçeve, birçok kaynak ve güçlü belgelerle doludur ve birçok geliştirici tarafından desteklenmektedir.
Önkoşullar
1 numara. Node.js
Bu, JavaScript kodunu tarayıcının dışında çalıştırmak için kullanacağınız bir JavaScript çalıştırma ortamıdır. Bu komutu çalıştırarak Node.js dosyanızın güncel sürümünü kontrol edebilirsiniz;
düğüm -v
Yüklü değilse resmi web sitesinden yükleyebilirsiniz.
2 numara. Düğüm Paket Yöneticisi (NPM)
NPM, Angular uygulamanız için ihtiyacınız olan tüm ilişkili paketleri yönetecektir. Node.js’yi yüklediğinizde NPM varsayılan olarak yüklenir. Bu komutu kullanarak mevcut sürümü kontrol edebilirsiniz;
npm -v
#3. Açısal CLI
Bir Angular uygulamasının temel yapısını oluşturmak için kullanacağımız bir komut satırı aracıdır. Angular CLI’yi bu komutu kullanarak kurabilirsiniz;
npm kurulum -g @açısal/cli
#4. Entegre Geliştirme Ortamı (IDE)
Burası kodunuzu yazacağınız yer. Visual Studio Code veya Webstorm gibi JavaScript’i destekleyen herhangi bir IDE’yi kullanabilirsiniz.
Angular’a Bootstrap nasıl eklenir
Artık Angular uygulamamızı oluşturmak için gereken tüm araçlara sahibiz. Angular’a Bootstrap eklemek için iki ana yaklaşım vardır; 1. NPM kullanarak Bootstrap Kurulumu. 2. CDN bağlantılarını kullanma
Yaklaşım 1: NPM Kullanma
Bootstrap kütüphanesinin tamamını NPM kullanarak projemize kurabiliriz. Bu adımları takip et;
1. Adım: Temel uygulama yapısını ayarlamak için Angular CLI kullanın
Tipik bir Angular uygulamasının birçok dosyası vardır. Uygulamamıza angular-bootstrap-mockup adını vereceğiz (uygulamanıza sizi memnun eden herhangi bir ad verebilirsiniz). Uygulamanızı ayarlamak için bu komutu kullanın;
yeni açısal önyükleme maketi
Bu sorulardan geçeceksiniz;
- Açısal yönlendirme eklemek ister misiniz? (e/h) y’yi girin
- Hangi stil sayfası formatını kullanmak istersiniz? CSS’yi seçin
Kurulum bittiğinde, terminalinizde buna benzer bir şeye sahip olacaksınız.
Oluşturulan projeye gidin ve 2. adıma geçin. Bu komutu kullanabilirsiniz;
cd açısal önyükleme modeli
Projeyi kod düzenleyicinizde açın. Proje yapısı aşağıdaki gibi olacaktır;
Adım 2: önyükleme ve önyükleme simgelerini yükleyin.
Her ikisini de yüklemek için bu komutu çalıştırın;
npm önyükleme önyükleme simgeleri yükleme
3. Adım: Angular.json dosyasına Bootstrap ekleyin
Uygulamanızın kök klasöründe angular.json dosyasını bulun ve bu satırları değiştirin;
"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" ]
4. Adım: ng-bootstrap’ı kurun
Ng-bootstrap, Bootstrap çerçevesinin üzerine inşa edilmiş bir Angular UI bileşenleri koleksiyonudur. Bu kitaplıktaki farklı bileşenler, AngularJS ile çalışacak şekilde tasarlanmıştır.
Yüklemek için bu komutu kullanın;
npm install @ng-bootstrap/ng-bootstrap
Adım 5: app.module.ts dosyasını NgbModule’u içerecek şekilde değiştirin.
app.module.ts dosyasının içeriğini bununla değiştirin;
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 {
}
5. Adım: app.component.ts’yi değiştirin
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);
}
}
6. Adım: app.component.html dosyasına Bootstrap öğeleri ekleyin
Bootstrap web sitesinde seçebileceğiniz tonlarca bileşen vardır. Basit bir navbar oluşturacağız ve iki buton ekleyeceğiz.
app.component.html içeriğini aşağıdaki gibi değiştirin;
<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>
7. Adım: Uygulamanızı çalıştırın
Bu komutu kullanın;
hizmet etmek
Angular geliştirme çalıştığında tarayıcınızda http://localhost:4200/ açabilirsiniz.
Yaklaşım 2: CDN bağlantılarını kullanarak Angular’a Bootstrap ekleyin
Bu yaklaşım, doğrudan Bootstrap dosyalarını depolayan İçerik Dağıtım Ağı’na (CDN) bağlanmanıza olanak tanır.
Yeni bir projede bu yaklaşımı kullanarak birkaç düğme oluşturabiliriz. Bu adımları takip et;
1. Adım: Yeni bir Açısal proje oluşturun
Uygulamamıza angular-bootstrap-cdn adını vereceğiz. (Herhangi bir isim seçebilirsiniz).
Bu komutu çalıştırın;
yeni angular-bootstrap-cdn
Kurulum bittiğinde dizini değiştirin ve projenizi bir kod düzenleyicide açın. Proje dizinine girmek için bu komutu kullanabilirsiniz;
cd açısal önyükleme cdn
2. Adım: index.html dosyasına CDN bağlantısını ekleyin
Baş bölümünde src/index.html dosyasını ve CDN bağlantısını bulun.
<head> ……. href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> ……… </head>
3. Adım: app.component.html dosyasına Bootstrap kodu ekleyin
src/app/app.component.html dosyasını bulun.
Bu kodu dosyaya ekleyebilirsiniz;
<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>
4. Adım: Uygulamanızı çalıştırın
hizmet etmek
Sıkça Sorulan Sorular
Bootstrap ve Angular Material’ı aynı projede birlikte kullanabilir misiniz?
Evet. Bootstrap ve Angular Material, aynı amaca hizmet etmek için oluşturulmuş UI kitaplıklarıdır. Ancak, aynı bileşenle uğraşırken her iki kitaplığı da kullanmamalısınız çünkü çökme olasılığı yüksektir. Örneğin, bir oturum açma sayfası oluşturmak istiyorsanız, mevcut bileşenlere göre birini seçin.
Bootstrap’in hangi sürümü Angular ile uyumludur?
Bu yazı itibariyle Bootstrap’in geçerli sürümü v5.3.0-alpha2’dir. Öte yandan, Angular’ın şu anki sürümü Angular 15’tir. Bootstrap 4’ten gelen her şey, çeşitli Angular sürümleriyle uyumludur. Ancak, iki teknolojiyi birleştirirken her zaman hem Bootstrap hem de Angular resmi web sitelerindeki belgeleri kontrol edin.
Bootstrap ve Angular kullanarak hangi projeleri oluşturabilirsiniz?
Bootstrap ve Angular kullanarak oluşturabileceğiniz uygulamaların doğasıyla ilgili herhangi bir sınırlama yoktur. İkisini tek sayfalık uygulamalar, e-Ticaret web siteleri, sosyal platformlar, panolar ve yönetici panelleri oluşturmak için kullanabilirsiniz. Mobil uygulamalar oluşturmak için Angular’ı Ionic çerçevesiyle de kullanabilirsiniz.
Angular bir JavaScript veya TypeScript çerçevesi midir?
Angular bir JavaScript çerçevesidir. Ancak Angular, JavaScript’in bir üst kümesi olan TypeScript’te yazılmıştır. TypeScript, JavaScript’te bulunmayan yeni işlevler sunar. Böylece Angular’ı hem TypeScript hem de Angular uygulamalarıyla kullanabilirsiniz.
Çözüm
Artık çeşitli uygulamalar oluşturmak için en popüler ön uç çerçevelerden ikisi olan Angular ve Bootstrap’i rahatça kullanabilirsiniz.
Yaklaşım seçimi, kullanım durumuna ve oluşturmak istediğiniz uygulamanın türüne bağlı olacaktır.
CDN yaklaşımı kolay görünse de çeşitli olumsuzluklara da sahiptir. Bilgisayar korsanları kötü amaçlı komut dosyalarını web sitenize göndermek için CDN’leri kullanabileceğinden, en büyük zorluk uygulamanızın güvenliğidir.
Bootstrap’i NPM kullanarak yüklemek, uygulamanıza eklediğiniz kod üzerinde kontrol sahibi olmanızı sağlar. Ancak, tüm bağımlılıkları indirmeniz gerektiğinden bu yaklaşım zaman alıcı olabilir.
Bir React uygulamasına nasıl Bootstrap ekleneceğini kontrol edin.
