AngularJS

AngularJS – Factory 638 479 mezo

AngularJS – Factory

Merhaba arkadaşlar

Bu yazıyı okumadan önce hemen Servis makalesini okuyup devam ederseniz sizin için daha yararlı olacağını düşünüyorum.  Burdan Okuyun hemen. 😉

Factory Angularjs nin dış işleri bakanıdır. Yani dış bağlantılarla alakalı olan işleri yönetmemizi sağlar. Yani web servis çağrılarımızı bu Factory ler üzerine yazarak tüm Controller lar üzerinden rahatça erişebilir ve kullanabiliriz. Servisler makalesınde yaptığımız tanımın aynısını factory içinde yapabiliriz yani hem kodların kolay okunması hemde test edilmesini kolaylaştıran javascrıpt dosyalarıdır. AngularJS e başlayanlar bu iki yapıyı oldukça fazla karıştırırlar bu karışıklığı önlemek için bu oyunu bozuyoruz 🙂

 

Örnek üzerinde hazır github servisi çağırdım 🙂 angular yazıp aratın bakalın ne olacak  🙂

 

 

Umarım Yararlı Olur.
Bilgiyle Kalın.
M.Zeki OSMANCIK

AngularJS – Services 333 302 mezo

AngularJS – Services

Merhaba arkadaşlar
AngularJS de servisler hem kodların kolay okunması hemde test edilmesini kolaylaştıran javascrıpt dosyalarıdır. Servisler genelde kod içersinde kullanacığımız bazı methodlar için yazabiliriz. Örneğin bir hesaplama yapması gereken bir methodu servis olarak oluşturup Controller üzerinde birden fazla yerde kolayca kullanıkmasını mümkün kılabiliriz. AngularJS servis ve factory yi kullanarak Separation of Concerns konseptini desteklemektedir.
Peki Separation Concerns nedir ? Bir yazılımı oluşturan kodların katmanlara ayrılmasıdır. Web sitemizin veritabanından bir veri alıp bize sunması için gerekli olan her bir işlemi ayrı ayrı konumlandırmak da diyebiliriz ; veri tabanına bağlanan kod ayrı , onu alıp işleyen kod ayrı , son olarak web sayfası üzerinde gösteren kod ayrı yerlerde katmanlar halinde yazılır ki bu katmanları okuması hata tespiti yada test kodlarımızın çalışması kolaylaşsın. Bu konsepte en uygun örnek MVC Design Pattern dir.
Konumuza geri dönecek olursak AngularJS ile oluşturulan bir projede servis iç işlevlerin birden fazla controller üzerinden çağırılabilmesi için oluşturacağımız klasik javascript metotlarıdır.
Hemen kısa bir örnekle merakımızı dindirip. Örneği inceledikten sonra hemen Factory yazısınıda okursanız sizlere çok katkısı olacağını umuyorum.

Umarım Yararlı Olur.
Bilgiyle Kalın.
M.Zeki OSMANCIK

AngularJS – Dinamik Değişken 980 400 mezo

AngularJS – Dinamik Değişken

Merhaba arkadaşlar
Bildiğiniz gibi AngularJS de html ile js dosyası arasındaki bağı scope ile sağlıyorduk. Yani controller üzerinde tanımladığımız bır scope nesnesini html üzerinde {{}} veya ng-bind ile çağırabiliyoruz. Bahsettiğimiz değişkenler sabit tanımlanıp görüntülenenler. Bir de JS tarafında tanımlayabildiğimiz değişkenler var ki bu yazımızın konusuda budur zaten 🙂

Hemen HTML kodlarımızı yerlestirelim
[codebox 1]

ve Controller kodlarımız
[codebox 2]

Burada tanımladığımız $scope.dynamicVariable = {}; objemiz içersine istenilen miktarda değişken tanımlanabilir ve HTML tarafından da {{dynamicVariable[company.CompanyID]}} şeklinde kullanabiliyoruz.

ve AngularJS ile dinamik değişkenimiz hayırlı olsun 🙂 Bu da ornegimiz.

Umarım Yararlı Olur
Bilgiyle Kalın
M.Zeki OSMANCIK

AngularJS – Basit Search Filter 1024 789 mezo

AngularJS – Basit Search Filter

Merhaba arkadaşlar
Bu kez de AngularJS ile çooooooook ama çok basit şekilde listelediğimiz nesneler üzerinde bir Text input ile nasıl arama yapabiliriz sorusunun cevabını 2 satırda bir fiddle’da paylaşmak istiyorum.

Bu datayı AngularJS ile Controller içersinde oluşturalım ve bir $scope değiskeni içersine şu şekli tanımlamamız gerekiyor .
[codebox 2]

ve her zaman olduğu gibi HTML kodlarımızı bir oluşturalım ve listeme işlemini gerçekleştirelim.
[codebox 1]

Bu asamadan sonra JSON nesnemizin içersindeki elemanların ekranımıza listelendiğini görebileceksiniz.

İş arama kısmına geldiğinde ise HTML de de şu şekli bir değişiklik yapmamız gerekmekte.

[codebox 3]

Burada kullandığımız FILTER bizim listelediğimiz JSON nesnesi ya da array içersinde input üzerine tanımladığımız ng-model yardımı ile filtreleme yapıp $scope.companyList adında ki objeye atama yapar böylelikle siz de listeye abc yazdığınızda listedeki abc yi bularak $scope.companyList nesnesine atamasını yaparak bizlere gösterir 🙂

Benim yorumlamam bu kadar 🙂
Iste bu kadar basıt 🙂
Örnek kodu Fiddle’dan inceleyebilirsiniz.

Umarım Yararlı Olur
Bilgiyle Kalın.
M.Zeki OSMANCIK

Angular JS – Model 1024 576 mezo

Angular JS – Model

model

Biliyorum Model denilince aklınıza yukarıdaki ablalar geliyor ama hayaller Viktoriya Sikrıt  hayatlar Angular JS ne yapalım  !! Konuyla alakası bile yok tamamen ilgi çekmek için kullandım bu fotoğrafı. Bu model öyle bir model ki bu ablalar kadar güzel olmasa da angularjs ile hayatı kolaylaştıran güzel bir yapıdır şöyle ki :

Bob_at_EaselModel aslinda bir boyadir !!

“Ne diyon lan sen değişik? AngularJS anlatıyordun ne alaka boya badana!” diyebilirsiniz ama Model bir boyadır. Şimdi alakaya çay demleyelim.

MVC yi anlatabileceğim en iyi metafor belki de budur ve bundan sonraki kısımda modeli daha iyi anlayabileceğinizi düşünüyorum.

MVC deki

Model = Boya , Controller = Ressam , View = Tual olarak düşünürsek :

Yani son kullanıcıya bir görüntü, bilgi vb. şeyleri bir web sitesi üzerinde göstermek için öncelikle bu bilgileri ve görüntüleri bir yerden sağlamamız gerekiyor. İste bu verileri DB veya servislerden sağlayan ve View üzerinde Controller yardımı ile gösterilmesini sağlayan yapıya MODEL diyoruz…

Aynı yandaki Bob amcamızın boyayı alıp tuval üzerine küçük yalnız ağaçlar, mutlu bulutlar yapıp resmini tamamlayıp göstermesi gibi bir şey işte 🙂

Şimdi bakalım model denen şey AngularJS içersinde ne gibi bir role sahip bakalım View i nasıl boyayacak ?

Yine bir HTML dosyamız var ve bunun üzerine AngularJS kütüphanesini ve js dosyamızı ekledik ve ng-model nesnesini bu HTML dosyamız içersinde kullandık.

[codebox 1]

 

Burada kullandığım mydata benim modelim olmuş oluyor ve sayfa üzerinde bir veriyi alıp başka bir yere sayfayı yenilemeden, durulamadan, kurulamadan aşağıdaki resimde görüleceği üzere yazabiliyor. Controller içersinde bir tanımlama yapmadan bu şekilde kullanmak mümkün. Bu demektir ki biz controller üzerinde bir servisten ya da bir işlemden elde ettiğimiz değeri mydata adlı modele eşitlersek bu bizim HTML sayfamız üzerinde gösterilecek anlamına geliyor yani tuval üzerine boyamız dökülecek ve resim ortaya çıkacak.

model2

Controller üzerine çok basit bir işlem yaparak bu mydata değerini sayfa üzerinde güncellemeye çalışırsak.

[codebox 2]

Ve bunu HTML üzerinden tetiklemek istersek

[codebox 3]

Sonuç olarak çıktımız şu şekilde olacaktır

 model3

Burada olan olay şu: controller üzerine bir metot yazarak ng-model tarafından kullanılan nesneyi değiştirdim ve butona tıkladığımda anında View üzerinde görüntülemeye başladım. Bu string yerine servisten gelen bir veri olabilirdi ya da bir işlem sonucu elde edilen bir veri olabilirdi.

Umarım Yararlı Olur

Bilgiyle Kalın

M.Zeki OSMANCIK

Angular JS – View 478 326 mezo

Angular JS – View

Merhabalar

Angular JS nin V’si olan “View for Vendeta” ile devam ediyoruz. View denilen yapı aslında HTML dosyalarından baska bir şey değildir.Bildiğiniz gibi AngularJS için şöyle böyle demiştik ,sonra kendisinden Single Page Application olarak bahsetmiştik. Buradaki mantık sabit bir index.html sayfası ve içerisinde sayfalarımızın içeriği ile değişen küçük, leziz, gerçek html parçacıkları ile donatılmış, harika bir tat.

Şimdi isterseniz bu View olayı nasıl çalışıyor sayfa üzerinde nasıl gösteriliyor bir göz atalım…

Öncelikle gerekli olan malzemeleri sayıyorum

1 adet Angularjs kütüphanesi buradan temin ediyorsunuz

1 adet Angularjs Route kütüphanesi onuda buradan temin ediyorsunuz

1 adet Notepad++ o sizde var zaten olmayanı dövüyoruz 🙂

Evet tarife geçelim artık…

Index.HTML dosyanızı oluşturarak içersine şu kodları ekliyorsunuz.

[codebox 1]

Daha önceki Controller makalesindeki indexten tek farkı bir fazla kütüphane ve bir de ng-view denen bir dalga motor eklemişiz.

Ng-view  bizim sayfa göstericimiz  yani ASP.Net de ContentPlaceHolder vardı aynı ondan işte 🙂  ng-view üzerinde gösterilecek olan küçük html parçaları yani sayfa içerikleri ,ngroute kütüphanesini kullanarak oluşturacağımız config nesnesi üzerindeki yönergeleri takip ederek ng-view üzerinde değişirler.

O zaman bir config nesnesi oluşturalımda neymiş bu olay görelim.

[codebox 2]

Görüldüğü üzere module tanımlarken içerisine mutlaka ngRoute tanımlıyoruz ki config oluşturduğumuzda “bu ne lan?”  demesin.

Daha sonra config içersinde $routeProvider.when() metodunu kullanıp sayfa url si sonundaki parametreleri yazarak hangi view gösterilecek bu view in controller i ne olacak belirtebiliyoruz.

Sonrasinda buda Controller im bunu zaten biliyorsunuz bilmiyorsanız “o ne la?” diyorsanız buraya bakınız.

[codebox 3]

Bu arada yukarıda yazmış olduğum config ve controller tek bir JS dosyası içersine yazılıyor yani en azından ben şuanlık öyle yaptım sonra dosya yapısı ve klasörleme yöntemlerinide anlatacağım.

Son olarak eklemiş olduğum iki View  içersine aynı şeyleri yazdım oda şöyle ki :

[codebox 4]

Ve çalıştırdığım zaman aldığım çıktıda burada 🙂

view2 view1

Sonuç olarak 2 değişik sayfayı bir index.html içersinde gösterdik ve sayfa değişimlerini sağladık.

Umarım Yararlı Olur

Bilgiyle Kalın

M.Zeki OSMANCIK

Angular JS – Controller 657 486 mezo

Angular JS – Controller

Selam Arkadaslar

Yazmaya uzuuun bir ara verdikten sonar yine sizlerleyim 🙂 Angular JS konusuna devam edeceğiz. İlk yazımda AngularJS nedir mantığı nedir kısaca bahsettik. Bu yazıda ise MVC nin C sinden bahsedeceğim.

Controller

