-

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
Category: Angular JS

Your email address will not be published. Required fields are marked *

*