Angular Hızlı Giriş

*Component(ng g c class1): class parçalarıdır, tekrara düşmemek için kullanılır.
*Routing: app-routing.module içerisinde tanımlanır.
*Module(ng g m content): Birleştirici veya gruplayıcı olarak kullanılır. İç içe moduleler veya componentleri barındırabilir.
Moduleler aap.module ile entegre edilir. Ör Module(BrowserModule/AppRoutingModule/HttpClientModule vb.) Oluşturulan moduleun componenentlerine farlı modulelerden erişim için exports: [ContentListComponent] olarak yazmak gerekir.


*Directives: Dom elementinin görünümünü davranışını veya düzenini değiştirmeyi sağlar.

1.Componentler: Görünümü veya şablonu olan direktiflerdir. Angular Component’ler özelleşmiş directive ‘lerdir. Directive ‘lerin template’li olanlarıdır da diyebiliriz. Component Directive ‘ler ana sınıfı oluşturur. Component’in çalışma süresinde nasıl başlatılıp işlenmesi ve nasıl kullanılması gerektiğine yön verir.
2.Structural: Dom elementlerini oluşturmak veya yok etmek için kullanılır.

Structure Directive ‘ler DOM nesnesinin yapısını manipule etmek ve değiştirmek için kullanılır. “*” işareti ile başlarlar.

Örneğin: *ngIf directive, *ngSwitch directive, and *ngFor directive.

  • *ngIf Directive: DOM elementlerini eklemeye silmeye izin verir.
  • *ngSwitch Directive: Bu directive de DOM elementlerini eklemeye silmeye izin verir. C# ve benzeri dillerdeki switch kullanımına benzer.
  • *ngFor Directive:  *ngFor directive, bir list için HTML üzerinde yinelenebilir html parçaları eklemeye yarar.


3.Attribute: Elementin davranışını ve görünümünü değiştirir. (ngClass, ngStyle).

Attribute Directive ‘ler DOM nesnesinin görünümünü ve davranışını değiştirmek için kullanılır.

Örneğin: ngClass directive, and ngStyle directive vs.

  • ngClass Directive: ngClass directive, Html elementlerine css class’ları eklemek silmek için kullanılır.
  • ngStyle Directive: ngStyle directive, Html elementlerine style eklemeye, style’larını dinamik değiştirmeye yarar.

*Service(ng g s service/user –skit-tests): Birden fazla componente veri sağlanması için kullanılır(Api üzerinden log tutma veri çekme gibi). Farklı componentlerde aynı veriye ihtiyaç duyulan noktalarda kullanılır.
@Injectable({providedIn: ‘root’}) //Injectable serviler uygulama içerisindeki her yerden çağırılabilir.
Public olarak constructor içerisindeki servis içeriklerine html classından erişilebilir fakat private durumunda sadece aynı class içerisinden erişilebilir.


*Pipes: Verileri dönüştürmek için kullanılan yapılardır. Bir değer gönderilir ve veri dönüştürülerek geri gönderilir.(büyük harfe çevir, decimal nokltala gibi)
Pipeslar | karakteri ile uygulanır.
ÖR: {{ today | date:format:’dd/mm/yyyy’| upparcase}}
ng g p pipes/avatar –skip-tests // {{user.name | avatar}}

Örnek proje(https://github.com/MehmetSert/kartvizit-app) yapımı notları;

ng new kartvizitapp
ng serve

ng g c components/home
ng g c components/about

material.angular.com> ng add @angular/material

Anasayfa
[routerLinkActiveOptions]: classı ile diğer sayfalara geçildiğindede url içerisinde / olduğu için active classı kalmaktaydı, bunu düzeltmek için kullanılır.

ng g m cards –route cards –module app: cards isimli modulu app module içerisiden route edilecek şekilde ayarlar.

app-routing.module.ts içerisinde router içerisinde loadChildren ile sadece route’a gidildiğinde sayfa yüklenir.

npm install –save bootstrap@next > angular.json dosyasına bootstrap.js ve css yolu eklenir.

ng g c cards/card-item : cards klasörü içerisinde component oluşturur.

@Input() card: any; : ile componente değer gönderimi yapılır.
strict mode açıkken değişkenlerin modelleri belirlenmelidir. :any gibi any verildiğinde component içerisinde classın özelliklerine . basılarak ulaşılamaz fakat model classı verilirse erişim sağlanabilir.

ng g interface models/card: inputların beklediği model class oluşturulur. model class içerisindeki değişkenlerin optional olduğunu ? işareti ile belirtebiliriz.
@Input() card!: Card;

ng g c cards/card-modal: modal companenti oluşturur.

ng g s services/card : sevisi ekler

ng g c components/content-list –module=content //farklı moduller içerisinde component oluşturmak için –module=modulAdi şeklide kullanılır.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s