AngularJS’ e yada 2.versiyonu ile adı sadece Angular olacak olan frontend framework’ nü öğrenmeye hoşgeldiniz. Angular nedir, niçin vardır ? Angular ile neler yapılır vb. deli sorulara yanıt bulmak için öncelikle AngularJS Nedir linkindeki konumuza gözatabilirsiniz. Kendinizi Angular’ ı öğrenmeye hazır hissediyorsanız hemen başlayalım. Çünkü sizinle paylaşacak bolca örneğim var 🙂


Bu konumuzda başlıktan da anlaşılacağı üzere Angular’ ı sayfamıza ekliycez ve çalıştığına dair testler yapacağız. Angular’ a dair her konuyu ayrı ayrı anlatacağım. Ve konu sonunda sizi bolca örnek yapabileceğiniz linkler ile başbaşa bırakacağım 🙂

Angular Framework’ ü öğrenmek için temel düzeyde HTML,JS,CSS bilmeniz gerektiğini hatırlatayım.

Angular Framework’ ünü sayfamıza ekliyoruz

Angular’ ın js dosyasını google serverlarından ekledim, siz isterseniz bilgisayarınıza indirip te gösterebilirsiniz.
Burda görmemiz gereken yer ng-app=”” özelliğidir. İşte projenize Angular’ ı bağladığınız yer tam da burasıdır. angular.min.js dosyası yüklendiği anda sayfada ng-app özelliği arar. Bulduğu an elementin tamamını kontrolü altına alır ve o alanda bir angular uygulaması başlatır.

“Neden ng-app ataması yapıyoruz? ne gerek var? olmasa olmaz mı? olmasa da çalışması lazım, bana gereksiz gibi geldi vb…” şeklinde sorular duyar gibiyim 🙂
Haklısınız, bu atama teknik bir gereksinim değil. Yani siz angular js dosyasını sayfaya eklemeden angular diye birşey olmaz lakin, ng-app ataması yapmadan gayette çalışmalıydı herşey. Sebebini açıklıyorum : Çünkü siz sayfanızın tamamında Angular uygulaması çalıştırmak zorunda değilsiniz. Sizin bir sayfanız vardır ve sadece bir kısmında Angular uygulaması yapmak istiyorsunuz, işte o kısmı ng-app ataması içine almalısınız ki , Angular bilsin, sadece orada Angular’ ın çalışması gerektiğini.

Peki pratikte ne oluyor ?
Kimse web sayfasının sadece belirli bir kısmında Angular çalıştırmaz, tüm uygulamayı angular ile yapar. Bu yüzden lafı fazla uzatmıyoruz ve ng-app atamasını sayfanın en tepesine, HTML etiketine ekliyoruz ki sayfamızın tamamını Angular kapsasın.

Oralardan bir soru geliyor sanıyorum, “ng-app atamasına gerek yok bence, ben nereye angular kodu yazarsam orasını çalıştırsın işte, bu kadar basit değil mi?” diye soran bir arkadaşımız olabilir.

İlk bakışta mantıklı bir düşünce olarak geliyor, lakin ileriki konularda öğreneceğimiz birşey var, data-binding. Verimizi DOM’ a yazmamızı sağlıyor. İşte bu işlemde değişkenlerimizi sayfamıza {{degiskenIsmi}} şeklinde ekliyoruz. Yani çifte süslü parantez içinde. Diyelim ki ng-app diye bir kavram yok. Öyle olursa, sayfamda birde {{burası değişken değil, şekil olsun diye böyle yazdım}} cümlesini de angular bind etmeye çalışacak ve tatatam patlıyacak.

Merakları giderdiysek, soruları cevapladıysak, yukarıda verdiğim kodu aşağıda çalıştıralım. Ve inceleyelim.

Konuların başında kısa bir bilgi vereyim: Çalıştırmayı istediğim javascript,css,html kodlarını https://jsfiddle.net sitesi üzerinden yukarıdaki gibi vereceğim. Bu yapıda sayfaya js,css kodları eklemeyi menüden yapıyorsunuz ve html etiketleri zaten açılmış olduğundan, bunları kod kısmında görmeyeceksiniz, ŞAŞIRMAYIN 🙂

Kodumuzu inceleyelim;
İlk gözümüze çarpan ng-model oluyor. ng-model directive’ i ile, sayfalarımızdaki veri girişi yapılabilen elementleri, uygulamamızın veri merkezine bağlamış oluyor. ng-model eklenen tüm elementler, uygulamaya veri akışı sağlar ve uygulamadan veri alır. Aşağıdaki iş akışına bakalım.

angularjs mvc

Kullanıcı view ile etkileşime geçti (Input’ un değerini değiştirdi), bu yaptığı hareket ile uygulamanın veri merkezine ng-model de verilmiş isim ile değer gönderdi. Veri merkezi değeri aldı kaydetti ve sayfada o model isminin yani değişkenin yazılı olduğu heryeri anında güncelledi. Resimde gösterildiği üzere, bu değişkeni sadece view’ dan değil, ileride anlatacağım controller üzerinden de güncelleyebilirsiniz. Bu güncellemenin sonucuda anında view’ a yansır.

Şimdi yukarıda paylaştığım ekrandaki input a isminizi yazın ve anında bir alt satırındaki yazının güncellendiğini görün.

İşte çift taraflı two-way-data-bind kavramı budur.

View’ da model’ in değerini alırken ng-model, değerini basarken yani bind ederken ise süslü parantezler kullanıyoruz. Birkaç yöntem daha var, uygulamanızda %90 süslü parantezleri kullanacaksınız lakin öyle noktalar gelecek ki, diğer bind yöntemlerinide kullanmanız gerekecek. Bunları ilerleyen konularda sizlerle paylaşacağım.

Şimdi sizi örnekler ile başbaşa bırakıyorum.

Basit bir yapılacaklar listesi. Henüz öğrenmediğiniz konular var, lakin bir kurcalayın 🙂

See the Pen Todo list with AngularJS by Russbrown (@Russbrown) on CodePen.

Validasyonlu HTML FORM

See the Pen Angular.js – Web Form by Joe Watkins (@joe-watkins) on CodePen.

Leave A Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir