- Angular, HTML'yi yeni niteliklerle genişletir.
- Angular, tek sayfa uygulamaları (SPA= > Single Page Application) için mükemmeldir.
- Google tarafından geliştirilmiştir ve desteklenmektedir.
- Angular ile bir sayfa içerisinde olaylar yönetilebilmektedir. Url değişir ancak sayfa reflesh olmaz.
- Tamamen tarayıcıda çalışan javascript uygulamasıdır. Bir javascript kütüphanesidir.
- Tamamen bir frontend tarafından değerlendirilen bir yapıdır.
- API: Bir bir data mı bir veri tabanına mı ihtiyaç var? Buna göre bir API kullanımı yapmamız gerekir. Örneğin bir film sitesinde veri çekme veya banka sitesi ile iletişim sağlama gibi..
Kurulum işlemi bittikten sonra bir dosya oluşturup windows işletim sistemlerinin komut satırı(cmd) veya Visual Stadio programın terminal kısmına npm init yazarak önümüze gelen gelen soruları yanıtlayarak ya da npm init --yes diyerekten Package.json dosyası yüklenilir.
Package.json : Uygulama bilgilerini ve paket bilgilerini yönetebileceğimiz paket dosyasıdır.
windows işletim sistemlerinin komut satırı(cmd) veya Visual Stadio programın terminal kısmına npm install -g @angular/cli komut satırı çalıştırarak angular kütüphanesi yüklenilir veya npm install -g @angular/cli@verisiyon şeklinde indirmek istediğimiz versiyonu belirtebiliriz.
- cd desktop masaüstüne geçiş yapılır
- ng help ng ile yapabileceğimiz işlemler gelir. Örneğin bir dosya oluşturmak gibi...
- ng new Angular Angular adında bir dosya oluşturur.
- cd Angular Angular klasörüne giriş yapılır
- code . ile bizim kullanacağımız editör gelir(Visual Stadio)
- ng serve proje çalıştırılır.
- ng buildBir Angular uygulamasını bir çıktı dizininde derler.
- ng serve Dosya değişikliklerini yeniden oluşturarak uygulamanızı oluşturur ve sunar.
- ng generate Bir şemaya dayalı olarak dosyalar oluşturur veya değiştirir.
- ng testBelirli bir proje üzerinde birim testleri çalıştırır.
- ng e2eBir Angular uygulaması oluşturur ve sunar, ardından uçtan uca testler çalıştırır.
- ng-app bir Angular uygulamasını tanımlar .
- ng-model HTML kontrollerinin (input, select, textarea) değerini uygulama verilerine bağlar. [(ngModel)]='...' şeklinde kullanılır ve app.module.ts içerisinde export edilir.
- ng-bind uygulama verilerini HTML görünümüne bağlar .
- ng-init Angular uygulama değişkenlerini başlatır.
- {{ ifade }} Angular ifadeleri çift parantez içinde yazılır .
w3schools
Formlar
Kullanıcı girdisini formlarla işlemek, birçok yaygın uygulamanın temel taşıdır. Uygulamalar, kullanıcıların oturum açmasını, bir profili güncellemesini, hassas bilgileri girmesini ve diğer birçok veri girişi görevini gerçekleştirmesini sağlamak için formları kullanır.
Reaktif formlar , temel alınan formlar nesne modeline doğrudan, açık erişim sağlar. Şablon temelli formlarla karşılaştırıldığında, daha sağlamdırlar: daha ölçeklenebilir, yeniden kullanılabilir ve test edilebilirler.
Şablona dayalı formlar , temel alınan nesne modelini oluşturmak ve işlemek için şablondaki yönergelere dayanır. E-posta listesi kayıt formu gibi bir uygulamaya basit bir form eklemek için kullanışlıdırlar. Bir uygulamaya eklemek kolaydır, ancak reaktif formlar kadar iyi ölçeklenmezler.
| Farkları | REAKTİF [formControl] | ŞABLON ODAKLI [(NgModel)] |
|---|---|---|
| Form modelinin kurulumu | Açık, bileşen sınıfında oluşturuldu | Direktifler tarafından oluşturulan örtük |
| Veri örneği | Yapılandırılmış ve değişmez | Yapılandırılmamış ve değişken |
| Veri akışı | Senkron | asenkron |
| Form doğrulama | Fonksiyonlar | direktifler |
Şablona dayalı formlar , şablonda değişiklikler yapıldıkça bileşendeki veri modelini güncellemek için iki yönlü veri bağlamayı kullanır ve bunun tersi de geçerlidir.