İçeriğe geç

Angular Öğreniyorum Serisi – 1

Son zamanlarda ağırlıklı olarak mobil projelere eğildim. Kullandığım teknolojilerin temeli Html 5’e dayanıyor. Bilindiği gibi Html 5 ile platform bağımsız uygulamalar hazırlanabilmekte. Sonuçta javascript, css ve html dosyaları ile çalıştığınızda her platformda(IOS, Android, Windows Phone…) çalışacaktır. Burada hazırlayacağımız uygulamalara göre işlerimizi kolaylaştıracak ve bizlere esneklik kazandıracak güzel javascript kütüphaneleri inceleyebiliriz. Bunlardan bazılarını jquerymobile, angular, knockout ve sencha olarak belirtebilirim. Fakat şunu belirtmeliyim ki telefon rehberini çekme, kamera özelliği kullanma veya navigasyon işlemleri gibi özellikler için cordova kullanmamız gerekmekte. Seri halinde yazmayı planladığım bu yazı dizisinde angular üzerinde duracağım.

Angular Nedir

Angular Google’nin desteklediği bir javascript kütüphanesidir. MVC(Modal – View – Controller) tarzı bir yaklaşım sunar.

Modal: Verinin tutulduğu nesneyi temsil eder.

View: Arayüzleri hazırladığınız bölümdür.

Controller: Modal ve View arasında köprü görevini görür diyebiliriz.

 

Yeni bir teknolojiyi öğrenirken gereksiz çok fazla terminolojiye girmeden direk pratik örnekler üzerinden ilerlemenin daha eğlenceli olduğu düşüncesindeyim. Hatta Hello World efsanesi beni desteklemiyor değil 😀 . Verileri bir servisten okuyan ve bunları basit olarak listeleyen uygulama hazırlayacağız.

 

Öncelikle ihtiyacımız olan ilgili js ve css dosyalarını html dosyamıza referans olarak göstermeliyiz. Burada referans gösterirken ben sitesi üzerinden gösterdim fakat bunu dosya olarak indirip dizinden göstermek daha mantıklıdır. Zira mobil dünyasında performans açısından daha iyi olacaktır.

    <link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js" />

Şimdi javascript tarafında bir modul oluşturacağız. Ben ismini ionicApp olarak belirliyorum.

<script type="text/javascript">
  angular.module('ionicApp', ['ionic'])
</script>
<html ng-app="ionicApp"> <!--view tarafına bu şekilde dahil ediyoruz.-->

Şimdi bu tanımladığımız modul içine bir controller ekleyip bu controller üzerinden bir rest servise bağlanmayı deneyeceğiz. Burada odaklanacağımız kısım angular olduğundan dolayı internet üzerinde bulununan bir rest servisini kullandım. Sizler de buradaki adresten bu servisi detaylı şekilde inceleyebilirsiniz.

  <script type="text/javascript">
    angular.module('ionicApp', ['ionic'])
      .controller('AppCtrl', function($scope, $http) {

        getData = function(){
          $http.get('http://api.dribbble.com/shots/everyone').then(function(resp) {
            $scope.players = resp.data.shots;
          }, function(err) {
            console.log('ERROR', err);
          })
        }

        getData();
      });
  </script>

Mevcut modülümüze AppCtrl isminde bir controller ekledik ve burada $scope noktasına dikkat çekmekte yarar var. Bu view tarafı ile iletişimi sağlayan bir özelliktir. $scope.players şeklindeki kullanım sayesinde players içine ihtiyacımız olan veriler doldurulmakta ve bunu view tarafında render etme imkanımız oluşacaktır. Bunun yanında $http yapısı ilgili servisi ajax call ederek belirlediğimiz kullanıma göre(get, post, put, delete) işlem yapmaktadır. İşlemin success veya error olması durumunda belirlediğimiz function blokları içinde alacağımız aksiyonları hazırlayabiliriz.

Şimdi AppCtrl isminde bir controllere sahibiz ve bunu view tarafında kullanabiliriz. View tarafında controller ismini sizin belirleyeceğiniz bir tag içine “ng-controller” özelliği ile dahil edebilirsiniz. Ben body içine yerleştirdim. Aşağıdaki gibi görebiliriz.

<body ng-controller="AppCtrl">

Şu noktada artık hazırlamış olduğumuz controller içindeki datayı çeken yapıyı listeleyebiliriz.

    <ion-view view-title="Playlists">
      <ion-content>
        <div class="list">
          <a ng-repeat="player in players"
             href="#/{{player.id}}"
             class="item item-thumbnail-left">
            <img ng-src="{{ player.image_400_url }}">
            <h2>{{ player.player.name }}</h2>
            <h4>{{ player.player.website_url }}</h4>
          </a>
        </div>
      </ion-content>
    </ion-view>

Burada dikkat edeceğimiz nokta controller tarafındaki verileri çektiğimiz players ismindeki yapının burada “ng-repeat” özelliği içinde kullanılmasıdır. Elimizdeki veriler bu şekilde döngü içine alınır. Bunun yanında ion-view, ion-content şeklindeki yapılar için şuradaki linki inceleyebilirsiniz. Ionic bize arayüzleri hızlı ve basit olarak hazırlayabileceğimiz güzellikler sunuyor.

Sonuç
Genel anlamda toparlamak gerekirse angular kütüphanesine yüzeysel bir giriş yaptık. Servis tarafından veri çekme işlemi ve bu verileri view tarafında listeletme üzerine çalıştık. Hatta bu hazırladığımız listelemeye ilaveten scrollu aşağıya doğru kaydırdığımızda yenileme özelliği eklemek mümkündür ve bu sizler için ödev olabilir 🙂

Tarih:Angular

İlk Yorumu Siz Yapın

Bir cevap yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.