17 Şubat 2014 Pazartesi

AngularJS - Debugging


Uygulama geliştirme sırasında hata ayıklama çok önemli bir yere sahiptir. Örneğin; uygulama beklenmedik şekilde çalıştığında, performans problemi yaşadığınızda veya sayfa üzerindeki bir element'in çalışma anında nasıl ifade edildiğini öğrenmek istediğinizde hata ayıklama aracına başvurursunuz. Her web uygulamasında olduğu gibi; Angular uygulaması geliştirirken de hata ayıklama aracını etkin bir şekilde kullanabiliyor olmanız gerekir. Firefox ile birlikte gelen, kullanabileceğiniz öntanımlı bir hata ayıklama aracı yoktur. Eklenti olarak Firebug'ı önerebilirim. Chrome'da ise öntanımlı olarak "Geliştirici Araçları" gelmektedir ve pek çok ihtiyacınıza cevap verir. Ancak mevcut sorununuz Angular'ın çalışması ile alakalı ise, bu araç da işinizi görmez. Bunun için; Chrome üzerinde hata ayıklamada kullanılabilecek oldukça işe yarar bir eklenti geliştirilmiştir: Batarang [1].
Eklentiyi kurduktan sonra, mevcut geliştirici araçları ekranına "AngularJS" isminde bir sekme daha eklenir ve kullanabilmeniz için checkbox işaretleyerek etkinleştirmeniz yeterlidir. Ayrıca "Elements" sekmesi altına da "AngularJS Properties" isminde bir sekme eklenir. "AngularJS" altındaki "Help" sekmesinde ise eklentinin ne işe yaradığını güzel bir şekilde anlatmışlar.

Not: İçerisinde büyük boyutta veri tutan nesneler üzerinde çalışıyorsanız, ng-repeat directive'i kullanımında performans problemleri ile karşılaşmanız muhtemeldir [3]. Özellikle bu tür performans problemlerinde Batarang çok işinize yarayacaktır.

Referanslar:
  1. Introducing the AngularJS Batarang
  2. AngularJS Batarang (video)
  3. Debugging performance problems in AngularJS with Batarang and Chrome DevTools

14 Şubat 2014 Cuma

AngularJS - Chrome'da routing problemi

İlk günden bu yana, Angular'da Firefox üzerinde çalışıyordum. Chrome üzerinde hata ayıklama aracı olan Batarang'ı test etmek istedim. Örnek bir routing uygulamasını açmak istediğimde ise sayfanın yüklenmediğini farkettim. Chrome'un geliştirici konsolunda
"Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. file:///D:/workspaces/route/view1.html XMLHttpRequest cannot load file:///D:/workspaces/route/view1.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. main.html:1" şeklinde bir hata ile karşılaştım. Hata kaydından da görüldüğü üzere; açmaya çalıştığım sayfaya dosya sistemi üzerinden erişmeye çalışıyorum. Problemin de nedeni bu aslında. Chrome, güvenlik nedeniyle dosya sistemi üzerinden yönlendirmeye izin vermiyor. Buna benzer pek çok şeyi, bu sebepten dolayı engelliyor olmalı.

yapmamız gereken:
Çalışmalarınızı yerel bir web sunucusu üzerinde tutabilir ve tarayıcıdan o şekilde erişebilirsiniz. Elbette benim önerim Apache olacaktır.

Bu vesileyle, bir sonraki yazımın da "AngularJS Debugging - Batarang" ile ilgili olacağını da bildirmiş olayım :)

11 Şubat 2014 Salı

AngularJS - Module ve Routing

Daha önceki blog girdisinde, oluşturulan sayfanın bir Angular uygulaması olduğunu belirtmek için ng-app directive'i kullanıdığından bahsetmiştim. O yazıda ng-app="" şeklinde kullanılıyordu. Bu şekilde kullanımda; uygulamamız "single page application"dan ibarettir ve Angular'ın çok önemli bir özelliği olan modülerlikten bahsedemeyiz.
Oluşturucağınız uygulama birden fazla modül içerecek ise; Angular altında bu modülleri oluşturduktan sonra ng-app="module1" gibi bir kullanım ile o sayfanın hangi modüle ait olduğunu belirtebilirsiniz. Her bir modülün kendine ait controller, view, factory, service, filter vs. nesneleri vardır. Farklı modüllerin, birbirlerine ait erişim izinlerini yönetebilirsiniz.
Module, controller, directive, routing gibi elemanların birbiriyle olan ilişkisi aşağıdaki görselden daha net bir şekilde anlaşılacaktır.




Javascript kodunda var module1 = angular.module('module1', []); gibi çok basit bir kullanımla bir modül oluşturabilir ve html sayfanızdan şeklinde bu modüle erişebilirsiniz. module metodundaki ikinci parametre([]) module1'in miras alacağı(bağımlı olduğu) modül veya modülleri içeren bir dizidir. Örneğin; var module1 = angular.module('module1', ['base']); şeklinde modülümüzü oluşturmamız, "module1" modülünün  "base" modülünü miras aldığı ve base'e ait olan her nesneye erişiminin mümkün olduğu anlamına gelir.
Ben burada modulün oluşturulmasında kullanılan javascript kodu üzerinde duracağım. Module ve routing ile ilgili örneğe buradan erişebilir ve kod üzerinde çalışabilirsiniz.


var module1 = angular.module('module1', []);

module1.controller('myController', function($scope) {
 $scope.test = function() {
  alert('controller1 : ' + $scope.name);
 };
});

module1.controller('myController2', function($scope) {
 $scope.test = function() {
  alert('controller2 : ' + $scope.name);
 };
});

module1.config(function($routeProvider) {
 $routeProvider.when('/view1', {
  controller : 'myController',
  templateUrl : 'view1.html'
 }).when('/view2', {
  controller : 'myController2',
  templateUrl : 'view2.html'
 }).otherwise({
  redirectTo : '/view1'
 });
});   

  • angular.module('module1', []); ile module1 modülünü oluşturuyoruz. AngularJS 1.2.* sonrası sürümlerinde routing için  'ngRoute' modülünü miras almanız(var module1 = angular.module('module1', ['ngRoute']);) ve html kodunuzda import etmeniz gerekiyor.
  • module1.controller('myController', function($scope) ile module1 üzerinde myController isminde bir controller oluşturuyoruz. $scope ise; view(html sayfamız) ve controller(myController)'ın birlikte çalışmasını sağlayan, arada köprü görevi gören nesnedir. Controller üzerinde oluşturulan fonksiyon ve attribute'lara $scope nesnesi üzerinden erişim sağlanır.
  • module1.config(function($routeProvider) ile module1 üzerinde bir yönlendirme tanımlıyoruz. $routeProvider ise; yönlendirme yönetiminde kullanılan nesnedir. Kod bloğuna bakacak olursak; sayfa öntanımlı olarak view1.html'i myController ile birlikte çalışacak şekilde yüklenecektir. Daha sonra "/view2" şeklinde bir yönledirme isteği gelirse; view2.html myController2 ile birlikte çalışacak şekilde yüklenecektir. 
Referanslar:
  1. AngularJS Fundamentals in 60 Minutes - Modules, Routes and Factories (video)
  2. How to structure large angularJS applications
  3. AngularAPI - ngApp 
  4. AngularAPI - angular.module
  5. AngularAPI - $route

5 Şubat 2014 Çarşamba

AngularJS - Controllers

Angular'da Controller,  MVC (Model-View-Controller) tasarım şablonunun gerçekleştiriminde çok önemli bir yere sahiptir. ngController directive'i ile kullanılırlar. View'a herhangi bir controller class'ı bağlamamızı sağlar. Böylece; view üzerinde kullandığımız model'ler üzerinde işlem yapabiliriz.
Angular'da MVC:

  • Model: Scope özellikleridir(properties) ve data binding ile DOM üzerinde erişim mümkündür.
  • View: Data binding'ler içeren HTML sayfasıdır(şablon-template olarak da adlandırılır) ve View'a dönüştürülür.
  • Controller:View'dan ngController directive'i ile çağırılan controller class'ıdır. Controller class'ı, scope property'ler üzerinde değişiklik yapabilmemize imkan sağlanyan function ve value'ları içerir.

Controller'lar ile ilgili örneğe buradan erişebilir ve kod üzerinde çalışabilirsiniz.

Ben burada sadece HTML kodu üzerinde duracağım. Ayrıntılı olarak .js ve .css'e yukarıdaki bağlantıdan göz atabilirsiniz.


<html ng-app>

  
  AngularJS Controller Ornegi
  
  
  
  
  
  



  

Kayıtlar

Kayıt sayısı : {{records.length}}
{{record.name}}
</html>


ng-controller ile ilgili etiket içerisinde kullanılacak controller class'ı belirtiliyor.{{records.length}} ile controller class'ında tanmlanmış olan records objesinin uzunluğunu yazdırıyoruz. ng-init="records" ile bu object'i ilgili blokta kullanıyoruz ve ng-repeat="record in records" ile her bir record üzerinde işlem yapabiliyoruz. ng-click="delRecord(record.name)" kullanarak controller class'ında bulunan delRecord fonksiyonu çağırılır. ng-submit="addRecord()" kullanımı ile form'u submit etmek için controller üzerinde addRecord fonksiyonu çağırılır.

Controller'larla ilgili detaylı bilgiye aşağıdaki bağlantılardan ulaşabilirsiniz. Aslına bakarsanız; AngularJS ile ilgili pek çok kaynağa ulaşabilirsiniz. Ben de bu kaynaklara başvuruyorum ve öğrenebildiğim kadarıyla burada paylaşmaya çalışıyorum. Blog'da bununla ilgili konuları tekrar paylaşmamın nedeni ise; hiçbir Türkçe kaynağa rastlamamış olmamdır.

  1. http://docs.angularjs.org/api/ng.directive:ngController
  2. http://blog.pluralsight.com/angularjs-step-by-step-controllers