Yazılımcı Gözüyle

Yapısına bakığımızda AngularJS MVC mantığını client-side yani kullanıcı tarafında gerçekleştirebilen bir platform. Dolayısı ile form kontrolleri için ideal bir durum sunuyor. sunucu tarafına istek yapılmaksızın girilen değerler belirli ölçülerde kontrol edilebilir. HTML5 özelliği olan "required" anahtar kelimesi ile zorunlu alanlar işaretlenebilir, ve " $valid " ile giriş olup olmadığı kontrol edilebilir. NOT : Ancak unutulmaması gereken kullanıcı tarafındaki validasyonlar gerek olmasına rağmen yeter değildir, güvenlik adına sunucu tarafında kontrol gereklidir. AngularJS te input ve form calidasyonları mevcut ve hepsi "true / false" değerlerini alırlar. inoput state leri: $untouched Henüz alana dokunulmadı. $touched   Alana dokunuldu. $pristine  Henüz alan değiştirilmedi. $dirty     Alan değiştirildi. $invalid   İçerik geçerli değil. $valid     İçerik geçerli. Form a ilişkin stateler: $pristine   Hiçbir alan değiştiri...

AngularJS ile aşağıdaki direktifleri kullanarak, Kullanıcı aksiyonları için event ekleyebilirsiniz. Bu eventler standart HTML eventlerini ezmeyecek 2 si birlikte tetiklenecektir. ng-blur         ng-change       ng-click        //Mouse Event ng-copy         ng-cut          ng-dblclick     //Mouse Event ng-focus        ng-keydown      ng-keypress     ng-keyup        ng-mousedown    //Mouse Event ng-mouseenter   //Mouse Event ng-mouseleave   //Mouse Event ng-mousemove    //Mouse Event ng-mouseover    //Mouse Event ng-mouseup      //Mouse Event ng-paste        Mouse eventleri tüm HTML objelerine eklenebilir. Aşağıdaki örnekte "ng-click" ve "ng-mouseover" eventinin kullanımı, bir fonksiyonun nasıl tetikleneceği gösterilmekt...

Servisler AngularJS uygulaması ile sınırlı ve içinde erişebilir durumdaki fonksiyon ve objelerdir. AngularJS te yaklaşık 30 civarı ön tanımlı servis mevcuttur. Örnek olarak " location " servisini ele alabiliriz, bu servis mevcut sayfanın lokasyonu ile ilgili bir çok metot içerir; $location.absUrl(); ile absoluteURL bilgisine ulaşılabilir. Aslında DOM da location objesi (" window.location ") hali hazırda mevcut AngularJS servisini kullanmaya gerek yok gibi görünsede mevcut objeleri kullanmak AngularJS içinde sizi limitler, Servis ile daha rahat hareket edebilirsiniz. Özellikle güncellemelerden aktif şekilde haberdar olabilmek için servis kullanımı tercih edilmesi sağlıklıdır. $http       - http request yapmaya yarar. $timeout - belirli bir süre bekleme yaratır. ( window.setTimeout gibi) $interval - .NET teki Timer gibi, tekrarlayan işlemler sağlar. "http" Servis: Ayrıca Kendi servisinizi yaratmanız mümkündür, ayrıca daha önce gördüğümü...

Scope: HTML kısmı view olarak, JavaScript'i controller olarak düşünürsek MVC yapısında scope model olarak düşünülebilir. Mevcut deişken ve fonksiyonları barındırır ve her 2 taraftada kullanılabilir. Ancak her 2 taraf için erişimler biraz farklıdır, Aşağıdaki Örnekte görülebilir. Eğer HTML tarafında data güncellenirse, model ve controller olarak JavaScript tarafı değişimden haberdar olur. Ayrıca tüm uygulama tarafında tanımlı "rootScope" mevcuttur, Bu durumda her 2 taraftada tanımlı değişken yada fonksiyonlara erişim sağlanırken ayrıca dikkat etmek gerekir, Bu noktada öncelik her zaman daha küçük ve Özel tanımlı olan yerel scope tur. Filtreler (Filters): Datayı formatlamak, yada filtrelemek amaçlı eklenebilecek ifadelerdir.  currency  Parasal formatlama date  Tarih formatlama filter  Listeden Alt kümeyi filtreleme json  Bir objeyi JSON metni formatına dönüştürmek limitTo  Liste yada methi belli bir sayı yada uzunlukla sınırlam...

Model: Aslında daha önceden bu konudan bahsetmiştik, esasen özel bir direktif olan " ng-model" direktifinden bahsediyoruz. Bu direktif HTML objelerin (input, select, textarea) değerini uygulama datasına bağlar, bu bağlantı 2 yönlüdür, gösterim için kullanılabileceği gibi kullanıcı tarafından yapılan değişiklikleride değişkene besler. "ng-model" - Direktifi kullanılan data için " invalid, dirty, touched, error" statülerini sağlamaktadır, ve kullanıldığı objenin tipine göre aşağıdaki CSS/class ları sağlar. ng-empty ng-not-empty ng-touched ng-untouched ng-valid ng-invalid ng-dirty ng-pending ng-pristine Kontrolör (Controler): AngularJs çalışma mantığında, uygulamalar kontrolörler tarafından yönetilir. Kontrolörler standar java objeleridir ve obje constructor ile oluşturulur, ve " $scope " parametresi ile çağrılır. Bu parametre uygulama değişkenlerinin ve method larının tutulduğu objedir. Kontrolörlerin ext...

