-

Angular Js Routing

Angular Js’in tek sayfalı uygulamalar için uygun olduğundan daha önceki yazılarımda bahsetmiştim. Anck uygulama karmaşıklaştıkça detay ya da  farklı sayfaya gitme gibi ihtiyaçlar doğabilir. Aynı sayfada farklı view ler göstermeyi Angular Js de  Routing yapısı sağlıyor. Aynı layout içerisinde ihtiyaca göre faklı html sayfaları, farklı controller ların çalıştırılması Routning yapısı ile sağlanabilir.

Layout görüntüsünün olduğu ana sayfamızda ng-view sayesinde farklı html lerin gösterilmesini sağlıyoruz.  Core angular scripti içerisinde routing bulunmaz, routing için de script eklemek gereklidir. Angular js sitesinden aldığım aşağıdaki script bloğunu uygulamaya ekliyorum.

<script src=”//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js”></script>

Angular Js Routing kullanılacak ise js dosyası içerisinde routing ile ilgili ayarlar eklenmelidir. Module aşağıdaki gibi tanımlanır;

var countryApp = angular.module(‘countryApp’, ['ngRoute']);

Önceki yazılarımda gösterdiğim ülkeler uygulamasnın devamı olarak; Ülke listesi gösterildikten sonra  ülkeye basıldığında detayını gösterecek şekilde uygulama geliştiriyor olacağız.  $routeProvider üzerinden konfigürasyonlar yapılır, .when ile hangi durumda hangi htlm ve controllerın çalıştırılacağı belirlenir. Controllerı $routeProvider ile vermek zorunda değiliz, önceki örneklerde olduğu için html içerisine de yazabiliriz .when ile belirlenen case ler dışında bir  case olması ihtimaline karşılık .otherwise yazılır ve default routing belirlenmiş olur. ‘/’  ana sayfayı ifade eder, yani belirlenenler dışında birşey url’e yazılırsa ana sayfaya yönlendirileceği anlamına gelir.

Angularrouting1

.when(‘/:countryName’)  kullanımı parametrik yapıyı işaret eder,” :” den sonra girilen değer router’a gönderilen parametreyi ifade eder, daha sonra bu değer ilgili controller içerisinde $routeParams.countryName şeklinde elde edilip kullanılır. Parametre uygulamadaki  tıklanan ülke ismidir.

