Angular ile projelerimizi geliştirirken bilmeyerek yaptığımız hatalar olabilir. Bu hatalar ileride çok baş ağrıtabilir. Bu sebeple angular geliştirici ekibi tarafından https://github.com/angular/angular.js/wiki/Anti-Patterns adresindeki ve internetteki slaytlardan edindiğim bilgileri sizlere aktarmaya çalışacağım.

 

  • angular.element(‘classIsmi’) şeklinde yaptığınız element seçimlerini, jQuery’ nin $() seçicisi içine almayınız, çünkü angular.element seçimi zaten jQlite sayesinde bu işlemi yapıyor.
  • Asla Jquery’ i template yada DOM işlemleri için kullanmayınız. DOM üzerindeki Angular hakimiyetini kaybedersiniz ve başınıza iş alırsınız, gerek te yok zaten.
  • Asla araştırma yapmadan bir plugin üretmeye çalışmayın. Boşuna zaman kaybı olabilir. Var olanları bulup, eksiklerini giderin.
  • Klasör yapınızı ileride duyabileceğiniz ihtiyaçlarıda göz önünde bulundurarak şekillendirin. Basit bir klasör yapısı aşağıdaki gibi olmalıdır. Herşey olması gerektiği yerde. Geliştiriciler neyi nerde bulacağını tahmin edebilmelidir. Bunun bir diğer önemide build araçlarınız içindir. Örneğin angular kodunuzu uglify edeceksiniz, eğer klasör yapınız düzgün ise, tek bir mapping ile build aracınız rahatlıkla js dosyalarınızı bulup işlemini yapabilir.

Screen Shot 2015-08-15 at 23.19.48

  • Modüler çalışın. Yukarıdaki maddede klasör yapınızı düzgün kurmanız gerektiğinden bahsederken aslında modüler çalışmanız gerektiğinden de bahsetmiş olduk. Projenizi modüllere ayırın, örneğin ürün, üyelik vb. gibi, artık başınız ağrımadan istediğiniz modülü zamanı gelince projenizden çıkarabilirsiniz.

  • Annotation’ ları eklemeyi asla unutmayın! Bu şu demek; aşağıdaki kodu

https://github.com/mishoo/UglifyJS kütüphanesi vasıtası ile uglify edip yayına aldığınızda şu sonucu verecektir ve kodunuz çalışmayacaktır.

Çünkü dependencies(bağımlılıklarınız) uglify kütüphanesi tarafından bilinmiyor! Bu yüzden kodunuzu annotation’ ları ekleyerek yazmalısınız, aynen şu şekilde;

Bu kodu uglify ederseniz aşağıdaki sonucu alırsınız ve kodunuz çalışır.

 

Ama böyle titiz çalışamam ben diyorsanız, gulp-ng-annotate modülü sizi kurtarıyor, build sırasında bu işlemi sizin için yapıyor 🙂 https://www.npmjs.com/package/gulp-ng-annotate

 

  • Controller larınızı boğmayın! Controller’ lar uygulamanızda sadece olan biteni takip edip, işlemlere yol veren kod parçacıklarıdır. Controller’ a büyük işlemler yaptırmayın. Bu işlemlerinizi servislere ve factory lere sevk edip dönen sonucu ilgili yerlere ulaştırma işlemini controller’ lara yaptırın.
  • HTTP işlemlerini Controller’ da yapmayın!

API’ niz ile iletişim için angular ın $http servisini kullanacaksınız. HTTP işlemlerinizi kısayoldan olsun deyipte controller’ da yapmayın. HTTP işlemlerinizi factory yaratıp, factory içinde yapın. Hatta bu factory leride modüllere bölün.

Örnek;

 

  • JQUERY Kullanmayın! yada olabildiğince az kullanmaya çalışın.

