angular

There are 5 posts tagged angular.

AngularJS Özel Direktivler – (AngularJS Custom Directives)

Önceki derste Directiv’lere ufak bir giriş yapmıştık. AngularJS’nin en büyük avantajlarından biride kendi HTML elementlerini oluşturmasıdır bunu da directivler sayesinde gerçekleştiriyoruz. Örnek olarak htmlde aşağıdaki gibi bir element yok.

<vural></vural>

Örnek olarak basit bir directiv üzerinden gidelim

var app = angular.module('app', []);
  app.directive('vural', function () {
      return {
          restrict: 'EA',
          template: '<div>vuralusenc@gmail.com</div>'
      };
  });

app adındaki modülümüze directivi ekliyoruz. İlk parametreye html sayfasında kullanacağımız directivin adını ikici parametreye ise fonksiyonumuzu yazıyoruz. Directiv’in özelliklerini parametrelerle ekleyebililiyoruz.
Restrict ne işe yarar ?
Html sayfasında özel oluşturduğumuz elementi kullanma şeklimizi belirler örnek olarak
‘A’ => attribute name
‘E’ => element name
‘C’ => class name
bunları birliktede kullanabiliriz örnek olarak ‘AE’
Template
Template ise içerik olarak ne basmak istiyorsak burada onu belirtiriz. Yukarıydaki örnekte div içinde bir yazı yazılmış.
Link
Link parametresinde ise fonksiyon yazıyoruz. Template kısmını biraz daha geliştirmek istersek burada fonksiyon yazarak halledebiliriz. Aşağıda da belirtildiği gibi 4 parametresi var

link: function vural(scope, elem, attr, ctrl){}

Directivlerden kısaca bahsettikten sonra ufak bir örnek gösterelim.

AngularJS ile Örnek Uygulama

angularjs-logo
Bu aralar AngularJS’ye sarmış durumdayım önceki derslerde Directivleri kullanmayı görmüştük. Bu örnek uygulamada directivleri kullanarak basit bir uygulama yaptım aşağıda kodlar ve demo için link bırakıyorum. Herkese iyi çalışmalar.

Kodlar
Demo

AngularJS ng-switch Directive

Merhaba arkadaşlar vakit buldukça AngularJS ile ilgili yazı yazmaya çalışıyorum.Bu yazıda ng-switch alakalı basit bir uygulama paylaşacağım. Javascript kısmında bir modül oluşturalım.

 var myapp = angular.module("myapp", []);

daha sonra modül üzerinde bir controller oluşturalım. İlk parametre Controller’ın adı ikinci parametre ise fonksiyonumuz.

    myapp.controller("MyController", function($scope) {   
 
}

ng-switch adından da anlaşılacağı gibi bir koşul durumu için kullanılan bir direktiv bu kontrolü ng-switch-when ile yapıyoruz. Controller içindeki verilere $scope ile ulaşıyoruz. Bir örnek ile olayı daha iyi anlayalım.

oluşturduğumuz divde ng-switch on=”myData.switch” ile switch degerini sınıyoruz.

  <div ng-switch-when="1">1. Durum</div>
  <div ng-switch-when="2">2. Durum</div>
  <div ng-switch-default>1. Durum ve 2. Durum dışında</div>

şekildeki 3 durumdan birini controllerın içindeki switch değerine göre yazdırıyoruz.
bu yazıyı burada sonlandırıyorum herkeze iyi çalışmalar.

Hackathon Ardından

Merhaba arkadaşlar geçen hafta katıldığım Hackathon ardından nasıl geçtiği ve kazandığım tecrübeleri paylaşmak istedim. Öncelikle Hackathon nedir bundan biraz bahsedeyim. Facebook bir çok ürününü Hackathon’lar sayesinde ortaya çıkarmıştır yani bir gecelik hazırlanan projelerdir. Hackathon’nun temel prensibi 24 saat veya etkinliği düzenleyen organizasyona bağlı değişebilen saat dilimi arasında sıfırdan bir proje yapmaktır. Benim katıldığımda ise 42 saatti bu saat aralığında bütün yeme içme organizasyon tarafından karşılandı. Öncelikle Hackathon insanlar arasındaki iletişimi geliştirmenize yardım ediyor oraya hiç tanımadığınız insanlar geliyor ve sizinle takım arkadaşı olabiliyor veya fikir alışverişi yaparak etkileşime giriyorsunuz.

20150416113401

Tabi verilen saati verimli kullanmak lazım :) 42 saat boyunca takım arkadaşım 4-5 saat uykuyla durdu. Tabi ben o kadar dayanamadım 😀 Hackathon medya uygulaması üzerineydi bizim uygulama fikrimizde herkesin haber paylaşabileceği bir platform oluşturmaktı yarışma sonunda uygulamamız hazır hale geldi son bir cilalama yaptıktan sonra Google Play eklicez. Yarışmada kullandığımız diller Angular JS ve CodeIngiter tabi bunları Ionic Framework ile kullandık. Uygulamanın sonunda 2 dk sunumlar ile uygulamayı tanıttık sunuma hazırlıksız girdiğimiz için biraz sıkıntı oldu. 😀 Yarışma hakkındaki diğer detaylara buradan ulaşabilirsiniz.
20150416113401 (1)

AngularJS Direktifleri (Directive)

Merhaba arkadaşlar önceki yazıda AngularJS‘den biraz bahsetmiştik.Bu derste AngularJS ile ufak bir örnek yapacağız.AngularJS resmi sitesinden kütüphaneyi indirelim ve çalışacağımız klasör içine aktaralım.Programlamada gelenek olan Hello World yazdıralım :D.

Standart html sayfasından farklı olarak dikkatimizi çeken ng-app ve ng-model bunlar ile AngularJS kodları yorumlanıyor. ng-app direktividen itibaren AngularJS kodlarımızı yazmaya başlıyoruz. ng-model direktivi ile inputumuza girilen değeri {{}} süslü parantezler içinde kullabiriz