AngularJS’e Giriş
Selamlar;
Öncelikle herkese iyi bayramlar. Bugünkü makalemde yeni başlayanlar için AngularJS’i anlatacağım.
VisualStudio 2015’de yeni boş bir MVC projesini yaratıyoruz. Ve Nugetten AngularJS Framework’ünü indiriyoruz.
Aşağıda ilk örnek maddlere halinde açıklanmıştır.
- Burada “ng-app” AngularJS framework’ünün çalışacağı alanı belirtir.
- “ng-model” directive’i input alana “Name” property’sini bağlar.
- “ng-bind” directive’i “<p>” elementinin innerHTML’ine “Name” değişkenini basar.
- “{{SurName}}”operationı da aynı “ng-bind” gibi ilgili “<p>” elementine “SurName” değişkenini basar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="~/Scripts/angular.min.js"></script> <title>AngularJS Başlangıç</title> </head> <body> <form id="form1" runat="server"> <br /> <div ng-app=""> <p> İsminizi Giriniz=>:: <input type="text" ng-model="Name"> </p> <p ng-bind="Name"></p> <p> Soyadınızı Giriniz: <input type="text" ng-model="SurName"> </p> <p>{{SurName}}</p> </div> </form> </body> </html> |
İlgili ekran aşağıdaki gibidir.
- AngularJS modulelü yani View Model AngularJS uygulaması altında aşağıda görüldüğü gibi “<script></script>” tagları arasında tanımlanır.
- “ng-app” directive’i application’ı temsil ederken, “ng-controller” directive’i controller’ı temsil eder. “ng-app”‘i bir çeşit namespace gibi düşünebiliriz.
- AngularJS controller’ı altında AngularJS uygulaması çalışır.
- “$scope” root yapısındaki en üst katmandır. Tüm tanımlamalar “$scope”‘dan sonra yapılır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="~/Scripts/angular.min.js"></script> <title>AngularJS Başlangıç</title> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.Name = "Bora Kaşmer"; $scope.Email = "bora@borakasmer.com"; $scope.Address = "Istanbul, Turkey"; }); </script> </head> <body> <form id="form1" runat="server"> <br /> <div ng-app="myApp" ng-controller="myCtrl"> İsim==>:<input type="text" ng-model="Name"> <br><br> Email=>:<input type="text" ng-model="Email"> <br><br> Address:<input type="text" ng-model="Address"> <br><br> <b> Müşteri Bilgileri:</b> {{Name + " " + Email + " " +Address}} </div> </form> </body> </html> |
İlgili ekran çıktısı aşağıdaki gibidir.
AngularJS’de sayıların kullanımı: Aşağıda görüldüğü gibi “ng-init” ile ilgili değişkenler tanımlanmış ve “{{}}” parantezleri içinde matematik işlemleri yapılmıştır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="~/Scripts/angular.min.js"></script> <title>AngularJS Başlangıç</title> </head> <body> <form id="form1" runat="server"> <br /> <div ng-app="" ng-init="ProductCount=5;Cost=20"> <p> <b>Toplam Fatura:</b> {{ ProductCount * Cost }}TL </p> </div> </form> </body> </html> |
İlgili ekran çıktısı aşağıdaki gibidir:
AngularJS’de Object kullanımı aşağıdaki gibi yapılabilmektedir:
Burda person sınıfına ait Name ve Age propertyleri tanımlanmıştır. Daha sonra ilgili sınıfın özellikleri ekranan basılmıştır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="~/Scripts/angular.min.js"></script> <title>AngularJS Başlangıç</title> </head> <body> <form id="form1" runat="server"> <br /> <div ng-app="" ng-init="person={Name:'Bora Kaşmer',Age:37}"> <p> <b>Kişi Tanımı:</b> {{ person.Name + " - " + person.Age}} </p> </div> </form> </body> </html> |
İlgili ekran çıktısı aşağıdaki gibidir:
AngularJS’de dizi kullanımı aşağıdaki gibidir:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="~/Scripts/angular.min.js"></script> <title>AngularJS Başlangıç</title> </head> <body> <form id="form1" runat="server"> <br /> <div ng-app="" ng-init="Player=['Bora KAŞMER','Engin Polay','Yusuf Akdoğan']"> <p>0. Sıradaki Oyuncu: {{ Player[0] }}</p> <p>1. Sıradaki Oyuncu: {{ Player[1] }}</p> <p>2. Sıradaki Oyuncu: {{ Player[2] }}</p> </div> </form> </body> </html> |
İlgili ekran çıktısı aşağıdaki gibidir:
AngularJS’de DataBind aşağıdaki gibi yapılmaktadır:
“ng-model” directive ile ilgili Html Element AngularJS’deki ilgili modele bağlanmaktadır. Model’de oluşacak bir değişiklik bunu kullanan tüm nesneleri etkilemektedir. Mesela aşağıda görüldüğü gibi fiyat bilgisi değiştiği zaman buna bağlı olan “cost” modeli değişmektedir. Toplam Fiyat’da “cost”‘u kullandığı için o da bu değişiklikten etkilenmektedir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="~/Scripts/angular.min.js"></script> <title>AngularJS Başlangıç</title> </head> <body> <form id="form1" runat="server"> <br /> <div ng-app="" ng-init="product=1;cost=5"> Ürün Adedi:<input type="number" ng-model="product"> <br /> <br /> Ürün Fiyatı:<input type="number" ng-model="cost">TL <br /> <br /> Toplam Fiyat: {{ product * cost }} TL </div> </form> </body> </html> |
İlgili ekran çıktısı aşağıdaki gibidir:
AngularJS’de Repeat İşlemleri:
Aynı “Foreach” yapısında olduğu gibi “ng-repeat”‘de de ilgili data kümesi tek tek gezilerek ilgili işlemler yapılır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="~/Scripts/angular.min.js"></script> <title>AngularJS Başlangıç</title> </head> <body> <form id="form1" runat="server"> <br /> <div ng-app="" ng-init="Friends=['Bora','Mehmet','Engin','Yusuf','Boğaç']"> <ul> <li ng-repeat="x in Friends">{{ x }}</li> </ul> </div> </form> </body> </html> |
Ekran çıktısı aşağıdaki gibidir:
AngularJS’de Controller’da Method Kullanımı:
AngularJs’de Controller kullanılacak model, parametre, değişken gibi yapıların tanımlandığı alandır. Aşağıda “personalController” içinde Per_Info() function’ı tanımlanmıştır. Bu function ile ilgili kişinin detay bilgileri alınmakta ve ekrana basılmaktadır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="~/Scripts/angular.min.js"></script> <title>AngularJS Başlangıç</title> <script> var app = angular.module('myApp', []); app.controller('personalController', function ($scope) { $scope.Name = "Bora Kaşmer"; $scope.Email = "bora@borakasmer.com"; $scope.Address = "İstanbul"; $scope.Per_Info = function () { return $scope.Name + " " + $scope.Email + " " + $scope.Address; } }); </script> </head> <body> <form id="form1" runat="server"> <br /> <div ng-app="myApp" ng-controller="personalController"> İsim:<input type="text" ng-model="Name"> <br> <br /> Email:<input type="text" ng-model="Email"> <br> <br> Address:<input type="text" ng-model="Address"> <br> <br> <b>Hakkımda :</b> {{Per_Info()}} </div> </form> </body> </html> |
İlgili ekran çıktısı aşağıdaki gibidir:
Geldik bir makalenin daha sonuna. AngularJS’in devamını ilerki makaleler de hep beraber ele alıcağız.
Yeni bir makalede görüşmek üzere hoşçakalın.
elinize sağlık
Teşekkürler Buğra;
Devamı da gelicek.
Merhaba,
Yazınızı büyük bir heyecanla okudum, çok faydalı bir yazı dizisine benziyor. Yazı dizinizin devamını dört gözle bekliyorum. Özellikle beklediğim konular; hash yapısı, ajax ve json kullanımı.
Elinize sağlık.
Teşekkürler Selçuk.
Ajax ve Json kullanımı için alttaki webinarımı izlemeni öneririm.
http://www.borakasmer.com/webinar-angular-jse-giris/
Aaa! Süpermiş bu. Akşam izleyeceğim. Çok teşekkürler
Bora hocam teşekkür ederim az javascript bilgim var buna rağmen gayet anlaşılır bir yazı oluş. Size şunu sormak istiyorum ben jquery veya angularjs bilmiyorum az biraz javascript bilgim var sizce jquery vee angularjs ten hangisini öğrenmeliyim ya da önce javascript mi öğrenmeliyim ?
Selam Ahmet;
Öncelikle öğrenmek istediğin konular birbirinden bağımsız. Yani amaçları farklı. Öncelikle Jquery eğitimi al. Alttaki link den Jquery için güzel bir giriş yapabilirsin.
https://www.acikakademi.com/portal/egitimler/html-css-js.aspx
Sonra istersen Angular.js framework’ünü de inceleyebilirsin.
İyi çalışmalar.
VS 2015’te MVC Dosyası açamadım yardımcı olabilirmisiniz? VS 2015’e yeni geçiş yaptım da.
Selam Umut;
MVC dosyası derken projesini mi açamadın?
Mail adresim bora@borakasmer.com. Istersen burdan bana mail atabilirsin. Mümkün olduğunca yardım etmek isterim.
Hocam sitenizi bugün gördüm, gayet özgün ve kaliteli makaleler var. Elinize sağlık.
Teşekkürler Ekrem..
merhaba hocam bir sorum olacak angularjs ve angular4 arasindaki temel fark nedir
Öncelikle 2sinin hiç alakası yok diyebilirim. Angular 5 sonuncusu 5 :) Bir framework. Hem çok hızlı, hem de çok fazla yapı ile entegre çalışıyor. AngularJS ise çok daha basit az kullanıcılı sayfalar için ideal diyebiliriz.
merhaba angular js kullanilacak yapilacak olan bir web sitesine ihtiyacim var
benimle baglantiya gecermisiniz bora bey
muratdmn@hotmail.com
iç içe iki init kullanılırmı? init ile parametreli fonksiyon nasıl çağırırız?