İfadeler (Expressions): AngularJS ifadeleri HTML taglari içinde '{{...}}' çiftli süslü parantezler içine yada ' ng-bing="" ' ifadesi ile kullanılabilirler. ifadeler JavaScript ifadelere benzer ve tanım, değişken yada işlemler içerebilirler. Yukarıdaki örnekte bir çarpım ifadesini AngularJS expression olarak gördük bu diğer işlemler, string ifadeler için mümkün olduğu gibi JavaScript teki şekilde JSON objesi ve/veya Array kullanmakta mümkün. Modüller (Modules): Modüller uygulamanın farklı parçaları olarak değerlendirilebilir. ileride inceleyeceğimiz Kontrolleri çalıştırabilmek adına Modül ihtiyacımız olacak. Yukarıdaki örnekte, görüleceği gibi, HTML içinde 1 uygulama tanımlandı ve 2 ayrı DIV 2 ayrı modül olarak tanımlandı, ve aynı isimlerle 2 değişken 2 farklı modül içinde farklı değerlerle oluşuruldu. Bu noktada, her DIV objesi tanımlandığı modül içindeki değerlere erişim sağladığı görülebilir. Direktifler (Directives): "ng-...

Nedir: - Öğrenmesi basit, - HTML özelliklerini genişleten, - Tek sayfa uygulamalar (SPA - Single page applications) için ideal, Bir javascript kütüphanesidir. ".js" (javascript file) olarak dağıtılır ve script tag'i ile sayfaya eklenebilir. Eklerken Online bir kaynağın kullanılmasında güncel olabilmesi adına fayda olacaktır. Örnek olarak sayfanıza aşağıdaki tag'i ekleyerek başlayabilirsiniz. < script  src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js" > < /script > AngularJS ile çalışabilmek için Öncelikle aşağıdaki konulara hakim olmanız gerekecek: - HTML - CSS - JavaScript HTML Eklentileri: AnglarJS HTML ortamına olan etkilerini temel olarak ng-directives ile yapar. - ng-app    : AngularJS uygulaması tanımlar. - ng-model : HTML objelerinin değerlerini uygulamaya bağlar. - ng-bind  : uygulama datalarını HMTL e bağlar. AngularJS hakkında konuşurken, basit adımlar olarak " directives, expr...

Blocky Kütüphanesine bir giriş yapmıştık (yazıya buradan ulaşabilirsiniz.), Şimdi birazda Custom blok tanımlamaya değinmek istiyorum. Bu gün javascript yordamı ile devam edeceğiz ve Kütüphane ile gelen demo uygulamalardan birini kullanarak, "Uyarı Mesajı" isimli bir blok oluşturacağız. Bloğun tanımladığımız iş kuralına göre min/max değerleri içinalert mesajı vermesini gerçekleştireceğiz. Öncelikle Şunu belirtmekte fayda var, Kendinize has bir blok yaratırken 2 adımda düşünmekte fayda var; Bloğunuzun görsel tasarımı Bloğunuzun davranışı Bu 2 tanım için aslen benzer bir yaklaşım izliyor olacağız. (Blocks.js dosyasına yazdığımız method ları ekleyerek ilerlememiz mümkün, yada farklı bir dosya yaratmakta seçilebilir.) Blockly.Blocks['givealert'] = {  init: function() {     this.appendValueInput("message")         .setCheck("Number")         .setAlign(Blockly.ALIGN_CENTRE)         .appendFie...

   Google tarafından, Web tabanlı ve Android/IOS uygulamaları için görsel kod düzenleyici ortam olarak sunulan kütüphane. Kod yazmadan birbirine kitlenen görsel bloklar ile istediğiniz mantığı oluşturup JavaScript, Python, PHP,  Lua, Dart dillerinde ilgili kodu oluşturmanızı sağlar. Kabaca kullanımı : Blocky Editör ’ünü uygulamanıza entegre edin. Editör, Kullanabileceğiniz blokların yer aldığı toolbox ve bağlantılarını oluşturduğunuz workspace ten oluşur. Kendi blok’ larınızı yaratın. Blocky kütüphanesi döngüler, koşullar, basit atama işleri ve matematik işlemleri gibi standart blokları içermektedir, ancak daha özel ve karmaşık işlemleriniz için kendi blok' larınızı yaratmanız gerekir. Blocky, sadece kod’ u üretir, ancak sonrasında üretilen kod ile ne yapacağını sizin kararınız olacak üretilen kodu kullanmak üzere uygulamanızı geliştirin. Blocky kütüphanesi ile en çok eğitim amaçlı uygulamalar, oyun geliştirme araçları ve kodlama bilgisi olmaks...