Controller MVC nin View’i yani son kullanıcının gördüğü ile model yani business logic katmanlarının iletişime geçtiği katmandır.  Yani kod yardimi ve model katmanı ile elde ettigimiz bir veriyi HTML kodlarına gönderme işini üstlenir. Aşağıdaki diagram bize Controller’ın görevini anlamakta biraz daha yardımcı olacaktır.

angularJs_mvc_framwork

Şimdi gelin isterseniz küçük bir örnek ile Controller ne işe yarıyor görelim. Öncelikle JS dosyaları ile çalışacağımızı belirtmek isterim herhangi bir editöre ihtiyacınız olmayacaktır Notepad++ işinizi görecektir. Tabi AngularJS kütüphanesinide buradan indirip eklemeyi unutmayın lütfen.

HTML dosyamizi asagidaki gibi oluşturuyoruz.

[codebox 1]

Ardından birde buradaki ng controller karşısında yer alan Controller1 adlı dosyamızı ekleyip içersine şu kodları eklemeliyiz.

[codebox 2]

Eklemiş olduğumuz ng-controller tagı ile html üzerinde çalışacak olan AngularJS kodlarının nereyi hedef alarak metotları araması ve çalıştırması gerektiğini belirtmiş olduk.

Bu yöntem ile bir angularjs uygulamasının içersine bir controller tanımlayarak bu controller içersine yazdığımız her kodu ve aldığımız her değeri html elemanlari üzerine aktarmamızın ne kadar kolay olduğunu görmüş olduk . Son olarak bu işlemin çıktısı aşağıdaki gibi olacaktır. Butona tıklandığında controller içersindeki metot çalışacaktır.

angularController2

Umarım yararlı olur

Bilgiyle Kalın

M.Zeki OSMANCIK

Angular JS Nedir? 980 400 mezo

Angular JS Nedir?

Merhaba arkadaşlar
AngularJS ile ilgili yazı dizisine başlamış bulunmaktayız 🙂 Haydi hayırlı olsun 🙂
AngularJS google tarafından desteklenen bir Javascript MVC(Modal View Controller) kütüphanesidir.
Modal : Verinin tutulduğu nesnelerdir ve ilişkili olduğu View nesnesini etkiler.
View : Template in yani görünümün tutulduğu nesnelerdir.
Controller : Modal ve View nesnelerini bağlayan nesnedir. İşlemler kontroller Controller üzerinde yapılır

AngularJS kendi kütüphanesinden başka kütüphanelere bağımlı değildir. Bunun için sadece AngularJS kütüphanelerini ekleyerek
tek sayfa uygulamaları geliştirmeye imkan sağlar. AngularJS’in en önemli özelliği çift yönlü olmalarıdır.
Yani modal’da olan değişiklik view’a , view’da olan değişiklik modal’a yansır. Directive’ler ile
yeni html tag’larının geliştirilmesine de olanak sağlar. Kodlar kısalır karmaşa ortadan kalkar.
AngularJS kütüphanesi yaklaşık 100kb boyuttadır. https://angularjs.org
AngularJS çeşitli bileşenleri içeren modüller şeklinde oluşturulmuştur. Bu modüller; Directive’ler Service’ler
Provider’ lar Type’lardır.

AngularJS Kütüphaneleri
ng  : AngularJS in temel modüllerini içeren kütüphanedir. Varsayılan olarak yüklenir.
ngRoute : AngularJS uygulamaları içersinde URL yönetimi yapmak için kullanılır. (angular-route.js)
ngAnimate : AngularJS uygulamalarında animasyon özelliklerini sayfalarımıza eklemek için kullanılır. (angular-animate.js)
ng-Cookie : Cookie yönetimi için kullanılır. (angular-cookies.js)
ng-Touch : Mobil tarayıcılar için geliştirilen sayfalarda kullanılabilir. (angular-touch.js)
ng-Mock : Testlerde mock işlemi yapmak için kullanılır.

Şimdi gelin size basit bir örnek yapalım 🙂

HTML Sayfamız
[codebox 1]

JavaScript Dosyamız
[codebox 2]

Örneğe buradan ulaşabilirsiniz 🙂

Bilgiyle Kalın
M.Zeki Osmancık

    Join our Newsletter

    We'll send you newsletters with news, tips & tricks. No spams here.