Posts Tagged :

model

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

    Join our Newsletter

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