Haz.24

AngularJS (1.3 / 1.5) Eğitimi: AngularJS ve Bootstrap ile Template Kullanarak Resonsive SPA Uygulaması Örneği

Bu makalemizde yapacağımız SPA uygulamasında AngularJS’yi zaten zorunlu olarak kullanacağız. Ek olarak VIEW tasarımlarını düzgün tasarım ve responsive bir şekilde hazırlamak için Bootstrap kullanacağız. Ek olarak MODEL olarak da bir JSON dosyasından veri okuyacağız. $routeProvider servisi ile yapacağımız uygulamaların çalışabilmesi için uygulamanın sunucu tarafında host edilmiş olması gerekiyor. Veya lokal sistemde WAMP veya XAMMP programlarla sanal sunucu oluşturulup localhost ile test ediliyor olması gerekir.
AngularJS

Haz.24

AngularJS (1.3 / 1.5) Eğitimi: AngularJS $http Servisi ile Çalışmak

$http servisi; uzak sunuculardan veri okumak için kullanılır. Veriler ya JSON ya da Object türünde gelir. Birkaç uygulama örneği ile $http servisini kullanmayı öğrenelim…

IMDB’de Film Arama ve Detayları Gösterme Uygulaması (GET)

Örneğimizde Bootstrap ile AngularJS’yi bir arada kullanacağız. Basit bir arama çubuğu yapıp, bu arama çubuğu ile IMDB film sitesinden API servisi ile ( omdbapi ) film başlığına göre arama yapıp, film ile ilgili detayları çekip sayfayı yenilemeden AJAX mantığı ile HTML5 sayfamızda göstereceğiz.
AngularJS

Haz.24

AngularJS (1.3 / 1.5) Eğitimi: AngularJS ile Bootstrap Kullanımı

Şüphesiz ki modern bir web sayfası tasarlıyorsanız aynı anda hem Bootstrap hem de AngularJS kullanıyor olacaksınız. Kitap boyunca da asıl hedeflediğim mantık buydu. Bu nedenle basit bir örnekle AngularJS içinde Bootstrap’ı nasıl kullanabileceğinizi örnek üzerinde görelim. Örneğimizde Bootstrap ile bir tablo oluşturup, içinde veri yazdıralım… Somut olarak bir video listesi yapıp, videonun resmini, açıklamasını, kaç adet izlendiğini ve izleme sayfasına gitmek için linkini oluşturup bağlantısını tanımlayacağız.
AngularJS

Haz.24

Haz.24

AngularJS (1.3 / 1.5) Eğitimi: Filters (Filtreler)

Filtreler, AngularJS’de verileri formatlamaya, dönüştürmeye, sıralamaya ve bunun gibi bir takım işleri yapmaya yarayan hazır metotlardır. Bu konuyu örnekler üzerinden inceleyelim. Aşağıdaki gibi basit bir HTML sayfa şablonumuz olsun.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
angular.module('filtreler', []).controller('ctrl', function($scope) {
	// $scope değişkenleri buraya…
});
</script>
<div ng-app="filtreler" ng-controller="ctrl">
<h1></h1>
</div>
AngularJS

Haz.24

AngularJS (1.3 / 1.5) Eğitimi: Direktifler (Directive)

Direktifler, AngularJS’nin en başta gelen temel bağlantı elemanlarından biridir. HTML5 sayfa yapısında yer alan elementlere direktifler ile erişilir ve yönetilir. Direktifler birer attribute olarak tanımlanır. Bazıları değer alabilirken bazıları sadece anahtar kelime olarak bile tanımlama yapmak için yeterlidir. Direktifler ng- ön eki ile başlar ve diğer isimlerle direktifler türetilir. Temel olarak AngularJS’deki direktifler aşağıdaki tabloda verilmiştir.
AngularJS

Haz.24

AngularJS (1.3 / 1.5) Eğitimi: Şablon (Template), Modüller (Module) ve Kontroller (Controller)

MVW modeline göre Controller, yani VIEWMODEL ayrı tutulmalıdır. Bu nedenle AngularJS komutlarımız harici bir kaynaktan HTML5 sayfası içine çekilerek (yine js dosyası) kullanılmalıdır. Şimdi basit bir şablon yapısı ile AngularJS’de MVM modeline göre bir Template, Controller ve Module kavramları nelerdir ve oluşturma mantıklarına bakalım. İlerleyen konularda da bol bol pratik yapacağız.
AngularJS

Haz.24

Haz.24

Haz.24

AngularJS (1.3 / 1.5) Eğitimi: AngularJS MVW (Model, View, Whatever Works For You) Tasarım Mimarilerini Anlamak

Programlama dillerinde, özellikle büyük çaplı projelerde iş karmaşıklığına çözüm bulmak amacı ile Nesne Yönelimli Programlama tekniği geliştirilmişti. OOP, artık profesyonel programlama dillerinde bir standart haline gelmiştir. Ancak iş geliştirme sürecinin daha da hızlanması, daha kolay şekilde yapılması ve projelerin sürdürülebilir olmasını sağlamak amacıyla daha da farklı tasarım mimarileri geliştirilmiş, geliştirilmeye de devam etmektedir.
AngularJS