Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan Angular programlama dilinde custom directives konusunu anlatan bir eğitim içeriğidir.
- Video, Angular'da custom directives'in ne olduğunu açıklayarak başlıyor ve attribute, element ve class şeklinde tanımlanabilen direktiflerin nasıl oluşturulacağını gösteriyor. Eğitmen, direktiflerin temel özelliklerini (restrict, template, templateUrl, transclude) adım adım açıklıyor ve "dmydatam" ve "address" gibi örnek direktifler oluşturarak kullanımını gösteriyor. Ayrıca, jQuery eventleri ile direktiflerin etkileşimi, Bootstrap ile kullanımı, HTTP servisi ile veri çekme ve Angular'da tekrarlama (ng-repeat) kullanımı da anlatılıyor.
- Video, JSON veri oluşturma ve Bootstrap media object'lerini kullanarak bir örnek uygulama ile devam ediyor ve bir sonraki derste isolate scope konusunun işleneceği bilgisiyle sonlanıyor.
- Angular'da Custom Directives
- Bu videoda Angular'ın en önemli konularından biri olan custom directives (özel direktifler) konusu ele alınacaktır.
- Angular'da daha önce kullanılan direktifler (ng-show, ng-if vb.) aslında Angular'ın kendi direktifleridir.
- Kendimiz direktif yazmak için farklı yollar vardır: attribute şeklinde veya element şeklinde.
- 01:37Direktif Oluşturma
- Direktif oluşturmak için önce Angular modülüne eklenir ve "add directive" ile tanımlanır.
- Direktif ismi JavaScript'te değişken adı olarak kullanılabilmesi için camel case şeklinde yazılmalıdır.
- Direktif fonksiyonu bir obje döndürür ve bu objenin içinde çeşitli özellikler bulunur.
- 03:56Direktif Özellikleri
- "restrict" özelliği ile direktifin hangi türde kullanılacağı belirlenir: attribute, element veya class.
- "template" özelliği ile direktifin içeriği belirlenir ve bu içerik string ifade, HTML div'leri veya imajlar olabilir.
- "template url" özelliği ile direktifin içeriği başka bir kaynaktan çekilebilir.
- 08:57Transclude ve Fonksiyon Parametreleri
- "transclude" özelliği true olarak ayarlandığında, direktifin içine yazılan içerikler görünür hale gelir.
- "function" parametresi ile direktif fonksiyon döndürür ve bu fonksiyon scope, element ve attribute gibi parametreleri alır.
- Direktif içinde jQuery gibi kütüphaneler kullanılarak eventler (mouse enter, click vb.) işlenebilir.
- 12:45Örnek Uygulama
- Bootstrap kullanılarak bir örnek uygulama oluşturulur.
- Data.js dosyası kullanılarak JSON verisi oluşturulur ve bu veri direktif içinde kullanılır.
- Oluşturulan veri, direktif içinde tekrarlanarak görüntülenir.
- 16:53Angular'da Custom Direktif Oluşturma
- Angular'da custom direktifler oluşturulabilir, örneğin "address" adında bir direktif oluşturulabilir.
- "Address" direktifi, sokağı, şehri gibi bilgileri random olarak oluşturabilir.
- Oluşturulan direktif, Angular'da kullanılabilecek bir obje olarak tanımlanabilir.
- 17:30Controller ve HTTP Servisi Kullanımı
- Angular'da bir controller oluşturulabilir ve HTTP servisi ile veri çekilebilir.
- HTTP servisi ile çekilen veriler bir liste olarak saklanabilir.
- Angular'da "ng-repeat" direktifi kullanılarak liste elemanları döndürebilir.
- 19:48Direktiflerin Faydaları ve Gelecek Konular
- Direktiflerin en önemli faydası, kaynak kodunda tek bir satırda tüm işlemleri yapabilmesidir.
- Bir sonraki konuda muhtemelen isolate scope konusu işlenecektir.
- Isolate scope, Angular direkttifleri için ne kadar önemliyse, custom directives için de o kadar önemli bir konudur.