Angular Öğren - Kodlama Kursu
Angular Öğren - Kodlama Kursu — Telefonunda bir component yaz ve canlı olarak nasıl oluşturulduğunu izle
Angular Öğren - Kodlama Kursu, Angular’ı telefonunda öğrenmek isteyen yeni başlayanlar, öğrenciler ve JavaScript bilgisiyle gelen geliştiriciler için hazırlanmış ücretsiz bir iOS ve Android uygulamasıdır. component.ts, template.html ve styles.css’ten oluşan canlı üç bölmeli çalışma alanı, kodunu yazdıkça ekranda oluşturur; 38 kurs, ilk standalone component’ten signals, RxJS, NgRx ve server-side rendering’a kadar ilerler.
- Fiyat
- Ücretsiz, Pro yükseltmesi
- Platformlar
- iOS ve Android
- Diller
- 22
- Yaş sınırı
- 4+
- Gereksinimler
- iOS 15.1 veya üzeri
Class içindeki bir değeri değiştir, template’in de buna göre değiştiğini izle.
Angular’ın varlık amacını bütünüyle özetleyen şey, bir component’in class’ını, template’ini ve görünümünü senin için senkronize tutan bir framework olmasıdır. Çalışma alanı bunu telefon ekranında görünür kılar: component.ts dosyasını düzenlediğinde önizleme yeniden oluşturulur. Böylece dependency injection ve signals’ın ne yaptığını tanımını okumaktan çok daha hızlı biçimde gerçekten hissedersin.
Nedir
Angular Öğren - Kodlama Kursu, ilk standalone component’ten eksiksiz bir frontend yoluna kadar Angular framework’ünü öğreten, iOS ve Android için ücretsiz bir eğitim uygulamasıdır. Uygulama, yazdığın kodu önizlemede oluşturan canlı üç bölmeli bir çalışma alanı (component.ts, template.html, styles.css) kullanır. 38 kurs; signals, RxJS, routing, forms, NgRx state management ve server-side rendering konularını kapsar. Ayrıca 60 TypeScript coding mission ve anlamadığın her şey için bir AI Mentor sunar.
Uygulamanın içinde
Nasıl görünüyor
Kurs
Angular kursu neleri kapsıyor?
Uygulamanın kendi kurs listesinden alınan 38 kurs ve 144 ders — ilk standalone component'ten signals, NgRx ve server-side rendering'a kadar.
Components ve Proje Temelleri
Welcome to Angular, Angular CLI and Project Structure, Angular 19 Fundamentals, Standalone Components Deep Dive, Built-in Control Flow, Component Styling and Encapsulation ve Component Lifecycle Hooks.
Signals ve Reaktif State
Angular Signals Fundamentals, Signals: Computed and Effects, Signal Inputs and Queries, Signal-Based State Management ve NgRx SignalStore — component state'ini tutup türetmenin güncel ve önerilen yolu.
Services, Directives ve Templates
Dependency Injection Basics, Pipes: Built-in and Custom, Two-Way Binding and Model Inputs, Content Projection and Templates, Directive Composition API ve Advanced Components and Directives.
Routing ve Forms
Angular Routing and Navigation, Angular Router Advanced, Working with Forms, Reactive Forms Advanced ve Custom Form Controls.
RxJS ve HTTP
RxJS Fundamentals for Angular, RxJS Operators in Depth, HttpClient Interceptors ve HTTP and API Integration — bir component'i gerçek bir backend'e bağlayan katman.
State Management ve Testing
State Management with NgRx, Angular Unit and Component Testing ve End-to-End Testing for Angular.
Performans ve Production
Change Detection and Performance, Server-Side Rendering with Angular SSR, Hydration and Performance, Angular Animations, Internationalization (i18n), Micro Frontends with Module Federation, Building Angular Libraries ve Angular Security Essentials.
Nasıl çalışır
Çalışma alanında bir oturum nasıl işler?
Her ders, kısa bir açıklamayı canlı çalışma alanıyla eşleştirir. Böylece az önce okuduğun Angular kavramı ile onu kullanan kod, daha sonra yapılacak ayrı bir alıştırma yerine aynı ekranda yer alır.
Kavramı oku, ardından çalışma alanını aç
Kısa bir ders tek bir fikri — bir signal, directive veya router guard — tanıtır; ardından component.ts, template.html ve styles.css dosyalarını yan yana, yazdığın her şeyi oluşturan bir önizleme bölmesiyle birlikte kullanıma sunar.
Kodu değiştir ve component’in tepki vermesini izle
Class’taki bir değeri düzenlediğinde önizlemedeki template güncellenir; bir binding’i bozduğunda önizleme tam olarak bunu gösterir. Statik bir kod örneğinin yapamayacağı kısım budur ve kursun yalnızca okunacak snippet’ler yerine çalışma alanına dayanmasının nedeni de budur.
Bir TypeScript görevi yap, takıldığında soru sor
Dersleri, üç zorluk seviyesine yayılmış 60 coding mission izler; bir görevde ilerleyemediğinde ipuçları ve çözümlü anlatımlar sunulur. Hâlâ anlamadığın bir şey varsa — güncellenmeyen bir signal veya undefined dönen enjekte edilmiş bir service gibi — AI Mentor, dersin kendi sohbet ekranından bunu açıklar.
İçinde neler var
Uygulamayla birlikte gelenler
38
A1’den C1’e kurslar
Standalone component’lerden ve signals’tan RxJS, forms, routing, NgRx state management, testing, server-side rendering ve micro frontends’e kadar uzanan 38 kursta 144 ders.
Canlı
Üç bölmeli çalışma alanı
component.ts, template.html ve styles.css yan yana düzenlenebilir; yazdıkça Angular kodunu oluşturan bir önizleme sunar — çalıştırmak için bağlantı gerekir.
60
TypeScript coding mission
İpuçları ve çözümlü anlatımlarla birlikte üç zorluk seviyesi; ayrıca çok dosyalı çalışma alanları, yönlendirmeli proje yolları ve sürüm geçmişi sunan bir Projects sekmesi.
AI
AI eğitmeni (Pro)
Dersin sohbet ekranından bir hata, kavram veya kendi kodun hakkında soru sor; Pro ayrıca henüz tam olarak anlamadığın bir konu için AI lesson generator ve tarif ettiğin bir sayfayı koda dönüştüren AI playground ekler.
Dünya
World Coding Challenge
Herkesin çözümlerinin görülebildiği ortak bir problem; buna streak’ler, XP, leaderboard ve günlük hatırlatıcılar eşlik eder.
Sertifika
Tamamlama sertifikası
Mini quiz’lere, flashcard tekrarına ve syntax, decorator’lar ile directive’leri içeren tek sayfalık bir cheatsheet’e ek olarak final sınavı ve üzerinde adın bulunan bir sertifika.
Arka plan
Angular nedir ve onu gerçekten hangi sırayla öğrenmelisin?
Angular, Google tarafından sürdürülen ve TypeScript ile yazılmış bir frontend framework’üdür; büyük web uygulamalarının etkileşimli, single-page arayüzlerini oluşturmak için kullanılır. Kendi başına bir araya getirdiğin bir library’nin aksine, önceden belirlenmiş ve birlikte sunulan parçalarla gelir: component’ler, bir router, bir forms sistemi, dependency injection ve olay akışları için RxJS. Uygulamadaki pratik öğrenme sırası önce component’ler ve template’ler, ardından signals ve services, sonra routing ve forms, en sonunda da gerçek bir backend’le iletişim kuran RxJS ve HTTP katmanıdır.
Standalone componenttemel yapı taşı
Kendi class’ına, template’ine ve stillerine sahip, arayüzün bağımsız bir parçasıdır; paylaşılan bir module’e ait olmak yerine kendi bağımlılıklarını bildirir. Modern Angular uygulamaları bu yapılardan oluşan bir ağaç olarak kurulur. Bu nedenle kurs, eski module tabanlı kalıplarla değil, buradan başlar.
Signalstate yönetiminin güncel yolu
Herhangi bir template bölümünün okuyabildiği, signal() ile oluşturulan reaktif bir değerdir; computed() bir signal’dan diğerini türetir, effect() ise biri değiştiğinde kod çalıştırır. Signals, manuel change-detection çalışmalarının büyük kısmının yerini aldı ve artık bir component’in state’ini tutmak için önerilen yöntemdir.
Dependency injectionparçaların nasıl bağlandığı
Bir component ihtiyaç duyduğu service’leri kendisi oluşturmak yerine onları talep eder ve Angular da sağlar. Yeni başlayanların ilk karşılaşmada en çok zorlandığı kavram budur; aynı zamanda büyük bir codebase’i test edilebilir kılan şeydir, çünkü gerçek bir service’i bir testte sahte bir service’le değiştirmek kolaydır.
RxJS ve observablesveri akışı
Değerlerin tek seferde değil, zaman içinde geldiği durumlar için kullanılan bir library’dir: HTTP yanıtları, route parametreleri ve değiştikçe form girdileri gibi. Angular’ın HttpClient ve router’ı doğrudan observables döndürür; bu nedenle planlamış olsan da olmasan da map ve switchMap gibi operatörleri kullanmayı öğrenmen gerekir.
Uygunluk
Kimler için uygun — kimler için değil
Şu durumlarda senin için uygun
- Angular'a sıfırdan başlıyor ve arkasındaki teoriyi ezberlemeden önce bir component'in tepki verdiğini görmek istiyorsan
- JavaScript veya TypeScript biliyor ve ilk framework'ünü öğreniyorsan
- React ya da Vue ile çalışıyor, bir iş için Angular'a geçiyor ve her şeyi baştan öğrenmek yerine terimlerin karşılığını görmek istiyorsan
- Yalnızca çoktan seçmeli sorular değil, TypeScript kodlama görevleri ve gerçek bir çok dosyalı proje çalışma alanı istiyorsan
- Frontend developer mülakatına hazırlanan bir öğrenciysen veya kariyer değiştiriyorsan
Şu durumlarda doğru araç değil
- Çalışma alanının hiç bağlantı olmadan çalışmasına ihtiyacın varsa — canlı önizleme özellikle bağlantı gerektirir
- Her şeyin ücretsiz olmasını bekliyorsan: ilk kurs ve çalışma alanı ücretsizdir; Pro, AI araçları dahil geri kalan her şeyin kilidini açar
- Halihazırda production Angular uygulamaları geliştiriyor ve bir kurs yerine derinlemesine mimari ya da API referans materyali arıyorsan
- Akredite bir yeterlilik belgesine ihtiyacın varsa — sertifika, resmi bir yeterlilik değil, kursu tamamlama sertifikasıdır
Sorular
Sık sorulan sorular
Angular uygulamasının canlı çalışma alanı gerçekte ne gösteriyor?
Üç düzenlenebilir panel — TypeScript sınıfı için component.ts, markup için template.html ve stillendirme için styles.css — bunların herhangi birini düzenlediğinde component'i oluşturan bir önizlemenin yanında yer alır. Sınıftaki bir signal'ın değerini değiştirip template'in anında güncellenmesini izlemek, kitaptaki statik bir kod örneğinin gösteremeyeceği özel bir şeydir; bu nedenle kurs, yalnızca okumaya dayalı örnekler yerine bunun etrafında oluşturulmuştur.
Angular öğrenmeden önce JavaScript veya TypeScript bilmem gerekiyor mu?
Bir miktar JavaScript bilmek yardımcı olur, ancak önceden tamamlaman gereken bir ön koşul değildir. Angular, üzerine type system eklenmiş JavaScript olan TypeScript ile yazılmıştır. Kurs, bunları zaten bildiğini varsaymak yerine type annotation'ları ve interface'leri ihtiyaç oldukça tanıtır. Angular Öğren - Kodlama Kursu, ilk standalone component'ten başlar ve TypeScript'i onunla birlikte açıklar.
Angular signals nedir ve kurs neden onlarla başlıyor?
Signal, template'in doğrudan okuduğu signal() ile oluşturulan reaktif bir değerdir; computed(), mevcut signal'lardan yeni bir signal türetir ve effect(), bağlı olduğu bir signal değiştiğinde kodu otomatik olarak çalıştırır. Signals, component state'ini tutmanın güncel ve Angular tarafından önerilen yoludur; eski sürümlerde gereken manuel change-detection işlemlerinin büyük bölümünün yerini alır. Bu nedenle Signals Fundamentals kursu, ileri düzey bir konu olarak sona bırakılmak yerine kurs yolunun erken aşamalarında yer alır.
Angular ile React arasındaki fark nedir?
React bir rendering library'dir; router, forms yönetimi, HTTP client ve state management için çevresindeki araçları kendin seçersin. Angular ise tam kapsamlı bir framework'tür ve bu kararları önceden belirlenmiş şekilde sunar — components, dependency injection, router, RxJS ve artık signals yerleşik olarak gelir. React başlangıçta daha hafif, Angular ise daha ağır hissettirebilir; ancak büyük bir ekipte Angular codebase'i şirketten şirkete daha benzer görünür. Büyük kuruluşların onu kullanmaya devam etmesinin nedenlerinden biri de budur.
2026'da Angular öğrenmeye hâlâ değer mi?
Evet, özellikle hedefin bir yan proje değil de iş bulmaksa. Angular, büyük şirketlerde ve kurumsal araçlarda yoğun olarak kullanılır. Bu ortamlarda opinionated yapısı, yerleşik testing desteği ve uzun vadeli destek takvimi yenilikten daha önemlidir; bu nedenle Angular iş ilanları genellikle istikrarlıdır. Bu kurstaki signals ve SignalStore içerikleri de framework'ün güncel durumunu, eski bir görüntüsünü değil, yansıtır.
Bir şeyler geliştirecek kadar iyi Angular öğrenmek ne kadar sürer?
Toplam saatten çok düzenlilik önemlidir. Çoğu beginner, çalışma alanında her gün kısa derslerle ilerleyerek birkaç hafta içinde birkaç component oluşturup bunları birbirine bağlayabilir, signals ile aralarında veri aktarabilir ve bir API'yi çağırabilir. Dependency injection, RxJS operators ve NgRx state management genellikle ikinci bir tekrar gerektiren konulardır; kurs da bunları en başa koymak yerine temellerden sonra sıralar.
Angular Öğren - Kodlama Kursu iPhone ve Android'de kullanılabilir mi, kimler için?
Angular Öğren - Kodlama Kursu, App Store'da iPhone ve iPad için, Google Play'de ise Android için kullanılabilir. Arayüz 22 dilde sunulur ve yaş derecelendirmesi 4+'tır. Uygulama; tamamen beginner'lar, öğrenciler, kariyer değiştirenler, bir miktar JavaScript bilen ve ilk framework'ü olarak Angular'ı öğrenmek ya da React veya Vue'dan Angular'a geçmek isteyen developer'lar içindir.
Angular Öğren - Kodlama Kursu ücretsiz mi?
Uygulama App Store ve Google Play'den ücretsiz indirilebilir. İlk kurs ve canlı çalışma alanı ücretsizdir. Pro, ücretli yükseltmedir: tüm kursların, 60 coding mission'ın ve AI tutor, lesson generator ve playground'ın kilidini açar, ayrıca reklamları kaldırır.
Canlı önizleme offline olarak, metroda veya uçakta çalışır mı?
Hayır, özellikle önizleme çalışmaz — component'ini canlı olarak oluşturmak bağlantı gerektirir. Uygulama bunu sessizce işlev azaltarak değil, açıkça belirtir. Dersler ve okuma materyalleri bağlantının zayıf olduğu durumlarda bile yüklenir ve kullanılabilir; ancak tamamen offline bir çalışma alanına ihtiyacın varsa bu uygulamanın canlı önizlemesi bunu sağlayamaz.
Bu uygulamanın Google veya resmi Angular ekibiyle bağlantısı var mı?
Hayır. Angular Öğren - Kodlama Kursu, CoddyKit tarafından sunulan bağımsız bir öğrenme kursudur ve Google ya da Angular ekibiyle bağlantılı değildir veya onlar tarafından desteklenmez. Framework'ü Google'ın sürdürüp yayımladığı şekliyle öğretir; ancak uygulamanın kendisi resmi bir ürün değil, üçüncü taraf bir kurstur.
Başla
Bugün ilk Angular component'ini oluştur
iOS ve Android'de, 22 dilde ücretsiz başla.
CoddyKit'ten daha fazlası
iOS ve Android üzerinde kullanılabilir.