AngularJS ve jQuery birbirinden çok farklı şeyler. AngularJS bir framework, jQuery ise bir kütüphanedir. AngularJS ile uygulamanızın mimarisini oluşturursunuz, jQuery ile ise, basit DOM manipülasyonları, Event işlemleri, animasyonlar ve ajax işlemleri yapılabilir. Bu yüzden AngularJS Framework’ ü jquery’ nin ihtiyaç duyduğu faydalı özelliklerini jQlite ile framework e dahil etmiştir. Yani jquery’ nin neredeyse en çok kullanılan özelliği DOM seçicisini içermektedir. https://docs.angularjs.org/api/ng/function/angular.element adresinden detaylarına ulaşabilirsiniz. Bu sebeple zaten jquery’ e direk olarak ihtiyacımız yok. Alışılagelmiş jquery metodlarını angular.element ile yapabiliyoruz. Boşuna uygulamamıza jquery’ i de dahil edip hem performansını düşürmeyelim, hemde işlemleri direk olarak jquery ile yapmaktan kesinlikle kaçınıp, ortalığı karıştırmayalım 🙂

Çünkü uygulamamızın tüm hakimiyeti Angular’ a ait olmalı. Siz DOM üzerinde jquery ile manipülasyon yaparsanız, Angular’ ın hesaplarını alt üst edebilirsiniz. Hiç gerek yok.

Fakat, projenizde bir jquery plugin’ i kullanıyorsanızda, maalesef jquery’ e bağımlılığınız devam etmek zorunda olacaktır.

Bu durumda şu yöntemi izleyin; kullandığınız jquery plugin’ inin ismini google’ da “angular plugin ismi” şeklinde aratıp, plugin’ in angular versiyonu var mı diye araştırın. Belkide vardır ve jquery’ i projenize dahil etmek zorunda kalmazsınız 🙂

Eğer yoksa, oturup kendiniz de yazabilirsiniz, yada başlatılmış bir projeye dahil olup, open source dünyasında bir katkıda bulunabilirsiniz 🙂

  • Angularca’ dan şaşmayın! Evet Angularca 🙂 Artık jquery vb. kütüphane kullanmıyorsunuz! Artık bir framework kullanıyorsunuz ve projenizde her kuralı o koyar! en son sözü o söyler! Jquery’ den alıştığınız üzere lambur lümbür DOM Manipülasyonları yapmayın! asla! Örnek vermek gerekirse, elinize bir dizi ulaştı ve bunu sayfanızda listelemeniz gerekiyor. Jquery’ de olsa foreach yapar, listenin container’ ının içine tek tek elle eklerdiniz. Angular’ da ise biz HİÇBİRŞEY yapmıyoruz! Veriyi ng-repeat’ e iletiyoruz, parçalamayı ve listelemeyi o yapıyor. Kısaca https://docs.angularjs.org/api/ng/directive/ngRepeat adresinden detaylarına gözatabilirsiniz.Listelemeyi yaptık diyelim, bir duruma göre listeden bir element silinecek? Jquery’ deki gibi elementi seçip remove() yapmıyoruz. Elementi $scope’ ta bağlı olduğu diziden siliyoruz. ng-repeat bu veriyi anlık olarak dinlediği için, listeden de silecektir.

    Event’ leri dinlemek için ekstradan kod yazmayı bırakıyoruz! Bunun yerine ng-click vb. Angular’ ın kendi directive’ leri var. Keza elementin gösterimini de show() hide() gibi metodlar ile ele almıyoruz. ng-show directive’ ini kullanıyoruz.

  • Dahili gelen ngRoute’ u kullanmayın. Onun yerine UI-Router (https://github.com/angular-ui/ui-router) kullanın. Şaşırdınız mı? AngularJS’ in bir modülü kullanmamanızı tavsiye ediyorum 🙂 Bu kadar övdüğüm bir framework’ ün maalesefki tek eksik kalmış yanı router’ ı.
    Neden mi ?
    Çünkü ngRoute çok ilkel kaldı. İhtiyaçlara cevap vermedi. AngularJS 1 versiyonunda büyük değişiklikler yapılması istenmedi. Fakat Angular 2 versiyonunda sıfırdan yazılıyor ve harika olacak gibi gözüküyor. Lakin bu sırada biz UI-Router’ ı kullanmalıyız. Angular 2 çıkınca, dahili route modülünü kullanırız :)Sürekli güncellenmektedir.

Leave A Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir