Angular, modern web uygulamalarının geliştirilmesi için tasarlanmış açık kaynaklı bir platformdur Angular projesi modüllerden oluşur ve modüller, önemli komponentlerin veya servislerin toplandığı yapısal bloklardır Angular, dependency injection prensibine dayalıdır ve global servisler aracılığıyla veri paylaşımını kolaylaştırır Angular yapısının temel prensiplerini öğrenmek, uygulamanın doğru yapılandırılmasını sağlayabilecek ve modüllerin kullanımı sayesinde daha düzenli bir kod yazabilirsiniz NgModule, tüm bileşenleri bir araya getiren bir modül sınıfıdır ve Component, uygulamanın küçük parçalarından biridir Angular yapısını doğru bir şekilde kullanarak modern web uygulamaları geliştirebilirsiniz

Angular, modern web uygulamalarının geliştirilmesi için kullanılan açık kaynaklı bir platformdur. Angular, genişletilebilir ve yapılandırılabilir bir şekilde tasarlanmıştır. Bu sayede, geliştiricilerin ihtiyacına göre uygun bir yapı oluşturabilmeleri sağlanır.

Angular projesi modüllerden oluşur. Modüller, önemli komponentlerin veya servislerin toplandığı yapısal bloklardır. Bu sayede, uygulama geliştiricileri kolaylıkla yeniden kullanılabilir parçalar oluşturabilir veya var olan modülleri farklı projelerinde de kullanabilirler.

Bunun yanı sıra, Angular dependency injection prensibine dayanır. Dependency injection, kodun yeniden kullanılabilirliğini arttırır ve bağımlılıkları yönetir. Bu sayede, projelerdeki kod tekrarları azalır ve güncellemeler daha hızlı bir şekilde yapılabilir.

Global servisler, Angular uygulamalarında verilerin paylaşılması için kullanılır. HttpClient kullanılarak sunucu tarafındaki verilere erişim sağlanırken, guardlar ile uygulamaya kimlerin erişebileceği kontrol edilir. Global servisler, uygulamaların herhangi bir noktasından erişilebilir durumdadır ve bu sayede verilerin paylaşımı daha da kolaylaştırılır.

Angular yapılandırması ve global servislerin kullanımı, sadece bu yazıda değinilen konuların bir kısmını oluşturur. Bu konuların detaylı bir şekilde ele alınması, Angular uygulamaları geliştirirken ihtiyaç duyulan karmaşık yapıların daha kolay bir şekilde anlaşılmasını sağlayacaktır.

Angular Yapılandırması

Angular, modern web uygulamaların yapılandırılmasında oldukça popüler bir JavaScript çerçevesidir. Angular, uygulamanın nasıl yapılandırılacağına dair belirli bir yapıya sahiptir. Bu yapı, genellikle birçok bileşen ve modül içerir.

Angular uygulamaları, NgModule ve Component denilen iki ana temel yapılandırma bloğuna sahiptir. NgModule, modüllerin oluşturulmasına olanak tanırken, Component kullanıcı arayüzünü çağırmak için kullanılır. Bu yapıların doğru şekilde yapılandırılması, uygulamanın doğru çalışmasını garanti eder.

Bunun yanı sıra, Angular birbirine bağlı bileşenler tarafından kullanılan "Dependency Injection" özelliğini de destekler. Dependency Injection, bileşenler arasındaki geçişkenliği hafifletir ve kolaylaştırır.

Angular, ayrıca global servis özelliği sunar. Global servisler, uygulamanın herhangi bir yerinde kullanılabilen tek bir servistir. HttpClient, bir servisten veri almak veya veri göndermek için kullanılan bir global servis örneğidir.

Sonuç olarak, Angular yapısının temel prensiplerini bilmek, uygulamanın doğru şekilde yapılandırılmasını sağlayacak ve global servislerin kullanımı sayesinde daha iyi bir performans sağlayacaktır.

Modüllerin Kullanımı

Angular'da modüler bir yapı kullanmak, projelerinizin daha organize ve yönetilebilir olmasını sağlar. Modüller, ilgili bileşenlerin ve servislerin gruplandırılması için kullanılır. Bir modül, temel bileşenleri ve ilgili servisleri içeren bir bağımlılık ağacı oluşturur. Böylelikle, uygulamanın büyük bir bölümünün bir kez yüklendiğinden ve tüm modüller arasında kullanılabildiğinden emin olabiliriz.

Modüller oluşturma konusuna girmeden önce, modüllerin ne olduğuna bir göz atalım. Modüller, genellikle bir "NgModule" sınıfı olarak tanımlanır. Bu "NgModule" sınıfı içinde, ilgili bileşenlerin ve servislerin listesi tanımlanır. Bunun yanı sıra, modül için gerekli olan diğer modüllerin de burada tanımlanması gerekir. Modül oluşturma işlemi, "ng generate module" komutu ile gerçekleştirilir.

Modülleri kullanmak, uygulama bileşenlerinin ayrı ayrı oluşturulması ve ardından daha büyük bir uygulama içinde bir araya getirilmesi fikrini benimsiyor. Bu, uygulamanın büyüdükçe daha yönetilebilir ve organize kalmasını sağlar. Modüller, diğer modüllerle ilgili olarak birden fazla uygulama oluşturmak için de kullanılabilir.

Angular, modüllerin oluşturulması ve kullanımı konusunda oldukça esnektir. Modüller, genellikle işlevleri, özellikleri veya ortak özellikleri olan bileşenleri bir arada tutmak için kullanılır. İstediğiniz kadar çok sayıda modül oluşturup kullanabilirsiniz, ancak modüllerinizin mantıklı ve tutarlı bir yapıda olmasına dikkat etmeniz gerekir.

Aşağıdaki örnek, "module-example" adlı bir modül oluşturmanızı göstermektedir:

```ng generate module module-example```

Oluşturulan modül, aşağıdaki gibi görünür:

```@NgModule({ declarations: [], imports: [], providers: [], bootstrap: []})export class ModuleExample { }```

Bu örnek, içinde herhangi bir bileşen, servis veya yapılandırma olmadan boş bir modül oluşturmayı göstermektedir. Bu modülü, daha sonra ilgili bileşenleri eklemek ve kullanmak üzere doldurabilirsiniz.

Modüller oluşturmak ve kullanmak, Angular projelerinde önemli bir konudur. Modüller, projelerin daha organize olmasını sağlar ve büyük ölçekli uygulamaların bile daha yönetilebilir hale gelmesini sağlar.

NgModule ve Component Nedir?

Angular uygulamaları, modüler bir yapıya sahiptir ve bu modüller, uygulamanın bileşenlerini organize eder. NgModule, Angular uygulamasında kullanılacak tüm bileşenleri bir araya getiren bir modül sınıfıdır. NgModule, Component, Directive ve Pipe gibi öğeleri içerebilir. Component ise, Angular uygulamasının küçük parçalarından biridir ve belirli bir işlevi yerine getirir. Componentler, veri kaynağından verileri alıp HTML görüntülemesi yapar. Ayrıca kontrolleri ve diğer bileşenleri de yönetirler.

NgModule, Angular uygulamasının bileşenlerinin yüklenme sırasını belirlemeye yardımcı olur. Bu sayede, bileşenlerin yüklenme sırası ile uygulama daha hızlı hale gelebilir. Bileşenlerin bir araya toplandığı modüllere, uygulama düzeyindeki servis ve diğer ayarlar da eklenerek tek bir işlevsellik olarak sunulur. Bu sayede uygulamalar daha modüler hale getirilir ve kodun yönetimi kolaylaşır.

Componentler, hemen hemen her uygulamanın vazgeçilmez öğeleridir. Aynı zamanda Componentler, birlikte çalıştıkları modüllerin bir parçasıdır. Herbir Component, belirli bir işlevi yerine getirir. Örneğin, bir e-ticaret uygulamasında sepet sayfası, ödeme sayfası, ürün detay sayfası gibi farklı Componentler vardır. Bu Componentler, uygulamanın yönetilebilirliğini ve bakımını kolaylaştırır.

Sonuç olarak, NgModule ve Component, Angular uygulamalarının temel yapı taşlarıdır. Moduleer ve Component, Angular uygulamalarında birlikte çalışan yapılar olarak, uygulamanın performansını ve verimliliğini artırır. Bu sayede, uygulamalar geliştirilirken kod kalitesi korunabilir ve bakımı kolay hale getirilebilir.

NgModule ve Component'in Kullanımı

Angular yapısında, modüller ve bileşenler kodun yeniden kullanılabilirliğini artırmak için kullanılır ve karmaşık uygulamaları daha fazla yönetilebilir hale getirir. NgModule, uygulamanızı oluşturan diğer modüllerin yanı sıra bileşenler ve hizmetler gibi daha az yapısal özellikleri de içerebilen bir modüldür. NgModule'deki bileşenlerin ve hizmetlerin birden fazla modül tarafından kullanılması mümkündür.

Component, Angular'da bir şeyleri oluşturmak veya işlemek için yararlıdır ve genellikle belirli bir bileşenin özelliklerini tanımlayan HTML şablonları ile birlikte kullanılır. Bileşenler genellikle belirli bir görevi yerine getiren özellikleri ve metodları içerir.

NgModule ve Component'in kullanımı, genellikle uygulamanın başlangıcında yapılandırılır. Bileşenler, verimli kodu tekrar kullanılabilir hale getirir. Modüller kullanıcı deneyimini değerlendirir ve uygulamanın performansı iyileştirir.

Örneğin, bir e-ticaret uygulamasındaki sepet bileşeni tek başına kullanılabilir olabilir ve başka uygulamalarda veya farklı sayfalarda kolaylıkla yeniden kullanılabilir. Ayrıca, bir bileşenin belirli bir görevi yerine getirmesi nedeniyle bileşenler kolayca değiştirilebilir. Modüller bileşenleri paketler ve uygulama yüklendiğinde yalnızca kullanılacak bileşenler yüklenir.

Bu özellikler Angular yapısını uygulamanız için ideal hale getirir ve gelecekteki genişlemelere hazırlık için uygulama kodunu daha yönetilebilir hale getirir.

Dependency Injection

Dependency Injection, yazılım mühendisliğinde bir tasarım desenidir. Angular, dependency injection prensibine dayanan bir framework'tür. Dependency Injection basitçe, nesnelerin başka nesnelere ihtiyaç duyduğunda otomatik olarak sağlanması anlamına gelir.

Angular, bir bileşenin ihtiyaç duyduğu tüm bağımlılıkları elde etmek için dependency injection kullanır. Bu nedenle, bir bileşen oluşum sırasında bağımlılıklarını alır ve bu bağımlılıklara doğrudan erişebilir. Bileşenler, bağımlılıkları kendi içinde yaratmak zorunda kalmadan bu şekilde geliştirilebilmektedir.

Angular, dependency injection kullanırken iki temel ilkeye dayanır: sağlayıcılar (providers) ve enjekte edilenler (injectables). Sağlayıcılar sunucuların belirli bir tür hizmeti sağlamasını sağlar. Enjekte edilenler ise bu hizmetleri kullanır ve dependency injection ile enjekte edilir.

Angular'da, sağlayıcılar bileşen için bir hizmet oluştururken, enjekte edilenler (injectables) bu hizmeti kullanırken kullanılır. Sağlayıcılar, module providers, component providers veya service providers olabilir.

Bir bileşenin bağımlılıklarının enjekte edilmesi için, bileşen sınıfında constructor fonksiyonu oluşturulurken, bağımlılıklar bağımlılık listesi içinde sıralı olarak belirtilir. Örn:

constructor(private userService: UserService, private router: Router){ }

