AngularJS ile uygulama geliştirirken, uygulamanız büyümeye başladıkça, yönetmesi de zorlaşmaya başlayacaktır. Tıkandığınız yerlerde, kendiniz 10 larca makaleyi karıştırırken, stackoverflow’ da sabahlarken bulabilirsiniz. Uygulamanız aslında şuan çalıştığından daha performanslı çalışabilir, yönetimi çok çok daha basit olabilir ve hatta yeni modüller eklenmesi sandığınızdan çok daha kolay ve sağlıklı olabilir. İşte herkesin başına gelen sorunları daha en başında çözmek amacıyla, AngularJS geliştiricileri tarafından ortak kabul edilen prensipleri, sizlerle paylaşmaya çalışacağım. Aşağıdaki liste sürekli güncellemektedir ve kurallara uyduğunuz taktirde, geliştirmeleriniz tereyağından kıl çeker gibi kolay olacaktır. Çünkü piyasadaki ortak kurallara göre kod yazmanız, sizin gibi kurallara uyan diğer geliştiricilerin AngularJS için yazdığı ve open source olarak yayınladığı modülleri de kolayca uygulamanıza entegre etmenize olanak sağlayacaktır.

ÖNEMLİ NOT: Aşağıdaki listeki pratikler aslında 2‘ ye ayrılıyor. Teknik olarak yapmak zorunda olduklarınız ve Düzen, prensip, kolay yönetebilme açısından size sunulan çözümler olarak. Bu yüzden incelerken şöyle diyebilirsiniz: “ben bunu böyle yapmasamda çalışır bu”, “bilmemnebilmemne.com’ da böyle anlatmıyor, bu kadar uzatmıyor” vb. şekilde düşünebilirsiniz. Unutmayınki oralarda verilen örnekler, sadece örnek verilen kısmı anlatmak için kolay yoldan yapılmış olabilir, AMMA sizin projeniz büyüyecek ve artık düzensiz çalışamayacaksınız.

 

1.Dosya Yapısı

Büyük bir Angular uygulaması, 10larca modül, controller, service, directive ve view’ dan oluşacaktır. Bu nedenle, her bir yapıyı kendi içinde ayrıştırmalı ve ilgili alt klasörlerde toplamalısınız. Benim kendi projelerimde uyguladığım ve açık kaynak projelerde de gördüğüm bir yapı var. Uygulamanızı modüllere ayırın. Bunun örneği aşağıdadır.

Screen Shot 2015-08-15 at 23.19.48
Uygulama klasörümüz “app” in içine, uygulamamızı tanımladığımız bir app.js açıyoruz. İçeriği aşağıdaki gibidir;
Screen Shot 2015-08-15 at 23.19.58

UygulamaIsmi‘ nin yerine uygulamanız için istediğiniz ismi verebilirsiniz. Unutmayın bunu birazdan Ana Layout(index.html)’ ta tanımlayacağız. Gördüğünüz gibi köşeli parantez [] içinde yazılanlar ise alt modüllerimizdir, bu sayede modüler çalışabilmekteyiz. İlk 3 modül yukarıda bahsettiğimiz modüldür, diğerleri ise Open-source olan ve uygulamamıza eklediğimiz modüllerdir. Öncelikle kendi modüllerimizi, ardından da dışarıdan aldığımız modülleri yazmamız bile uygulamımıza bir düzen getirmektedir.

– Bir alt modülü inceleyelim;

index.module.js' in içi;

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

Gördüğünüz gibi bir modül daha açmışız, modülün içindeki controller klasöründe bir adet index.controller.js var birde ona bakalım;

Index.controller(‘IndexController’, [‘$scope’, function($scope){ }]);

Gördüğünüz üzere, controller’ ı da Index modülüne bağlı olarak açtık. Diğer klasörlerin içinde de aynı şey uygulandığı için örneklemiyorum, burada asıl varmamız gereken sonuç şu; Uygulamamızdaki Anasayfa, ürün, üyelik vb. kendi içinde bağımsız her yapıyı modül yaptık. Ve bunların controller, service vb yapılarınıda kendi modülüne bağladık, en sonunda ise app.js’ te tüm alt modülleri ana modüle bağladık. İşte bu şekilde çalışırsanız, uygulamanız tamamen esnek yönetilebilir hale kavuşur. İstediğiniz modülü anında uygulamanızdan çıkarıp, ekleyebilirsiniz.

2.AngularJS.org’ da yazdığı gibi HTML enhanced for web apps!

Eskiden, neredeyse tüm eventleri javascript kodumuzda dinler, HTML’ e çok fazla iş bırakmazdık, fakat AngularJS’ in gelişmiş directive yapısı ile daha okunabilir, daha kolay geliştirilebilir web uygulamaları yaparken, dökümante edilmiş web sayfalarımız oluyor. Aşağıdaki kod parçasında ne demek istediğimi daha iyi anlayacaksınız.

HTML kodunda görüldüğü üzere,

– ng-submit directive’ i ile formun submit işlemini handle ediyoruz ve scope’taki login metodunu tetikliyoruz.

– ng-class directive’ i ile formun class’ ını dinamik olarak değiştirebiliyoruz.

– elementlerin görünürlüklerini ng-show ile ele alıyoruz.

– elementlerin disabled durumunu da ng-disabled ile alıyoruz.

Bu işlemlerin hepsini DOM’ u dinleyip javascript kodları ile de yapabilirdik, lakin bu örnekteki kadar kolay anlaşılabilir, yönetilebilir ve geliştirilebilir olmayacaktı. İşte AngularJS’ in bize sunduğu en önemli avantajlardan biri budur.

3 Comments AngularJS ile Uygulama Geliştirirken Uyulması Gereken Prensipler

    1. emre

      Öncelikle, bunu farkedip,uyardığın için teşekkürler,çünkü bu konu 10 dan fazla başlık içeriyor. Henüz 2 tanesini yazabilmiştim. Aklıma getirdiğin iyi oldu, düzenli aralıklarla listeyi tamamlayacağım.

      Reply

Leave A Comment

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