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.

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

AngularJS Genel Bakış

1379412346_angular
Merhaba arkadaşlar bugün AngularJS’nin bize sunduklarına bakacağız.AngularJS bir javascript uygulama çatısıdır.MVC(Model-View-Controller) Tasarım yapısını kullanır.Ayrıca MIT Lisansı ile kullanıcılara sunulmuştur.

AngularJS Avantajları
AngularJS hedef olarak static olan HTML sayfalarını dinamik halde kullanmamıza yarar.
Daha Anlaşılır bir kod yapısı içerir.
Modüler geliştirme sunar bu tekrar programlama için büyük kolaylık sağlar.
AngularJS’nin diğerlerinde ayırdığı en önemli özelliği HTML sayfasının davranışlarını değiştirmek.

AngularJS MVC

modern-web-applications-using-angularjs-15-638
Aslında AngularJS’nin MVC yapısında olup olmadığı tartışılıyor ancak genel olarak MVC yapısında olduğu kabul edilir.
AngularJS’de MVC şu şekildedir.
MVVM -> Model View View-Model
View-Model -> $scope
MVW -> Model View Whatever

AngularJS Farkı
AngularJS’den önce kod yapısı

AngularJs’den Sonra kod yapısı

AngularJS’nin en önemli özellikleri
Scope              Filters
Model             Module
View               Injector
Controller     Services
Directive

Bu yazıda AngularJS kısa olarak bahsettik herkese iyi çalışmalar.