Angular JS 2 Nedir ve Angular JS 2 ile İlk Uygulama

Merhabalar,

Bugün, başlıktan da anlaşılacağı üzere AngularJs 2 hakkında biraz bilgiler vermeye çalışacağım. Öncesinde AngularJs nedir yazımı okuyabilirsiniz. Genel olarak AngularJs ve AngularJs 2 Javascript framework ü olduğu için ve Angular 2 bir üst versiyonu olduğu için ana hatlarıyla AngularJs’ nin temel mantığı baz alınarak yeniden yazılmıştır. Direkt olarak arasında ki farklara geçiyorum.

AngularJs 2 Arasında ki Farklar

  • AngularJs de ki modüler yapı geliştirilmiştir.
  • Sunucu ile iletişim için hazır yapı.
  • Çok daha hızlı.
  • Daha güncel metotlar kullanıldı ve data binding yapısı daha da güçlendi.

Angular Js 2 Çalışma Mantığı

Bir Angular Js uygulaması yapısı bir veya daha fazla component veya componentler birleşiminden oluşmaktadır.

Componentler ise Template  + Class(js classı) + Metadata bileşenlerinden oluşmaktadır.

Angular JS 2 Çalışma Ortamının Hazırlanması: 

  • Bilgisayarınıza NodeJS kurmanız gerekmektedir.
  • Visual Studio Code
  •  Node Js i indirdikten sonra cmd komut ekranında “npm install -g typescript” yazarak typescript kurulur.

typescript

  • Daha sonra “npm install -g typings” yazarak typing kurulumunu gerçekleştiriniz.

typings

  • Typing kurulumu tamamlandıktan sonra Angular Js projeleri yaratma, Angular Js ile ilgili componentleri oluşturma gibi ve  kodların çalışabilmesi için “npm install -g angular cli”  Angular komutu kullanılarak  npm üzerinden angular-cli paketini indirmeniz gerekmektedir.
  • angular -cli paketini indirdikten sonra artık Angular JS 2 için proje oluşturabilecek düzeye gelmiş bulunmaktayız.
  • Artık cmd komut satırına “ng new proje_ismi” yazıp enter tuşuna bastığımızda Angular JS 2 projemiz oluşmuş olacaktır.

angulartutorials

  • Farklı şekillerde de proje oluşturma aşamaları bulunmaktadır. Fakat ben bu şekilde proje oluşturma yolunu tercih ettim.
  • Bundan sonra ki işlemlerimizde oluşturmuş olduğumuz projeyi kodlarımızı geliştireceğimiz Visual Studio Code da açmak ve yaptığımız değişiklikleri tarayıcımız da görebilmek için şu işlemleri yapmamız gerekmektedir.
    • Cmd de cd komutunu kullanarak projenin içine gidip “code .” (code boşluk nokta) yazarak Visual Studio Code Ide’ mizi açacağız
    • Daha sonra “ng – serve” yazarak projemizin yayınını yani localhost’ u oluşturmuş olacağız. (localhost:4200)

benhakan yukle2

Angular Js 2 genel yapısı, kurulum için gerekenler, kurulum ve ilk Merhaba projemizi oluşturmuş olduk. Bugünlük anlatacaklarım bu kadar.

Hoşça kalın,

 

Continue Reading

AngularJS Nesne Mantığı

Merhabalar,

Bu yazımda AngularJs nesne(object) mantığına değineceğim. Aslında object olarak bahsetmiş olduğumuz bir class yapısıdır. Ve bu classa bir property(özellik) atayıp değerlerini get, set edebileceğiz. Hemen bir örnek ile anlatmak istiyorum. Örneği yapıp daha sonra yazılan kodları beraber incelememiz anlaşılırlık açısından daha kolay olacaktır.

Ekran Çıktısı:

aaKodu incelediğimizde;

ng-init etiketi içerisinde raf adında bir sınıf(class) oluşturduk. Bu sınıfa 2 tane lokal değişken(local variable) tanımladık ve başlangıç değerlerini belirttik. Aynı şekilde elementlerimizin bağlı bulundukları inputlara ng-model atayarak tutarın dinamik bir şekilde değişmesini sağladık.

 

AngularJs’ de foreach yani ng-repeat

Projelerinizde mutlaka kullanabileceğiniz ve çok işinize yarayacak bir angular etiketi ng-repeat…

ng-repeat: Dataları tek tek dolaşır. Foreach mantığı ile çalışır. Yani dizide ki tüm elemanlara ulaşabilirsiniz.

Yukarıda ki örnekte takimlar sınıfına [] dizi olarak kullanılmış ve farklı  ögeler eklenmiştir. Daha sonra ng-repeat kullanılarka takimlar sınıfında ki bütün ögeler listelenmiştir.

Ekran Çıktısı:

asdasd

Yazımı burada sonlandırıyorum.

Hoşça kalın

Continue Reading

AngularJs Nedir ?