Hangi durumda nasıl davranılacağına karar verildikten sonra ilgili Controller lar eklenmelidir. CountryListCtrl’de  daha önce $http serviste kullandığımız,internette rastgele bulduğum rest servisi(https://restcountries.eu/rest/v2/all/) çağırıp ülkelerin listelenmesi sağladım.

Angularrouting2

Detayı gösteren controller da yine yukardaki servisin parametre alan halini kullarak ekledim. Ülke adına göre ülkenin detayını gösteren servis; https://restcountries.eu/rest/v2/name/{name}?fullText=true  dir, {name} yerine ülke adını yazıp tarayıcıdan arattığınız zaman, aşağıdaki gibi json formatında data gelecektir.

https://restcountries.eu/rest/v2/name/Afganistan?fullText=true

[{“name”:”Afghanistan”,”topLevelDomain”:[".af"],”alpha2Code”:”AF”,”alpha3Code”:”AFG”,”callingCodes”:["93"],”capital”:”Kabul”,”altSpellings”:["AF","Afġānistān"],”region”:”Asia”,”population”:27657145,”latlng”:[33.0,65.0],”demonym”:”Afghan”,”area”:652230.0,”gini”:27.8,”timezones”:["UTC+04:30"],”borders”:["IRN","PAK","TKM","UZB","TJK","CHN"],”nativeName”:”افغانستان”,”numericCode”:”004″,

“currencies”:[{"code":"AFN","name":"Afghan afghani","symbol":"؋"}],”languages”:[{"iso639_1":"ps","iso639_2":"pus","name":"Pashto","nativeName":"پښتو"},{"iso639_1":"uz","iso639_2":"uzb","name":"Uzbek","nativeName":"Oʻzbek"},{"iso639_1":"tk","iso639_2":"tuk","name":"Turkmen","nativeName":"Türkmen"}],”translations”:{“de”:”Afghanistan”,”es”:”Afganistán”,”fr”:”Afghanistan”,”ja”:”アフガニスタン”,”it”:”Afghanistan”,”br”:”Afeganistão”,

“pt”:”Afeganistão”},”flag”:”https://restcountries.eu/data/afg.svg”}]

{name} bilgisi $routeParams.countryName den doldurulur. Daha önce $routeProvider:countryName parametre olarak geçilmişti. Ülke adına göre gelen datalar $scope.country nesnesine atılır ve sonrasında country nesnesinden istenen bilgiler çekilecektir(contry.name gibi). Sonuç olarak ülke detayını göstere controller aşağıdaki gibi olacaktır.

Angularrouting3

Ülke detay bilgisini farklı bir servisten almak yerine tüm ülkeleri getiren servis üzerine filtreleme yaparak da bulunabilirdi, bunun için filter() metodu kullanılır. Bu yöntemde dataların hepsini getirip daha sonra filtreleme yapılacağından daha maliyetli bir yöntem olacaktır. Uygulamayı ilk denediğimde aşağıdaki gibi denemiştim, daha sonra parametreli servisi bulunca yukardaki haline çevirdim. Merak edenler için kaynak kod içerisinde filter kullanan controllerı da bıraktım.  İnternette gördüğüm bazı örneklerde aynı servis kullanılacaksa ortak bir fonksiyona yazıldığını ya da cache leme yönteminin kullandığını da görmüştüm. Ben bu yazımda o konulara girmedim.

Angularrouting4

Ülke listesini ve detayını getiren controller ları yazdıktan sonra sıra geldi bunların html sayfalarını yazmaya, normal bir visual studio projesi olarak açmış olsaydım yeni bir .html sayfası ekleyerek devam ediyor olurdum, kodları codepen.io da yazdığımdan yeni sayfa eklemek yerine templateler oluşturuyorum. Bu templateleri html sayfasının sonuna ekledim.

Angularrouting5

Angularrouting6

layout sayfası, Controller, html sayfaları- template leri de eklediğimize göre uygulamayı çalışır hale getirmiş olduk. Codepen de ekranı debug modda açıyorum, sayfa ilk yüklendiğinde ülke listesini getirecektir;

Angularrouting7

Herhangi bir ülke adına tıkladığımızda ise ülkenin detayı gelecektir. Dikkat ederseniz browserdaki link değişerek  önceki linke ek olarak  #/Algeria şeklinde devam etmiştir. Sayfa tasarımı çok iyi değil ama dataları getiriyor :)

Angularrouting8

Listeyi gösteren sayfaya geri dönmeden sadece url deki ülke adını değiştirerek ülke detayının gelmesini sağlayabiliriz, browser daki url de Algeria yerine Afganistan yazıyorum ve Afganistan ile ilgili detay gelir;

Angularroutin98

Browsera herhangi birşey yazdığımda ise beni ana sayfaya yönlendirecektir çünkü .otherwise ile bunu sağlamıştım;

Angularroutin10

Kodların tamamına aşağıdaki codepen linkinden ulaşabilirsiniz.

http://codepen.io/deryagunduzozmen/pen/ZeyOzg/

Kaynaklar:

  1. https://restcountries.eu/
  2. http://codepen.io/
  3. http://csharp-video-tutorials.blogspot.com.tr/2016/02/angularjs-routing-tutorial.html
  4. https://curran.github.io/screencasts/introToAngular/exampleViewer/#/
  5. https://app.pluralsight.com/paths/skills/angular-js

Angular Js’de $Http Kullanımı, Filtreleme ve Sıralama İşlemleri

Angular Js $htpp servis, uzak http serverlar ile bağlantı kurulmasını sağlar. Server ile iletişim kurup istek yapar ve sonucunda data gelir. $http servis tek bir input objesi alır, kullanımı aşağıdaki gibidir.

$http({

method: ‘GET’,

url: ‘https://restcountries.eu/rest/v2/all/’

});

Yukarıdaki uzun kullanım yerine get, post, put, delete için kısayol kullanımları bulunur. Kısayol kullanımı $htpp.get() şeklindedir.  $http servis promise objesi döner yani  fonksiyon asenkron olarak çalışır ve data tek seferde gelmez. Bu nedenden ötürü gelen datayı bir objeye direkt setleyemiyoruz, bunun yerine then() metodu kullanılır. Then() metodu başarılı ve başarısız olduğu durumlarda alacağı aksiyonu içeren fonksiyonları parametre olarak alır.

$htpp servis kullanılacak ise controller oluşturulacağı aşamada, $scope parametresinin yanına $http parametresi eklenerek tanımlanır.

countryApp.controller(‘CountryCtrl’,function($scope,$http){}

$http kullanımı ile ilgili göstereceğim örnek için ülke listesi getiren bir servis buldum, bunu örnek olması açısından internette rastgele aratarak buldum. Ülke listesi getiren servis aşağıda göründüğü gibi json formatında data getirmiş olacaktır;

angular0

Ülke listesi getiren servisi aşağıdaki gibi çağırıyorum;

$http.get(‘https://restcountries.eu/rest/v2/all/’).then(onSuccess, onError);

Tabi ki onSucess ve onError metodlarını da tanımlamam gerekiyor. Bunların içerisinde başarılı ve başarız olduğu durumda alınması gereken aksiyonları belirtiyorum.

Js kodu aşağıdaki gibi olacaktır;

angular1

Datayı servisten çekip countries objesine setledikten sonra, servisten gelen ülke ismi, başkent, nüfus gibi bilgileri bir tabloda göstermeyi hedefliyorum. Bu bilgileri gösterirken kolonun üzerine tıklandığında sıralama işlemi yapması için servisten gelen ülke ismi kolon başlığını link olarak aşağıdaki gibi ekleyip, linke basıldığında sortField=’name’ ifadesini kullarak  isme göre sıralamasını sağlıyorum. Ayrıca servisten gelen ülkeler arasında arama yapabilmek için custom filtreleme yapıyorum. Ekrana bir textbox ekleyip bunu query ismi ile modelliyorum, döngünün içinde filter:query dediğimde textboxa yazılan değere göre filtreleme yapmış olur. Bütün kolonlar arasında arama yapması istenirse ng-model=”query” denmelidir, belirli kolonlar arasında arama yapılması isteniyorsa da ng-model=”query.name” şeklinde belirtilebilir. Döngünün yazıldığı yere data ilk yüklendiğinde belirli bir alanın sıralı gelmesi istenirse orderBy kullanılabilir, orderBy:’name’ olarak kullanılabilir, bunun defaultu ascending dir(artan), orderBy:’-name’ dendiğinde ise descending(azalan) olacaktır. Bu örnekte ben custom sıralama kullandım. orderBy hakkında detaylı bilgisi buradan alabilirsiniz.

angular2

angular3

Çıktı;

angular4

Örneğin kodlarının tamamına aşağıdaki codepen linkinden erişilebilir;

http://codepen.io/deryagunduzozmen/pen/gmMOxW

 

Kaynaklar:

  1. https://docs.angularjs.org/api/ng/service/$http
  2. http://csharp-video-tutorials.blogspot.com.tr/2015/11/http-service-in-angularjs.html
  3. https://restcountries.eu/

 

Angular Js’de Fonksiyon Çağrısı Yapma

Önceki blog yazımda ng-repeat direktifi kullanarak listeleme ile ilgili örnek göstermiştim. Örneği biraz daha geliştirerek listeye eleman ekleme, listeden eleman çıkarma işleri yapabilmek için fonksiyon çağırma ile ilgili örnek gösteriyor olacağım…

names ismindeki listeye eklemiş olduğum elemanları ng-repeat direktifi ile ekrana listeleme işlemi yapmıştık. Listenin altına bir textbox ve buton ekliyoruz. Textbox’a girilen değeri ng-model=”enteredName” şeklinde saklıyoruz  ve ng-submit=”addName() direktifi ile AddName() ismindeki metodu çağıyoruz. Bu metodun yapacağı names ismindeki listeye eleman eklemek olacaktır. Bunu da

$scope.names.push($scope.enteredName);

Komutu ile yapar.

Diğer bir özellik, listeden eleman silme; bunu da listenin yanına bir link ekleyerek ng-click direktifi ile yine fonksiyon çağırarak yapıyoruz. ng-click=”removeName(name)” ile seçilen name parametresi ile removeName(name) çağırılır. Js tarafında ise aşağıdaki kodlar ile seçilen elemanın indexi bulunur ve listeden çıkarılır.

var i=$scope.names.indexOf(name);

$scope.names.splice(i,1);

Örneğin Html kodu aşağıdaki gibidir;

angularblog1

Örneğin Js kodu aşağıdaki gibidir;

angularblog2

Çıktısı;

angularblog3

Örneğin kodlarına aşağıdaki codepen linkinden erişebilirsiniz.

http://codepen.io/deryagunduzozmen/pen/JWKPQV?editors=1010

Kaynaklar:

  1. https://github.com/curran/screencasts/tree/gh-pages/introToAngular
  2. https://angularjs.org
  3. https://www.youtube.com/playlist?list=PL6n9fhu94yhWKHkcL7RJmmXyxkuFB3KSl
  4. https://www.youtube.com/watch?v=ejBkOjEG6F0#t=34.112198
  5. http://csharp-video-tutorials.blogspot.com.tr/2015/11/angularjs-tutorial-for-beginners.html

Angular Js’de Module ve Controller Kavramları

Önceki yazımda Angular Js ile ilgili genel bilgiler paylaşarak küçük bir uygulama ile giriş yapmıştım. Bu yazıda module ve contoller kavramları üzerinde konuşarak yine basit bir uyglama ile pekişmesini sağlamayı hedefliyorum.

Uyglamanın Angular Js olarak derlenebilmesi için ng-app direktifinin eklenmesi gerektiğinden bahsetmiştim. Uygulamaya sadece ng-app yazarak Angular Js kodu geliştirebiliyoruz ancak yapabileceklerimiz sınırlı olacaktır. Fonksiyonel işler yapabilmek için module ve controller oluşturma ihtiyacı duyarız. Module dediğimiz aslında diğer uygulamalardan bildiğimiz Main() fonksiyonu gibidir.

Module aşağıdaki gibi tanımlayabiliriz;

var myApp=angular.module(‘nameApp’,[]);

Modülümüzün ismi nameApp, html tarafında ng-app=”nameApp” şeklinde kullanıyor olacağız.  Modül tanımındaki ikinci parametre array dir, dependency injection için kullanılabilir.Bir modülün başka bir modül ile bağımlılığı varsa bu alana yazılır, benim göstereceğim örnekte böyle bir durum olmadığından boş bırakıyorum.

Fonksiyonel işler yaptırmak için controller’a ihtiyacımız olacaktır, js tarafında bunun tanımını aşağıdaki gibi yapabiliriz;

myApp.controller(‘NameCtrl’,function($scope) {}

Böylece myApp modülünün controllerının NameCtrl olduğunu belirtmiş olduk, {} bloğu içerisine yapılmasını istediğimiz işleri yazıyoruz. $scope ise objemiz, bu objeye attribute lar atayabiliyoruz, örneğin aşağıdaki gibi names isminde bir array verebiliriz. names ise bizim modelimiz yani datamız olacaktır. Burada tanımladığımız özellikleri html tarafında kullanabiliyoruz. Tanımlanan NameCtrl ismindeki controller html tarafında ng-controller=”NameCtrl” şeklinde kullanılır. Controller ismi yanlış yazılırsa, controller’ı çağıramamış olur, console log a hata basar ve görüntülenmek istenen bilgileri yazıldığı gibi {{   }} içerisinde gösterir.

myApp.controller(‘NameCtrl’,function($scope) {

$scope.names=['Derya','Gunduz','Ozmen'];

});

Js Kodu;

angular1

Html kodu;

angular2

Html kodu içerisnde ng-repeat direktifi kullandım, bu direktif c# daki foreach gibidir, names ismindeki modelimiz içerisinde gezer ve her bir elemanı name olarak adlandırır, name elamanını ekrana liste şeklinde yazdırır. ng-repeat direktifi kullanarak oluşturduğumuz döngünün eleman indexlerini $index ile bulabiliriz, eğer nested, içiçe, döngü yaptıysanız üst indexi $parent.$index şeklinde bulabiliriz. Yani ng-repeat direktifi altında herhangi bir yere $index yazarsak elemanların indexini elde etmiş oluruz.

Çıktısı;

angular3

Göstermiş olduğum örneğin kodlarını aşağıdaki codepen linkinden inceleyebilirsiniz.

http://codepen.io/deryagunduzozmen/pen/ZeONvy

Kaynalar:

  1. https://github.com/curran/screencasts/tree/gh-pages/introToAngular
  2. https://angularjs.org
  3. https://www.youtube.com/playlist?list=PL6n9fhu94yhWKHkcL7RJmmXyxkuFB3KSl
  4. https://www.youtube.com/watch?v=ejBkOjEG6F0#t=34.11219
  5. http://csharp-video-tutorials.blogspot.com.tr/2015/11/angularjs-tutorial-for-beginners.html

Angular JS’e Giriş – İlk Uygulama

Uzun zamandır Angular Js öğreneyim deyip erteliyordum artık zamanı geldi diyerek çalışmaya başladım. Angular Js 2 çıktı, hem de 1 ile tamamen farklı imiş ama ben biraz geriden gelerek 1 için çalışmaya başladım :) .  Benim gibi yeni başlayan arkadaşlar faydalansın diye öğrendikçe paylaşımlarda bulunmayı planlıyorum. Bu yazımda Angular Js ile ilgili ilk yazımda genel olarak Angular Js konseptlerinden bahsettikten sonra basit bir uygulama ile olayını anlatmaya çalıştım.

AngularJs 2009 yılında Google çalışanı olan Misko Hevery tarafından yazılmış açık kaynak kodlu web uygulamaları geliştirmemizi sağlayan bir data binding (veriyi bağlayan şeklide çevrilebilir) frameworküdür.

Angular Js ile geliştirilen birçok website bulunmaktadır, website örneklerine madewithangular.com dan bakabilirsiniz.

Angular Js Single page applicaitons yani tek sayfalı uygulamalarda kullanılır. Tek sayfa üzerinde sayfayı refresh etmeden aksiyon alınmasını sağlar. Yapılan değişiklik sayfayı yenilemeye ihtayaç olmadan direk yansımaktadır.

Angular Js Temelini MVC (Model-View-Controller) konseptinden alır.

Model dediğimiz data, view data nın grafiksel gösterimi ya da html, controller ise modeli değiştiren javascript fonksiyonlardır, şeklinde açıklayabiliriz. Aşağıdaki görselde aralarındaki ilişki özetlenmiştir. Angular Js’in data binding framework olduğunu söylemiştim, aslında model ile kullanıcı arayüzünü bağlar, bunlar arasında controller aracılığı ile iletişim kurulur.

MVC-basic.svg

Günümüzde kullanılan farklı data binding frameworkleri bulunur bunlardan bazıları aşağıdaki gibidir;

Angular Js sağlamış olduğu faydalardan biri de dependency injection‘dır. Ayrıca Angular Js ile yazılan uygulamaları test etmek çok kolaydır, unit testi yazılabilir, ya da test driven development metodolojisi kullanılarak Angular Js yazılabilir. İlerleyen yazılarımda dependency injection ve test konusunda daha fazla detaya yer vermeyi planlıyorum.

Angular Js ile İlk Uygulama

Angular Js den genel olarak bahsettikten sonra angular ile ilk uygulayı yazmaya başlayalım. Klasik olarak yeni bir dile/teknolojiye başlandığında yapılan şey “hello world” yazdırmak olur, ben de bu adeti devam ettirerek  hello world yazdırmaktan başlayayım :)

Göstereceğim örneklerde online kod editör’ü olan codepen kullanıyor olacağım, yazılan kodları kaydedip github ile bağlayabiliyorsunuz, Angular Js’e başlayınca kullanmaya başladım, tavsiye ederim. İstenirse brackets İndirilerek code editör olarak kullanılabilir. Visual Studio ya da Visual Studio Code kullanarak da kodlama yapabilirsiniz. Angular Js projesi için Visual Studio ile nasıl proje oluşturulabileceğine dair bir blog yazısı yazmak planlarım arasında yer alıyor.

Yazacağımız uygulamanın Angular Js uygulaması olduğunu belirtmek için np-app direktifi eklememiz gerekir, np-app= isim de verilebilir ama ilk örnekte default modül olarak kullanmış olacağız. Module dediğimiz uygulamanın Main() fonksiyonu gibidir.  Ayrıca Angular Js framworkünü kullanabilmek için cdn (content distribution network) eklemeliyiz, Angular Js in yayınlamış istediğimiz bir versiyonunu kullanabiliyoruz. AngularJs in sitesinden “Download AngularJS” diyerek cdn kopyalayıp projemize ekleyebiliriz ya da https://cdnjs.com/ dan istediğimiz versiyon için linkini alabiliriz.

src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js”>
ang

body içerisine bir input elementi ekliyoruz ve bu elemente girilen datanın model adını name veriyoruz,  ng-model=”name”, çift süslü parantez içerisine, {{ }}, yazılan kodlar Angular Js olarak çalıştırılır,  textbox içine yazılan name değeri Hello “name” şeklinde kullanıcıya gösterilmiş oluruz. ng-model direktifi two-way data binding, çift yönlü veri bağlılığını sağlar, bu demek oluyor ki model değiştiğinde view değişir, view değiştiğinde model değişmiş olur. Ayrıca ng-model=”name” diye yazıldığında name ismindeki model daha önce tanımlanmamış olmasına karşın bu şekilde kullanılarak yaratılabilir ve ihtiyaç durumunda kullanılır. Aşağıdaki örnekte olduğu gibi input element içerisine yazılan isim bi alt satırdaki Hello’nun yanında gösterilmiş olur. Ek olarak ng-model direktifi input, select, textarea gibi html elementlerinde kullanılabilir.

ang

Örneğin kodlarına aşağıdaki codepen linkinden bakabilirsiniz.

http://codepen.io/deryagunduzozmen/pen/gmrQrg

Kaynaklar:

  1. https://github.com/curran/screencasts/tree/gh-pages/introToAngular
  2. https://angularjs.org/
  3. http://www.erbilen.net/angularjs-notlarim-1/
  4. https://www.youtube.com/playlist?list=PL6n9fhu94yhWKHkcL7RJmmXyxkuFB3KSl
  5. https://www.youtube.com/watch?v=ejBkOjEG6F0#t=34.112198
  6. http://csharp-video-tutorials.blogspot.com.tr/2015/11/angularjs-tutorial-for-beginners.html