C#’ta Önişlemci Direktifleri(Preprocessor Directives)

C#’ta Önişlemci kullanım kodları aşağıdaki gibidir.

Koşullu derleme
#define
#undef
#if
#else
#endif
#elif
Derleme
#error
#warning
#line
#pragma
Görsel
#region
#endregion

Kullanımı

static void Main(string[] args)
{
   Console.WriteLine("TEST");

   #if true 
      Console.WriteLine("Kosul saglandi");
   #else
      Console.WriteLine("Kosul saglanmadi");
   #endif
}

ANGULARJS CUSTOM DİREKTİF TANIMLAMA – 2

abit bir HTML elementinin (div gibi), biz eklemediğimiz sürece bir jQuery bileşeni gibi bir özel bir davranış sergilemesi mümkün değildir . Örneğin bir div, tek başına bir slider veya datepicker gibi davranamaz. Direktifleri ise, özel davranışları olan html elementleri veya nitelikleri gibi düşünebilirsiniz.

Dikkat ettiyseniz önceki örneklerde veya AngularJS ile geliştirilmiş herhangi bir uygulamada, ng-app, ng-repeat, ng-model… gibi niteliklerin kullanıldığını görmüşsünüzdür. İşte bu nitelikler, kullanıldığı elementlere belirli özel davranışlar ekleyen direktiflerdir.
Örnekteki datepicker elementi, şu an için hiç bir anlam ifade etmeyecektir. Peki bu elemente bu davranışı verebilirmiyiz sorusuna gelirseniz, “bu yazıyı boşu boşuna yazmıyoruz herhalde” gibi bir cevap alırsınız benden 🙂

Kendi direktiflerimizi tanımlayalım.

Diğer tüm özelliklerde olduğu gibi direktifler de bir modül üzerine inşaa edilirler. Bir direktif oluşturmak için module.directive fonksiyonu kullanılır. module.directive fonksiyonu iki adet parametre alır. Birincisi direktifin adı, ikincisi fabrika fonksiyonu. Fabrika fonksiyonu oluşturulan direktif ile ilgili seçeneklerin tanımlı olduğu bir nesne döndürür.

var app = angular.module("myApp", []);
app.directive("datepicker", function () {
return {
restrict: "EA",
compile: function (elem) {
var div = document.createElement("div");
elem.replaceWith(div);
$(div).datepicker();
}
}
});

Yukarıdaki örneği uygulayacak olursak, önceki örnekte tanımladığımız datepicker elementinin darvanış sergilediğini yani sayfaya bir datepicker geldiğini göreceksiniz. Görüldüğü gibi direktif oluşturmak direktifleri anlatmaktan çok daha kolay.

Şeçenekleri incelemek gerekirse.
resctrict : niteliğin kullanım biçimini belirler.
Bu seçeneğine atanabilecek değerler ise şunlardır.
“A” – sadece nitelik olarak tanımlanabilir.
<pre>

gibi.</pre>
“E” – sadece element olarak tanımlanabilir.
<pre><my-directive></my-directive> gibi.</pre>
“C” – sadece class olarak tanımlanabilir.
<pre>

gibi.</pre>
veya bir kaçını yanyana yazarak birden farklı şekilde tanımlama yapmamız mümkündür.
“EA”, “EC”, “EAC” gibi.

module.directive("myDirective", function () {
return {
restrict: "EA",
//...
}
});

template : görünümün üretileceği, içerisinde direktif tanımlamaları ve bağlam ifadeleri barındıran HTML elementlerinden veya içerisinde bağlam ifadeleri barındırabilen statik metinlerdir.

module.directive("myDirective", function () {
    return {
        restrict: "EA",
        template: "Hello, {{ username }}", //...
 } 
});

templateUrl : mevcut bir şablonun kimlik (id) bilgisi veya url bilgisi

module.directive("myDirective", function () {
    return {
        restrict: "EA",
        templateUrl: "my_directive.html",
        //...
    }
});

AngularJS direktiflerdeki template özelliğini saymazsak, iki şekilde şablon tanımlayabilirsiniz. Birincisi harici bir dosya olarak (herhagi bir html dosyası olabilir), ikincisi ise şu şekildedir.

<script type="text/ng-template" id="myTemplate">
Ebubekir
</script>

Bunu da not olarak belirmiş olalım.
transclude : Dış kapsamdan (scope) direktif içerisine erişim sağlar diyebiliriz. Anlaşılması biraz zor olduğu için örnekle açıklamakta fayda var.

module.directive('myDirective', function() {
    return {
        restrict: "EA",
        transclude: true,
        template: 'Hello :' 
};
});

Yukarıdaki direktif tanımını yaptıktan sonra aşağıdaki koduda uygulamaya dahil ederseniz şablondaki ng-transclude ile işaretlenen span elementinin içerisine “Ebubekir” yazıldığını göreceksiniz.

<my-directive>Ebubekir</my-directive>

Yani dışarıdan içeriye birşeyler dahil etmek gibi.

replace : boolean bir değer alır. Direktif elementi veya niteliğin bağlandığı element ile şablonun derlenmesi ile üretilen çıktı basitçe yer değiştirir.

module.directive('myDirective', function () {
    return {
        restrict: "EA",
        replace: true,
        template: 'Hello World' 
}; 
});

Örneği baz alarak izah etmek gerekirse;

<my-directive></my-directive>

kodu render edildikten sonra örnekte ki şablonda belirtilen kodla yer değiştirecektir yani sonuç şu şekilde olacaktır.

Hello World

controller : Angularjs direktiflere özel controller lar geliştirmemize olanak sağlar. Bu, normal bir controller geliştirmekten farklı değldir. Aradaki fark ise biri modül üzerine, diğeri ise direktif içerisinde tanımlanırlar.

module.directive('myDirective', function () {
    return {
        restrict: "EA",
        template: '{{ hello }} {{ world }}',
        controller: function($scope) {
            $scope.hello = "Hello";
            $scope.world = "World";
        }
    };
});

Görüldüğü üzere hiçbir fark yoktur.
Not:Makaleyi yazan arkadaşın eline sağlık.alıntıdır…

AngularJS Custom Direktif Tanımlama

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<script>
 
var app = angular.module("main", [])
.directive("myElement", function () {
return {
restrict: "E",
link: function ($scope, element, atttributes) {
element.html("Hello World!")
}
}
});
 
// restrict E olursa element (<my-element></my-element>)
// restrict A olursa attribute (<div my-element></div>)
// restrict C olursa class (<div class="my-element"></div>)
// veya bir arada da olabilir (restrict: "EA" veya restrict: "EAC")
</script>
</head>
<body ng-app="main">
<my-element></my-element>
</body>
</html>