Angular Framework Mimarisi

Merhaba, ben Onur Çelebi. CheckBox Consultacy ekibinde developer olarak yer alıyorum.

Hazırlamış olduğum bu blog içerisinde; Angular nedir, avantajları ve bir angular uygulaması nasıl oluşturulur, ondan bahsedeceğim.

Angular; Google tarafından desteklenen, dünya genelinde yazılımcılar tarafından katkı sağlanan açık kaynak kodlu, javascript tabanlı MVC deseni üzerine kurgulanmış bir kütüphanedir. Kısacası; dinamik web uygulamaları için yapısal bir framework’dür.

Neden Angular Kullanmalıyım?

• Angular’ın SPA (Single Page Application) desteği: SPA, internet deneyimini geliştiren bir uygulama biçimidir. Bir web sayfasını açtığınızda karşınıza çıkacak olan ilk sayfadan sonra, aramayı derinleştirmek için başka sayfaları görüntülemek isteyebilirsiniz. Bu sayfaların her birine geçeceğiniz sırada başka bir web site açılır gibi sayfaların yeniden yüklenmesi, gezinme deneyimini olumsuz etkiler. SPA şeklinde isim verilen bu biçim, sanki bir kitabın sayfalarını çevirir gibi, sayfa yüklenmesini beklemeden gezinmenizi sağlayan bir tasarım biçimidir. Bu sayede, farklı sayfalar arasında gezinmek için tekrar tekrar başka sitelere girer gibi sitenin farklı sayfalarının yüklenmesini beklemezsiniz.
• Two-Way Data Binding (Çift Yönlü Veri İletişimi): Bu özelliği açıklamak için bir örnek kullanalım. Bir alışveriş sitesinde olan bir ürünü düşünün. Giyim, İndirimli, Ana sayfa gibi kategorilerde yer almakta. Stokta olma, fiyat değişikliği gibi durumların bu bilginin ilgili alanlarının hepsinde değişmesi gerek. İşte bu değişimi sağlayan yapıya çift yönlü veri iletişimi demekteyiz.
• Moduller Yapısı: Modüller yapısı sayesinde uygulamanızı parçalara bölebilir ve tekrar kullanımını sağlayabilir. Bu moduleleri component’ler, directive’ler, pipe’lar ve servisler ile birlikte gruplar haline getirebilmektedir.
• Cross Platform Çalışabilme: Angular ile native mobil uygulamalar da geliştirebilirsiniz. Bu özelliğin en büyük avantajı tek bir program ile ios, android ve windows phone uyumlu derlenebilir uygulamalar geliştirebilmektir diyebiliriz. Ayrıca Angular ile Mac, Windows ve Linux için masaüstünde yüklü uygulamalar da geliştirebilirsiniz.

Angular Uygulaması Oluşturma

Angular uygulaması oluştururken, gerekli kurulumları yaptıktan sonra terminalimizde

“ng new AngularProje” komutunu çalıştırarak projemizi oluşturabiliriz.

Angular projemizi oluşturduktan sonra, projemizi çalıştırmak için ilgili dizine gidip “ng serve –open” komutunu çalıştırmamız yeterlidir. Eğer her şeyi doğru ve eksiksiz yaptıysak bizi böyle bir sayfa karşılıyor olacak;

Angular Proje Mimari Yapısı

Projemizi çalıştırdığımıza göre artık VS Code ile proje klasörünü açıp oluşturulan dizin yapısı hakkında konuşabiliriz. Oluşturulan proje klasörü aşağıdaki gibidir;

İlk olarak node_modules klasöründen başlayalım. Node_modules dosyası, Npm ile yüklediğimiz paketlerin bulunduğu klasördür.

En önemli klasörlerden biri olan src dosyası ise; Uygulamanın çalıştığı klasördür. Daha sonra ekleyeceğimiz componentler, assets dosyaları ve config dosyaları vs. dosyalar bu klasörün içinde yer alacaktır. Şimdi src dosyasınında altında bulunan dosyaları inceleyelim.

• app − src klasörü altında yer alır ve uygulamaya eklenecek kod bileşenlerini tutar. (Component, Module, Pipe, Service vs.) Geliştireceğimiz proje için ekleyeceğimiz bütün bileşenler ve scriptlerin büyük çoğunluğu bu klasör altına eklenir.
• assets − src klasörü altında yer alır ve Image , file, js gibi dosyaların tutulacağı klasördür.
• environments − Bu dosya aşağıdaki gibi iki adet dosya içerir. Bu dosyalar sayesinde konfigürasyonları development ve prod ortamına göre ayarlayabilirsiniz.
  • environment.prod.ts
  • environment.ts

index.html dosyasını açıklamak gerekir ise; Angular SPA uygulamalar oluşturduğumuz bir framework olduğunu belirtmiştik. Bu nedenle uygulamanın bir giriş dosyası olmalı ve bütün render işlemleri bu dosya içinde gerçekleşmeli. İşte o dosya bizim index.html dosyamız.

Şimdi ise package.json dosyamızdan bahsetmek istiyorum. Bu dosya projeye eklenen kütüphanelerin bilgilerini saklar. Yani, terminal üzerinden “npm install” çalıştırdığınızda node_modules içine yüklenenecek paket bilgilerini tutar. Dosyaya göz atarsak bağımlı olduğu paketlerin listesini görebiliriz.

Son olarak angular.json dosyamızdan bahsedecek olursak; angular.json dosyamız, uygulama ayarları ve third-party yüklenen javascript, css ya da kendi custom javascript ve ya css dosyalarını ekleyip kullanabilmemizi sağlayan bileşendir.

Bugün; Angular nedir, neden Angular kullanmalıyım sorularına cevaplar vermeye çalıştık ve basit proje oluşturarak dizin hakkında bilgiler edindik.

Herkese sağlıklı ve huzurlu günler diliyorum.

Onur Çelebi