Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan Angular programlama dilinde komponent yapısı ve kullanımı hakkında kapsamlı bir eğitim içeriğidir.
- Video, Angular uygulamalarında komponent kavramının ne olduğunu, önemi ve temel bileşenlerini detaylı şekilde anlatmaktadır. Eğitmen önce teorik bilgileri aktararak komponentlerin sayfaların temel yapı taşları olduğunu açıklar, ardından pratik örneklerle template, style ve TypeScript dosyalarının nasıl oluşturulduğunu gösterir. Ayrıca Angular CLI ile yeni komponent oluşturma, selector özelliğinin kullanımı ve komponentlerin birbirleriyle nasıl etkileşime girdiği adım adım anlatılmaktadır.
- Eğitim içeriğinde ayrıca komponentlerin modüllerde deklare edilmesi gerekliliği, component dekoratörünün önemi, data binding ve pipe gibi Angular'ın özel özellikleri de ele alınmaktadır. Video, hem slayt üzerinden teorik bilgiler hem de pratik uygulamalarla desteklenen bir yapıya sahiptir.
- 00:01Angle Uygulamasında Komponent Yapısı
- Bu derste Angle uygulamasında temel yapı taşlarından biri olan komponent yapılanması incelenecek.
- Komponent, Angle uygulamalarındaki sayfaları tasarlamamızı sağlayan temel yapı taşıdır.
- Komponentler sayfaları tasarlamaya yetmez, aynı zamanda sayfa içerisinde parçalı olarak tasarlamamızı sağlayan özelliklere de sahiptir.
- 01:48Komponentlerin Konumlandırılması
- Angle uygulamasında komponentler fiziksel olarak source klasörü içerisindeki app klasörüne konumlandırılır.
- Bir Angle uygulaması oluşturulduğunda default olarak varsayılan bir komponent mevcuttur.
- Bu varsayılan komponent "app component" olarak adlandırılır ve uygulamanın temel başlangıç komponentidir.
- 03:31Komponent Yapısı ve Ana Komponent
- Bir komponentin bütünsel parçaları dört dosyadan oluşur: app.component.html, app.component.css, app.component.ts ve app.component.spec.ts.
- Ana komponentin uygulama için başlangıç komponenti olduğu, app modül dosyasındaki bootstrap alanında belirtilmesinden anlaşılır.
- Uygulama ayağa kaldırıldığında ana modül render edilir ve ekranda görünür.
- 10:30Angular Uygulamalarında Komponentler
- Angular uygulamalarında komponentler, uygulamanın merkezi yapılanmalarından biridir ve olmazsa olmaz bir parçadır.
- Komponentler genellikle sayfalar olarak kullanılır ve sayfa olarak kullanılan komponentlerin alt komponentleri olarak da kullanılabilir, böylece parçalı mantığında sayfalar geliştirilebilir.
- Komponentler kullanıcıları karşılayan, içerik sunduğumuz, kullanıcı deneyimlerini ve aksiyonlarını işlemelerini sağlayan sayfaların kendileridir.
- 11:40Komponentlerin İşlevleri
- Komponentler sayesinde kullanıcının yaptığı aksiyona karşılık hangi servisin tetikleneceğini belirleyebiliriz.
- Tüm kullanıcı etkileşimleri komponentler üzerinde gerçekleştirilir, bu nedenle uygulamada bir sayfa tasarlayacaksanız komponent tasarlamalısınız.
- Komponentler kendi aralarında ve kendi içlerinde iç içe kullanılabilir, bu da bakımı ve geliştirme sürecini kolaylaştırır.
- 14:13Komponentlerin Bağımsız Çalışması
- Her komponent kendi işlevselliğine ve görünümüne odaklıdır ve diğer komponentlerden bağımsız olarak çalışır.
- Komponentlerin bağımsız çalışması sayesinde değiştirilmesi, onarılması veya modifiye edilmesi gereken noktalar için sadece ilgili komponent üzerinde çalışmak yeterlidir.
- Komponentler birbirleriyle iletişim kurarak büyük ve karmaşık uygulamaları oluşturmayı kolaylaştırır.
- 16:00Komponentin Bileşenleri
- Bir komponent birden fazla bileşenden (yapı taşıdan) meydana gelir.
- Komponentin temel bileşeni olan template, komponentin görsel kısmını ifade eder ve HTML kodlarını barındırır.
- Template, Angular'daki direktifleri, pipe'ları çalıştırabilme kabiliyetine sahiptir ve data binding davranışını kullanabilmemizi sağlar.
- 19:04Angular'da Template Kullanımı
- TS dosyasında bulunan title field'ı, HTML'de angle operatörü kullanılarak çağrılabilir ve bu değer render edilir.
- Angular'da direktifler kullanılabilir, örneğin pipe operatörü ile değerler formatlanabilir.
- Template dosyaları, Angular'a özel elemanları destekleyerek veri bağlama (data binding) gibi davranışları sergileyebilir.
- 22:15Komponent ve Template İlişkisi
- Bir komponentin HTML dosyası, komponent ile templateUrl field'ı üzerinden ilişkilendirilir.
- TS dosyasında component dekoratörünün içinde templateUrl field'ı, hangi dosyanın template olarak kullanılacağını belirtir.
- Template işlemleri fiziksel olarak ayrı bir dosyada yapılabilir veya TS dosyası içerisinde template field'ı üzerinden gerçekleştirilebilir.
- 26:33Style Yapıtakası
- Bir komponentin style yapıtakası, CSS, SASS, CSS gibi stil türlerinde tasarımı sağlayan bir parçadır.
- Style, CSS uzantılı dosyalarına karşılık gelir ve komponent ile styleUrls field'ı üzerinden ilişkilendirilir.
- Birden fazla style dosyası kullanılabilir ve istenirse styleUrls yerine style field'ı üzerinden CSS tanımlamaları yapılabilir.
- 28:42Komponent Class'ı
- Bir komponentin merkezi ve esas unsuru component class'dır ve uzantısı TS olan bir dosyadır.
- TS dosyası, JavaScript, TypeScript ve jQuery işlemleri için kullanılır ve komponent içerisinde kullanılacak değişkenler ve fonksiyonlar bu sınıfta tanımlanır.
- Template içerisinde Bootstrap, Material gibi farklı tasarımsal kütüphaneler kullanılabilir.
- 30:09Angular'da Component Class
- Component class içerisinde JavaScript, TypeScript ve jQuery gibi işlemler gerçekleştirilebilir.
- Komponentin temel iş mantığı (business logic) ve servisler component class üzerinden yönetilir.
- Komponentin TS dosyası, komponentin "akli merkezi" olarak düşünülebilir ve frontend'in backendi gibi işlev görür.
- 32:06Selector Özelliği
- Selector özelliği, komponentin uygulamanın herhangi bir noktasında nasıl çağrılacağını tanımlayan referans özelliğidir.
- Selector özelliği sadece HTML dosyalarında kullanılabilir ve komponenti farklı bir HTML'de çağırmak için kullanılır.
- Selector çağrıldığında, compiler tarafından komponent render edilir ve üretilen çıktı ilgili noktaya basılır.
- 36:08Komponent Oluşturma ve Kullanımı
- Yeni komponent oluşturmak için "ng generate component" veya "ng g c" komutu kullanılabilir.
- Oluşturulan komponentler app klasörü altında kendi isimlerine karşılık gelen klasörlerde toplanır.
- Selector özelliği kullanılarak bir komponentin içeriği başka bir komponentin HTML'sine eklenebilir.
- 39:40Angular'da Komponent Kullanımı
- App component içerisinde selector özelliğini kullanarak başka bir komponenti iç içe kullanabiliyoruz.
- Selector özelliği sayesinde komponentler birbirini referans edebiliyor, ancak bunun için komponentler ya aynı modülde olmalı ya da bulundukları modülden export edilmiş olmalı.
- Bir komponenti uygulamada kullanabilmek için ana modülde deklare edilmiş olması gerekiyor.
- 44:58Komponent Oluşturma ve Kullanımı
- Bir komponentin görüldüğü gibi birden fazla yapıtaşı mevcut ve bunların bir bütün arz edebilmesi için komponent dekoratörü (metadata dekoratör) kullanılıyor.
- Komponent dekoratörü, komponentin nasıl yapılandırılacağını ve nasıl kullanılacağını tanımlayan bir dekoratördür.
- Bu dekoratör ile selector, template, style bilgileri, komponent arası yönlendirme, animasyonlar, input/output gibi tanımlamalar gerçekleştirilebilmektedir.
- 47:16Komponent Oluşturma Talimatı
- Angular uygulamalarında ana komponentin dışında farklı sayfalara veya ihtiyaçlara karşılık komponent oluşturmamız gerekebilir.
- Komponent oluşturma için Angular CLI üzerinden "ng generate component" veya kısaltması "ng g c" talimatı verilir.
- Talimatın ardından komponentin ismi belirtilir.
- 48:11Angular CLI ile Komponent Oluşturma
- Angular CLI kullanarak yeni bir komponent oluşturmak için "ng generate c" veya kısaltmasıyla "ng g c" komutu kullanılabilir.
- CLI ile sınıf oluşturmak için "cl", modül oluşturmak için "m", servis oluşturmak için "s" kısaltmaları kullanılabilir.
- Komponent oluşturma işlemi sırasında Angular CLI, komponentin temel yapı taşlarını oluşturur ve ana modülü günceller.
- 49:50Komponentin Ana Modüle Eklenmesi
- Bir komponentin uygulamada kullanılabilmesi için ana modülde deklare edilmesi gerekir.
- Ana modülün declaration kısmına komponent eklenir, böylece komponent her türlü özellikle kullanılabilir.
- Bir komponentin uygulamada kullanılabilmesi için ana modüle doğrudan veya dolaylı olarak deklare edilmiş olması gerekir.
- 51:09Dersin Kapanışı
- Bir komponentin uygulama tarafından tanınabilmesi için declaration kısmına eklenmesi gerekir.
- Uygulamada birden fazla modül olabilir ve modüller arasındaki ilişki ilerideki videolarda anlatılacaktır.
- Bu derste komponent oluşturma temelleri atılmış olup, sonraki derste Angular mimarisine daha detaylı bir şekilde girelecek.