Angular, bir bileşen tarafından kullanılan veya kullanılabilen bir bileşenin enjekte edildiği hiyerarşi yapısını izler. İlk olarak, yerel sağlayıcılara bakar, ardından üst öğrendeki sağlayıcılara bakar ve ana uygulama sağlayıcısına kadar takip eder. Bu şekilde, bir bileşenin enjekte edilmesi, birden fazla yerde kullanılabileceği ve kolayca değiştirilebileceği anlamına gelir.

Angular'da dependency injection kavramının kullanımı oldukça yaygındır ve Angular uygulamaları bu prensiplerle yazılmaktadır. Bileşenler arasındaki bağımlılıkların yönetimi, kodun daha anlaşılır ve bakımı daha kolay hale gelmesini sağlar.

Global Servislerin Kullanımı

Angular framework ile uygulama geliştirirken global servislerin kullanımı oldukça önemlidir. Global servisler, diğer bileşenler arasında veri/tanımdaç seviyesinde bilginin aktarımını sağlar ve verinin kullanımının daha kolay olmasını sağlar. Angular ile global servis kullanımı oldukça kolaydır.

Angular, HttpClientModule kullanarak global servislerin kullanımına izin verir. Bu sayede uygulama içindeki tüm bileşenler, belirli bir servisi kullanabilmektedir. Bir servisi kullanmak istediğiniz bileşen içine HttpClient service’ini import ederek işleme başlayabilirsiniz.

Örnek olarak, bir “user service” oluşturulduğunu varsayalım. Bu servis diğer bileşenler arasında kullanılırken, HttpClient service’ini kullanarak güncel veriler alınabilir ve uygulama içindeki tüm bileşenler bu verilere erişebilir.

Servislerin kullanımı esnasında Dependency Injection prensibinden de faydalanmaktadır. Bu prensip ihtiyacınız olan servisleri, kullanacağınız bileşenlerin constructor’ına tanımlayan bir yapıdır. Böylece servisler, bileşen içerisinde doğrudan tanımlanmaz.

Angular ayrıca Guard’ları kullanarak belirli bir bileşende kullanıcı girişi yapılırken, kullanıcı haklarını kontrol etmek için yetkilendirme denetimleri yapılmasını sağlar. Bu denetimlerin amacı, kullanıcıların giriş yapmadan önce kimlik doğrulamasını sağlamaktır.

Özetle, ngModule servislerini oluşturmaya ve kontrol etmeye yardımcı olurken, ngComponent servisleri kullanıcının herhangi bir bileşende veri erişimi yapmasını sağlar. Ayrıca Dependency Injection prensibi ve Guard’lar ile bir servis kullanıcının yetkilendirme denetimleri yapılarak, daha güvenli bir uygulama geliştirmeniz mümkün olur.

HttpClient kullanımı

Angular'da HTTP istekleri yapmak için HttpClient modülü kullanılır. Bu modül, HTTP istekleri yapmak ve cevaplarını almak için Angular uygulamasının anahtar modüllerinden biridir. HttpClient, XML HTTP Request (XHR) kullanarak iletişim kurar ve JSON, XML ve diğer veri formatlarına çıktı alabilir.

HttpClient kullanırken, HTTP istekleri önce HttpClient ile alınır ve ardından, istekin tamamlanması beklenmek sûretiyle abone olunur. İstek tamamlandığında, HttpClient abonelerine bir cevap sunar. HttpClient, istek ve cevap hakkında ayrıntılı bilgiler sağlar ve hata durumunda hata mesajları döndürür.

HttpClient kullanarak HTTP istekleri yapılırken, birçok seçenek ve yapılandırma öğesi vardır. İsteklerde kullanılabilecek başlıklar, parametreler ve özelliklerin yanı sıra, isteklerde zaman aşımı süresi ve hataların yönetimi gibi birçok yapılandırma seçeneği mevcuttur.

HttpClient, genellikle Angular uygulamalarındaki verileri almak ya da sunucuya yeni veri göndermek için kullanılan en yaygın modüllerden biridir. Özellikle REST API'lerle entegrasyon için kullanılır. HttpClient, Angular uygulamalarında verimli bir şekilde HTTP istekleri yapmanın standart bir yoludur.

Guardlar Kullanımı

Angular uygulamalarında, guardlar, özellikle router'nın herhangi bir işlemi yapmadan önce geçerli olup olmadığını kontrol etmek ve gerekirse işlemi durdurmak için kullanılır.

Routing guardları, kullanıcının belirli bir rotaya erişip erişemeyeceğini kontrol eder. Herhangi bir rota işlemini yapmadan önce veya belirtilen durumlarda belirli işlemler yapılmasına izin verir. Angular, beş farklı routing guardı sağlar:

• CanActivate
• CanActivateChild
• CanDeactivate
• CanLoad
• Resolve

Authorization guardları ise kullanıcının belirli bir işlemi yapmaya yetkili olup olmadığını kontrol eder. Kullanıcının oturum açmış olması veya belirli bir role sahip olması gibi belirli gereksinimleri karşılaması gerekir. Bu guardlar genellikle, kullanıcının özel bir sayfaya erişip erişemeyeceğini kontrol etmek için kullanılır.

Angular, CanActivate guardını kullanan birçok örneğe sahip. Bu guard, kullanıcının belirli bir rotaya erişip erişemeyeceğini kontrol eder. Örneğin, belirli bir sayfa sadece belirli bir role sahip kullanıcılar tarafından görülebilir olabilir. Bu durumda, CanActivate guard'ı, kullanıcının oturum açmış olup olmadığını ve doğru role sahip olup olmadığını kontrol eder.

Bunun yanı sıra, Authorization guardları ile kullanıcının belirli işlemleri yapmasına izin verilip verilmeyeceği de kontrol edilebilir. Bu guardlar da CanActivate guard'a benzer şekilde kullanılabilir.

Routing guardları ve Authorization guardları, Angular'da oldukça önemli bir konudur. Her ne kadar birbirleriyle benzerlikleri olsa da, farklı amaçlar için kullanılırlar. Bu nedenle, uygulamanızda hangi guard'ın hangi amaçla kullanılacağını doğru bir şekilde belirlemeniz önemlidir.

Özet

Angular, modern web uygulamalarının tasarım ve geliştirme sürecinde oldukça popüler bir framework olarak kullanılmaktadır. Angular yapısının doğru yapılandırılması ve global servislerin kullanımı, uygulamanın daha verimli ve esnek bir şekilde çalışmasını sağlayabilir.

Angular uygulamasını yapılandırmak için modüller, NgModule, ve Component kavramlarının doğru kullanımı oldukça önemlidir. Modüller, uygulamanın parçalanması ve yönetilebilirliğinin artırılması için kullanılırken, NgModule ise uygulamanın ana bileşenlerini gruplayıp, diğer Angular yapılarıyla entegre bir şekilde çalışmasını sağlar. Componentler ise uygulamanın görsel bileşenlerini temsil eden ve kullanıcı arayüzünün tasarlanması açısından oldukça önemli elemanlardır.

Dependency Injection prensipleri ve HttpClient kullanımı da Angular uygulamalarının başarılı bir şekilde yapılandırılması için oldukça önemlidir. Global servisler sayesinde uygulamanın veri kaynaklarına erişmesi ve verileri düzenli bir şekilde yönetmesi mümkün olur.

Routing guardları ve Authorization guardları gibi Angular konseptleri, uygulamanın güvenli bir şekilde çalışmasını sağlamak için oldukça önemli bir görev üstlenir. Bu konseptler doğru bir şekilde kullanılarak, uygulamanın güvenlik açıklarının minimize edilmesi mümkündür.

Bu yazıda, Angular yapılandırması ve global servislerin kullanımı hakkında genel bir özet sağlandı. Angular uygulamalarının doğru bir şekilde yapılandırılması, uygulamanın performansını ve güvenliğini olumlu yönde etkileyebilir.