Ağu.20

AngularJS (1.3 / 1.5) Eğitimi: AngularJS ile Bootstrap Kullanımı

Şüphesiz ki modern bir web sayfası tasarlıyorsanız aynı anda hem Bootstrap hem de AngularJS kullanıyor olacaksınız. Kitap boyunca da asıl hedeflediğim mantık buydu. Bu nedenle basit bir örnekle AngularJS içinde Bootstrap’ı nasıl kullanabileceğinizi örnek üzerinde görelim.

Örneğimizde Bootstrap ile bir tablo oluşturup, içinde veri yazdıralım… Somut olarak bir video listesi yapıp, videonun resmini, açıklamasını, kaç adet izlendiğini ve izleme sayfasına gitmek için linkini oluşturup bağlantısını tanımlayacağız.

Örneğimiz yaparken ufaktan MVW mantığına giriş yapalım. Kodlarımızı HTML5 sayfası içine gömmek yerine ayrı ayrı yazalım.

Hazırlayacağımız yapıda VIEW için video-listesi.html, VIEWCONTROL için de yapilandirici.js ve video-veri.js dosyalarını hazırlayacağız. yapilandirici.js dosyası sadece ng-app tanımlamasını yapacaktır. video-veri.js dosyasında ise liste adında bir Controller tanımlayıp, bu Controller içinde de $scope erişimi ile video adında bir Object oluşturup içinde 2 adet nesne tanımlayacağız. Nesne içinde izlenme, adres, detay ve resim değerlerini tanımlayacağız. Hazırladığımız Controller’ı da Bootstrap ile responsive olarak oluşturacağımız tablonun kök div’ine bind edeceğiz.

HTML5 dosyası içinde Framework’ler eklendikten sonra script etiketleri ile yapilandirici.js ve video-veri.js dosyalarının da sayfa içine yüklendiğine dikkat edin.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- BOOTSTRAP -->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <!-- ANGULARJS -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="yapilandirici.js"></script>
  <script src="video-veri.js"></script> 
</head>
<body ng-app="videolar" >
  <div ng-controller="liste">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-4"  >
          <table class="table table-hover">
            <tr>
              <th>Video</th>
              <th>Açıklama</th>
              <th>İzlenme</th>
              <th></th>
            </tr>
            <tr ng-repeat="x in video">
              <td><img src='{{x.resim}}' width='240px' height='180px' /></td>
              <td>{{x.detay}}</td>
              <td><span class="badge">{{x.izlenme}}</span></td>
              <td><a href="{{x.adres}}">izle</a></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

yapilandirici.js

var videolar = angular.module('videolar', []);

video-veri.js

videolar.controller("liste", function($scope) {
    $scope.video = [{
        "resim": "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-14410.jpg",
        "detay": "Berserk (ベルセルク Beruseruku?), mangaka Kentaro Miura tarafından çizilen karanlık bir fantezi manga serisidir. 30 milyonun üzerinde satış elde eden Berserk şimdiye kadarki en başarılı seinen manga serisidir. Berserk 'in zaman ve mekanı, ortaçağ Avrupa'sından esinlenilerek oluşturulmuştur. Hikaye, öksüz, paralı asker Guts'ın hayatı ve Şahin Takımı (鷹の団 Taka no Dan?) adlı paralı asker grubunun lideri Griffith ile olan ilişkisi etrafında döner. Hem animede hem de mangada dikkate değer bir şiddet söz konusudur.",
        "izlenme": "551",
        "adres": "https://www.youtube.com/watch?v=Qacgb2b8LVU"
     }, {
        "resim": "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-209509.jpg",
        "detay": "Fairy Tail (フェアリーテイル Fearī Teiru?) Hiro Mashima tarafından yazılan bir Japon manga serisidir. 23 Ağustos 2006 yılından bu yana Kodansha'nın Haftalık Shõnen dergisinde yayınlanmaktadır. Kodansha tarafından ciltlerinden (Jap. tankōbon) ilki 2 Ağustos 2006 tarihinde yayınlanmışken, seri 15 Mayıs 2015 tarihi itibariyle 49 cilde ulaşmıştır. Bu ciltler daha sonrasında A-1 Pictures ve Satelight tarafından anime serisine dönüştürülmüş ve 12 Ekim 2009 tarihinde Japonya'da piyasaya sürülmüştür. Bu anime serisi 30 Mart 2013 'te 175. bölümde son bulmuşken, devamı niteliğindeki yeni seri 5 Nisan 2014 tarihinden beri yayınlanmaktadır. Aynı zamanda yedi orijinal video animasyonu olan serinin bir de anime filmi bulunmaktadır.",
        "izlenme": "3634",
        "adres": "https://www.youtube.com/watch?v=vQ-HBSmxky8"
    }];
});

Sayfayı test ettiğimizde aşağıdaki gibi tablomuz Bootstrap ve AngularJS ile çizilecektir.

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum