AngularJS’e Giriş 2
Selamlar;
Bugün AngularJS’e Giriş makalesinde tartıştığımız konulara devam ediyoruz.
AngularJS’de Filterlar: Aşağıda başlıca bahsedilecek filterlar belirtilmiştir.
- Currency.
- Filter.
- Lowercase.
- Order By.
- Uppercase.
Currency: Fiyat yanına yazılan para birimini belirler.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!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=5;Cost=20"> <p> <b>Toplam Sipariş Fiyatı:</b> {{ Product * Cost | currency }} </p> <p> <b>Toplam Sipariş Fiyatı:</b> {{ Product * Cost | currency:"€" }} </p> <p> <b>Toplam Sipariş Fiyatı:</b> {{ Product * Cost | currency:"TL" }} </p> </div> </form> </body> </html> |
İlgili ekran çıktısı aşağıdaki gibidir:
Order By: Belirli bir kayıt kümesini belirlenen kolona göre sıraya koymaya yarar. Aşağıdaki örnekte ilgili data kümesi isme göre sıralanmıştı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 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="~/Scripts/angular.min.js"></script> <title>AngularJS Başlangıç</title> <script> angular.module('myApp', []).controller('customerCtrl', function ($scope) { $scope.Customer_List = [ { name: 'Polat Olu', country: 'UK' }, { name: 'Cenkut Erensoy', country: 'USA' }, { name: 'Martin Hexin', country: 'USA' }, { name: 'Vera Nadi', country: 'Italy' }, { name: 'Khaan Elbir', country: 'India' }, { name: 'Engin Polat', country: 'Turkey' }, { name: 'Bora Kasmer', country: 'Turkey' }, { name: 'Ray Bann', country: 'France' }]; }); </script> </head> <body> <form id="form1" runat="server"> <br /> <div ng-app="myApp" ng-controller="customerCtrl"> <ul> <li ng-repeat="x in Customer_List | orderBy:'name'">{{ x.name + ', ' + x.country }}</li> </ul> </div> </form> </body> </html> |
İlgili ekran çıktısı aşağıdaki gibidir:
Kullanıcıdan girilen değere göre kayıt kümesinde filitreleme: “filter” ile belli modele göre eleme yapılmaktadır. Ayrıca “uppercase” filter’ı ile belirtilen alan büyük harfe çevrilir.
|
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 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="~/Scripts/angular.min.js"></script> <title>AngularJS Başlangıç</title> <script> angular.module('myApp', []).controller('customerCtrl', function ($scope) { $scope.Customer_List = [ { name: 'Polat Olu', country: 'UK' }, { name: 'Cenkut Erensoy', country: 'USA' }, { name: 'Martin Hexin', country: 'USA' }, { name: 'Vera Nadi', country: 'Italy' }, { name: 'Khaan Elbir', country: 'India' }, { name: 'Engin Polat', country: 'Turkey' }, { name: 'Bora Kasmer', country: 'Turkey' }, { name: 'Ray Bann', country: 'France' }]; }); </script> </head> <body> <form id="form1" runat="server"> <br /> <div ng-app="myApp" ng-controller="customerCtrl"> <p>Aranacak Kişi: <input type="text" ng-model="textToSearch"></p> <ul> <li ng-repeat="x in Customer_List | filter:textToSearch | orderBy:'country'"> {{ (x.name | uppercase) + ', ' + x.country }} </li> </ul> </div> </form> </body> </html> |
Örnek ekran çıktısı aşağıdaki gibidir:
Checkbox ile bir buttonu Model’e bağlı olarak Enable ve Disable yapma:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> <button ng-disabled="isEnable">Gönder!</button> </p> <p> <input type="checkbox" ng-model="isEnable">Button'u Enable/Disable Yap </p> </div> </form> </body> </html> |
Örnek ekran çıktısı aşağıdaki gibidir: isEnable değişkeni “true” ve “false” yapılarak “ng-disabled” directive ile “Gönder” buttonu aktif, pasif hale getirilir.
ng-show Directive: Bir yazıyı belli bir değere göre gösterme.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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="isCount=0"> <p> <p ng-show="isCount > 4">Bu Yazı Adet 4'den büyük ise Gözükür.</p> <p> Adet: <input type="number" ng-model="isCount"> </p> </div> </form> </body> </html> |
Button ve Click İşlemleri : Button tıklandığı zaman count değişkeni 1 arttırılır. Buna bağlı olarak {{ count }} değeri dinamik olarak 1 artar.
|
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> <script> var app = angular.module('myApp', []); app.controller('countController', function ($scope) { $scope.count = 0; }); </script> </head> <body> <br /> <div ng-app="myApp" ng-controller="countController"> <button ng-click="count = count + 1">Saydır!</button> <p>Toplam Tıklanma Sayısı: {{ count }}</p> </div> </body> </html> |
Function() ve “ng-show” directive: Aşağıdaki örnekde isim ve adres bilgisi “isShow” değişkenine göre button’a tıklanılarak “ng-show” directive’i sayesinde bir gösterilir bir gizlenir. Tıklanma anında dene() function’ı çağrı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 30 31 32 33 34 |
<!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('personController', function ($scope) { $scope.Name = "Bora Kaşmer", $scope.address = "Istanbul, Turkey" $scope.isShow = true; $scope.dene = function () { $scope.isShow = !$scope.isShow; } }); </script> </head> <body> <br /> <div ng-app="myApp" ng-controller="personController"> <p ng-show="isShow"> Name: <input type="text" ng-model="Name"><br /> <br /> Address: <input type="text" ng-model="address"><br /> </p> <p> <button ng-click="dene()">Dene</button> </p> </div> </body> </html> |
Dene Tıklanmadan Önce:
Dene Tıklandıktan Sonra:
Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.
bora abi işin bir konuda sorum olacaktı
phonegap cordova da bir videoyu stream etmek istersek bunun arkasında ne kullanabiliriz?
Selam Çağrı;
Alttaki Link’e bir göz atmanı tavsiye ederim. Plugreg cordova için güzel bir plugindir… Android ve IOS Destekler..
http://plugreg.com/plugin/nchutchind/Streaming-Media-Cordova-Plugin
İyi çalışmalar.
abi tam aradığım şeydi büyüksün
bir soru daha sormak istiyorum abi , xamarin ve phonegap(cordova) arasında bir seçim yapsanız hangisini tercih edersiniz ve nedeninide öğrenebilirmiyim?
Ben Xamarin’ciyim:) Bunu herkez bilir :) Ama phonegap’inde başka artıları yok değil.. Bir de Xamarin Bussines Pack’i yani Visual Studio ortamında çalışan versiyonu biraz tuzlu:)
Ama Android ve IOS ortamına ayrı ayrı kod yazmadan tek kod ile işi bitirmeni başarılı bir şekilde sağlıyor..
abi aynen :) .Xamarinin indie versionunda xamarin.forms a izin veriyor fakat sıkıntısı visual studio eklentisi yok dediğin gibi .Indie versiyonu yeterli olurmu xamarinin kendi idesi yeterlimi sizce?
Yani ben kullanmadım. Ama kullananlar yeterli olduğunu söylüyorlar..
Çok açıklayıcı ve anlatıcı olmuş. Gerçekten elinize sağlık. Çok farklı örnekleri de görmek istiyoruz