AngularJs temel de bir Javascript framework’ ü dür. Google tarafından geliştirmiş ve MVC yapısını kullanarak güçlü,dinamik ve etkileşimli arayüzler tasarlamayı sağlamaktadır. AngularJs‘ nin çıkış amacı aynı Jquery’ nin çıkış amacının olduğu gibi arayüzde az kod yazarak daha kararlı bir yapı ile geliştirme süreçlerini kolaylaştırmaktır.

AngularJs en temel 5 elementi:

  • ng-app: AngularJs’in çalışacağı block.
  • ng-model: Adından da anlaşılacağı gibi modelimiz.
  • ng-bind: Tanımlanan modele bağlanan alan.
  • ng-init: AngularJS’de kullanılacak değişkenlerin tanımlandığı yer.
  • {{ }}:AngularJS expressions ifadelerin tanımlanma şeklidir.

Aşağıda ki kod bloğunda basit bir AngularJs örneği yapılmıştır.

adsiz

Örneği beraber inceleyelim.

Angular’ ın yazmış olduğumuz html etiketlerinde(tag) hangi alanda çalışmasını istiyorsak oraya ng-app etiketini yazıyoruz.

ng-init ile lokal değişkenleri (local variables) tanımladık. Bu lokal değişkenleri tam isim ve tam isim span olarak göstermek istediğimiz değerlerle birlikte ekrana yansıttık.

Anlık olarak değişmesini istediğimiz verileri input text olarak belirtmiş olduğumuz satırdaki ng-model=”name” modelimizle hemen altında ng-bind=”name” olarak çağırdık ve anlık değişikliği bu şekilde yakalamış olduk. ng-bind yerine expressions ifade  yani {{name}} bu şekilde de çağırabiliyoruz.

 

Kodun ekran çıktısı aşağıdaki gibidir:

aaa

Yazımı burada sonlandırıyorum.

Hoşça kalın

 

Continue Reading

Java’ da İsimlendirme

Merhaba Arkadaşlar,

Bugün ki notlarım arasında Java da isimlendirme standartları (Naming Standard) hakkında notlar alacağım.

Class ve Interfaceler

  • Class ve Interface oluşturacağımız zaman ilk harfi büyük olmalıdır.
  • Birden fazla kelime olduğu zaman her kelimenin ilk harfi büyük olmalıdır.
    • İlk harfi büyük yazmadığımız zaman Eclipse uyarı verecektir. Legaldir fakat küçük harfle yazımı Java standartı için uygun değildir.
  • Class isimleri, isim olmalıdır. (model/object)
    • Employee,Student gibi
  • Interface isimleri ise sıfat olarak önerilir.
    • Runnable,Serializable gibi

Methodlar

  • Metot oluşturacağımız zaman küçük harfle başlanır ve camelCase olarak isimlendirme devam etmelidir.
  • Fiil-isim çifti olacak şekilde kod yazımı olması önerilmektedir.
    • getCustomer,setPerson gibi

NOT: Herhangi bir şekilde derleme hatası almazsınız fakat metotların ne işe yaradığını sonradan kodu incelediğinizde veya başkası sizin yazmış olduğunuz kodu incelediğinde mantıklı isimlendirme sayesinde metotun ne işe yaradığını daha kolay tahmin edebilmektedir. İleri ki günlerde metot oluştururken dikkat edilmesi gereken kurallar şeklinde bir konudan bahsedeceğim.

Değişkenler/Variables

  • camelCase yaklaşımı olmalıdır.
  • Mantıklı isimlendirme olmalıdır. Değişkenin ne işe yaradığı belli olması önemli bir yaklaşımdır.
    • string customerName

Sabitler/Constant

  • Sabit tanımlanırken tüm harfler büyük olmalıdır ve kelime aralarında alt çizgi(_) olmalıdır.
    • public static final int MAX_VALUE

 

Continue Reading

Java’ da Belirteçler/Belirleyiciler

Merhaba Arkadaşlar,

Bu benim ilk blog yazım. Imhakan.com ‘ da kendimce Java dünyasından bahsetmeye çalışacağım. Burada ki asıl amacım kendi notlarımı tutabiliyor olmak olacaktır. Belki almış olduğum bu notlar sizinde işinize yarayacaktır. Şimdiden iyi okumalar.

Java da class, interface, method, variable gibi kavramlar için kullandığımız isimlere identifier(belirleyeci) denir.

Identifierın program derlendiği anda hata almaması için belli başlı kuralları vardır.

  • Harf,para birimi($), alt_cizgi gibi karakterlerle başlayabilir.
  • Rakam ile başlayamaz.
  • Uzunluk problemi yoktur.
  • Keywordleri kullanamayız.
  • Java da identifier(belirleyici) case-sensetive’ dir. Yani variable ve VARIABLE farklı değişkenlerdir.
  • Yazılım standartı olarak Ingilizce kelimeler tercih edilmelidir.

Örnek:

int count;  –>legaldir. (Herhangi bir hataya yol açmaz)

int $; –>legaldir. (Herhangi bir hataya yol açmaz)

int 5error; –> illegaldir. (Derleme sırasında hata verecektir.)

 

Continue Reading