Bootstrap ve AngularJS, birlikte pek çok projede keyifle kullanılıp, güzel işler çıkarılmakta. Her ikisi de CSS ve Javascript’ te frontend çalışma mantıklarını değiştirdi. Lakin ikisini bir arada kullanırken karşımıza ufak bir problem çıkıyor. Problemin adı JQUERY!

Bilindiği üzere Bootstrap’ in Javascript componentleri Jquery kütüphanesi üzerine yazılmış durumda. Bu da şu demek oluyor;Bootstrap’ in Javascript componentlerini kullanmak için projenize, AngularJS’ in yanısıra Jquery’ i de dahil etmeniz gerekiyor. Bu zorunluluk asla kabul edilemez.
Neden ?

Çünkü AngularJS dahili olarak jQlite‘ e sahip ve jQlite’ te bahsi geçen Bootstrap componentlerinin gereksinim duyduğu metodları karşılıyor. Kafanız karışmış olabilir. Şöyle örnek vererek anlatayım;

Bootstrap.js dosyasında componentler için yazılmış bir seçiçi şu şekilde tanımlanmıştır: $(‘.ornekClass’)
Bu seçim Jquery ile yapılmış, halbuki jquery yerine AngularJS’ te dahili bulunan jQlite sayesinde, angular bu elementi şu şekilde seçebilir angular.element(‘ornekClass’);
İşte burda asıl anlatmak istediğimiz konu şudur; Bootstrap’ in Javascript componentlerini Angular projemizde kullanmak için illa Jquery kütüphanesini dahil etmek zorunda olmamalıyız, buna bir çözüm bulunmuş olmalı.
Evet bulundu adı UI-Bootstrap 🙂

UI-Bootstrap hakkında detaylı bilgiye geçmeden önce, neden AngularJS projemizde Jquery kullanmamalıyız sorusuna cevap vermek istiyorum.
Çünkü ?

– AngularJS ve Jquery’ nin çalışma mantıkları birbirlerine tamamen zıttır. Örneğin bir element’ e bir duruma göre class ekleme çıkarma işlemi yaparken; Jquery’ i eventleri dinler ve event’ e göre class ekler, AngularJs ise değişkenleri dinler, event sonucunda bir değişken set edilmiştir ve o değişkenin değerine göre elemente class eklenir. Bu aşırı basit ve sığ örnek umarım daha karmaşık farkları düşünmenize yardımcı olacaktır. Kısaca abiyane tabirle 1 ipte 2 cambaz yürüyemez. Sadece birinin borusu öteceğinden, AngularJS’ i seçiyoruz.

 

Ve Karşınızda UI-Bootstrap:

https://angular-ui.github.io/bootstrap/ adresinde adeta show yapan bir projedir 🙂 Süperdir, iddaa ediyorum, beni bir kere dahi üzmedi.

Nedirrrrrr ?

Anasayfasında yazan şu cümle zaten herşeyi anlatıyor “Bootstrap components written in pure AngularJS by the AngularUI Team”
Yani : Bootstrap componentlerini pure AngularJS ile yazmışlar, artık bunu projenize dahil ettiğinizde Jquery’ e ihtiyacınız kalmıyor. Çünkü “pure AngularJS” demişler ya, bu bizim yukarıda bahsettiğimiz jQlite’ in yardımı ile oluyor.

Kafanız rahat, projeye sadece AngularJS, Bootstrap CSS ve UI-Bootstrap JS dosyasını ekliyoruz, ve Sorunsuz bir şekilde Angular + Bootstrap kullanabiliyoruz.

 

Kullanıyoruz deyip konuyu bitirmiyorum tabiki, hemen aşağıda projeye eklenişini ve örneklerini yapıyorum.

Dahil Edilişi;

  • Projenize Angular.js ve Bootstrap.css dosyalarının dahil edildiğini varsayıyorum
  • https://angular-ui.github.io/bootstrap/ adresini girip Download butonuna tıklayın
  • Burada kritik nokta şu: Template’ ler dahil olacak mı olmayacak mı ? Size tavsiyem dahil seçeneği aktif kalsın, dahil olmasın derseniz neler yapmanız gerekiyor ve ne tür durumlarda dahil olmasın denmelidir aşağıda anlatıcam
  • Download butonuna basın, bir javascript dosyası inecek, bu dosyayı projenize dahil edin. Hepsi bu kadar.

Kullanılışı;

  • Ana modülünüze yeni bir modül olarak ‘ui.bootstrap’ ekliyoruz. Örneğin: angular.module(‘uygulamam’, [‘ui.bootstrap’]);
  • Ve artık Bootstrap’ in carousel’ inin örnek kodunu paylaşıyorum.

 

Yukarıdaki pencerenin Code tabından, HTML ve Javascript kodlarına bakıp fikir edinebilirsiniz.

 

Template’ ler dahil olsun mu ?

UI-Bootstrap’ i indirirken karşınıza bu seçenek çıktı, olay nedir ?

Olay şudur:  UI-Bootstrap, Bootstrap componentlerini kullanabilmeniz için directive’ ler sunuyor, tabi bu directive’ ler de arkada HTML parçacıkları barındırıyor, işte bu HTML parçacıklarını, UI-Bootstrap’ in JS dosyasına mı gömsün yoksa gömmesinde https://github.com/angular-ui/bootstrap/tree/master/template adresinden indirip sizmi projenize dahil edeceksiniz bunu soruyor. Eğerki HTML dosyalarında oynama yapmayacaksanız, dahili gelsin daha iyi.

Umarım açıklayıcı bir anlatım olmuştur, görüşmek üzere 🙂

Leave A Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir