Kodcu Murat Youtube Kanalına Abone Olmayı Unutma

AngularJS Nasıl Kullanılır İlk Örneğimiz

Bu makalemizde AngularJS teknolojisi ile ilgili ilk örneğimizi gerçekleştireceğiz genel olarak nedir ve nasıl kullanılır tarzı sorulara cevap olması açısında hazırlanmış bir makaledir.

AngularJS Nasıl Kullanılır İlk Örneğimiz

AngularJS Kütüphanesini kullanarak rahatlıkla ve hızlıca dinamik sayfalarınızı oluşturabilirsiniz performans açısındanda sayfaları refresh etmekden tek sayfalı projeler gerçekleştirebilirsiniz. Bu şekilde kullanıcıların daha rahat ve hızlıca işlem yapmasını sağlamış olacaksınız.

Öncelikle angularjs ile ilgili gerekli detaylı bilgilere https://angularjs.org/ adresinden ulaşabilirsiniz. AngularJs örneklerimizde alttaki angular kütüphanesini kullanacağız bu javascript kütüphanesini projenize dahil etmelisiniz.

Html

AngularJS ile değerler üzerinde matematiksel veya string birleştirme gibi işlemleri direk olarak HTML içerisinde yapmak için alttaki gibi bir blok kullanmalısınız.

Örnek

4 + 3 = {{ 4 + 3 }}

Eğer angular kütüphanesini sayfanıza dahil etmediyseniz sayfada direk olarak {{ 4 + 3 }} düz bir metin şeklinde gözükecektir.

Sonuç

Üstte html kısmında görmüş olduğunuz gibi bir div etiketine ng-app attribute’ü ekledik bunun sebebi çalışmasını istediğiniz angular kodlarının ng-app attribute’üne sahip herhangi bir html element’ine verilmiş olması gerekiyor. Eğer yazmış olduğunuz angular kodları ng-app attribute’üne sahip html elementi altında yer almıyorsa yazmış olduğunuz kodlar düz metin olarak gözükecektir. Son olarak matematiksel işlemler yapılabildiği gibi string birleştirme veya değişkenler üzerinde işlemler yapmak içinde rahatlıkla kullanabilirsiniz bu blokları.

Modül Oluşturma

Modül oluşturmak için aşağıdaki gibi bir sözdizimi kullanmanız gerekmektedir.

Üstteki kodda gemStore diye adlandırılan kısım module adı oluyor html tarafında ng-app attribute’ümüze bu adı vereceğiz. ikinci parametrede ise köşeli parantezler içerisine modül bağımlılıkları eklenecek.

Controller oluşturma

Çok basit bir örnek ile oluşturduğumuz bir controller’in alert() fonksiyonu ile uyarı verdirmesini sağlayacağız.

Html

Javascript

Nesneleri gizleyip gösterme

Nesneleri gizleyip göstermek için ng-show ve ng-hide şeklinde iki farklı yöntem bulunmaktadır. Bu yöntemlerin her ikisinide gizleyip göstermek için kullanabilirsiniz örneğin ng-show yöntemini hem gizlemek hemde göstermek için şu şekilde kullanabilirsiniz.

Repeat Döngüsü İle Listeleme Yapma

Repeat döngüsü ile elemanları foreach döngüsü mantığı ile sırasıyla işleyebilirsiniz. Bu örneğimizde birden fazla olan ürünü ekrana listelemek için repeat döngüsünü kullanacağız.

Html Kodu

Javascript(app.js Dosyası İçeriği)

5/5 - (1 vote)