Webinar Angular JS’e Giriş

Selamlar;

Öncelikle webinar’a katılan tüm arkadaşlara teşekkür ederim. Umarım sizin için faydalı olmuştur. Kaçıranlar için webinar kaydı ve kodları aşağıdadır.

Single Page uygulamaların popüler olduğu günümüzde client side uygulamalar gittikçe önem kazanmaktadır. Bununla birlikte Javascript büyük bir yükselişe geçmiştir. İşte tam bu noktada javascript frameworkleri, dinamik sayfa tanımlamada olmaz ise olmazlar arasına  girmiştir. Bu webinar’da javascript frameworklerinden AngularJS üzerine konuşacağız.

Konular:

  1. Kendimi tanıtım ve AngularJS neden lazım
  2. Javascript’de Abstarction ve Module kavramı ile AngularJS’i tanımlama
  3. Controller & MultiController & Model & View
  4. Services($scope,$http.get,$log,$interval) , Asenkron $http.get
  5. Filters(filter | orderBy | number | currency | json) & Custome Filter
  6. Directives & Custom Directive [ A,E ]
  7. Injection

Kaynaklar:

  • Scott Alen video ve yazıları.
  • www.angularjs.org.
  • Google yayınları.

webinar

Webinar Kaydı:

Öncelikle Javascript ile AngularJS’deki Abstarction ve Module kavramlarına aşağıdaki gibi deyinilmiştir. İlgili kodlar script.js altındadır.

 https://api.github.com/users/ servisinden girilen user bilgisi $http.get servisi ile alınmıştır. Nested yapı kullanılarak çekilen user’ın repos_url’leri de  bir alt kırılım olarak yine $http.get servisi kullanılarak çekilmiştir. Daha sonra  filter | orderBy | number | json ve custom filter gibi çeşitli filitreler bu çekilen data üzerinde uygulanmıştır. İlgili kod aşağıdadır.

Ekran Çıktısı:

newfilter

Custom Filter ile true –  false Has Wiki değeri semboller ile gösterilmiştir. Kodu aşağıdadır:

Datanın search edilip çekildiği ve detayın gösterildiği Index.cshtml aşağıdaki gibidir.

1-)Yukarıdaki  <div search-User></div> Attribute Directive dir. Kodu aşağıdadır:

2-)Yukarıdaki  <user-Detail></user-Detail> Element Directive dir. Burda json filter kullanılmıştır. Kodu aşağıdadır.

3-)Yukarıdaki  <div ng-include=”‘UserRepo'”></div> ayrı bir sayfadır. Kodu aşağıdaki gibidir. Burda orderBy, filter ve checkMark custom filterları kullanılmıştır. UserRepo.cshtml:

Scripts.js kodları aşağıdaki gibidir: $scope.Search functionı ile istenen user aranmaktadır. Anlatılan örnek servisler aşağıdadır.

  • $scope MainController’da modelin en tepesidir. AngularJs’de Conrollerlarda tanımlı modelin en tepesi $scope’dur.
  • $http burda github servisine bağlanılıp data çekmeye yarar.
  • $log webbrowser’ın console tarafında mesaj vermeye yarar.
  • $interval belli zaman aralıkları ile ilgili methodu çağrır. Bir çeşit timerdır. Mesela burda 5sn geri sayarak search işlemini gerçekleştirmektedir.

interval

$scope, $http, $log, $interval

Yukarıdaki var app = angular.module(“app”, [‘directApp’]); deki directApp başka bir module dür. Sisteme yanda görüldüğü gibi inject edilmiştir.  SubController, Custom Filter ve Directiveler bunun altında tanımlanmıştır.

directApp.js: Kodu aşağıdaki gibidir.

SubController’daki $scope.SubMessage index.cshtml’de aşağıdaki gibi gösterilmiştir. Böyle inject edilen directApp modulüne ait SubController’ın SubMessage değeri index sayfasına basılır.

message

Böylece geldik bir webinarın daha sonuna. Bu webinarda AngularJS’e giriş yaptık.

Yeni bir webinarda görüşmek üzere hepinize hoşçakalın.

Source Code: http://www.borakasmer.com/projects/AngularJsWebinar.rar

 

 

Herkes Görsün:

Sevebilirsin...

17 Yanıt

  1. Veli diyor ki:

    Hocam elinize sağlık;
    Çok başarılı bir webinarmış. Dün izleyemedim. Bugün videosunu baştan sona izledim. Kaçırdığıma pişman oldum.
    Keşke sizin gibi insanlar daha çok olsa.

    İyi çalışmalar.

  2. Murat diyor ki:

    Selamlar hocam;
    En cok felsefe kismini begendim. Module ve Abstraction mantigi ile AngularJs biraz daha kafamda oturdu.

    Iyi tatiller hocam.

  3. Ceyda diyor ki:

    Selamlar hocam;
    Webinar çok başarılı imiş. Malesef ben kaçırmışım. Ama neyseki sonradan yayınladınız. Ekipçek izledik. Halen konuşuyoruz kendi aramızda. İlk kez bu konuyu gören bir arkadaşım var. Konudan çok sizin hatasız yazmanıza takıldı:)

    İyi çalışmalar.

  4. mehmet diyor ki:

    Selamlar Hocam;
    Cidden çok güzel bir sunum olmuş. Benim çok işime yaradı. Emeğinize sağlık. Şunuda belirtmeden geçemiyecem cidden çok deneyimli ve bilgilisiniz.

    İyi akşamlar..

  5. Berkay diyor ki:

    Hocam Teşekkürler, her makaleniz ayrı ayrı çok faydalı, yeni webinarlarınızı da bekliyoruz.

  6. Ramazan diyor ki:

    Teşekkür ederim çok güzel bir paylaşım. Herhalde sıkı takipçiniz olacağım :)

  7. Erhun diyor ki:

    çok güzel webinar olmuş. Teşekkür ederim çok güzel bir paylaşım

  8. Samet Çınar diyor ki:

    Elinize sağlık baya iyi.

  9. Numan diyor ki:

    çok güzel bir webinar olmuş emeğinize sağlık.

  10. Emre diyor ki:

    Hocam merhabalar. Guzel bir webinar olmus cok tesekkur ederim. Yalniz bir yeri anlamadim. Sayfada debug yapmadan degisiklikler aninda oldu. Gozden kacirdigim yer neresi anlamadim.

    • borsoft diyor ki:

      Teşekkürler Emre,

      Hatırladığım kadarı ile arkada çalışan bir IIS listener vardı. Ve script’de olan değişik durumunda, açık sayfaları refresh ediyordu. Aynı sass vs less’de olduğu gibi, değişen css durumununun monitor edilip, değişim durumunda yeni bir derlenmenin olması gibi. Bu da kodlama anında büyük kolaylık sağlıyor.

      İyi çalışmalar.

Bir Cevap Yazın

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