Angular 4 Notlarım

Neler Yüklemeli?

Proje klasöründe cmd’de “code .” yazıldığında otomatik olarak vscode ile açılır

Projenin olmasını istediğimiz klasör açılır, yeni angular projesi oluşturulur
-ng new <proje adı>

Uygulamayı çalıştırır ama herhangi bir browser açmaz
default 4200 portunda “localhost:4200” çalıştırır sadece
-ng serve

Eğer browser’da açılsın istiyorsak
-ng serve –open

Proje Yapısı Tanımlamaları
————————————
e2e(end to end test) > Unit Test ve diğer testlerin konfigürasyonlarının yapıldığı kısım
node_modules > Node ile indirilen paketlerin buluduğu yer
-src > Uygulamanın kendisinin yer aldığı kısım
-src/app >
-src/assets > imaj vs gibi dosyalar
-src/environments > Geliştirme ve yayın ortamı ile ilgili konfigürasyonların yer aldığı kısımdır
-src/index.html > Uygulamanın ayağa kalktığı html sayfadır, uygulama ana sayfasını ve root component directive ifade içerir
-src/main.ts > Uygulamanın giriş noktasıdır. Uygulamanın compile olması ve hangi modül ile uygulamanın başlayacağını içerir
-src/polyfills.js > Farklı tarayıcılar için angular uygunluk scriptleri içerir
-src/style.css > Bss tanımlamaları yapılan dosyadır.
-src/test.ts > Unit testlerin başlangıç dosyasıdır, konfigürasyonları içerir.
-angular-cli.json > Angular cli ile ilgili konfigürasyonları içerir
-.editorconfig > Kullanılan editor, ide ile ilgili ayarlar
-karma.conf.js > Unit testleri çalıştıran yapıdır
-package.json > Npm ile indirilen paketlerin konfigürasyonun olduğu kısımdır.
——-dependecies > Uygulama için gerekenler
——-devDependecies > Geliştirme akışı için gerekenler
-protractor.conf.js > e2e unit testleri ile ilgili ayarları içerir
-tsconfic.json > Typescript compiler konfigürasyon içeren dosyadır
tslint.json > IDE’de kodların formatlı ve intellisense ile yapılmasını sağlayan konfigürasyom

-src/app/app.component.css > İlgili komponent için olan css tanımlamaları buraya yazılır
-src/app/app.component.html > İlgili komponent için olan html tanımlamaları buraya yazılır
-src/app/app.component.spec.ts > İlgili komponent için olan unit test tanımlamaları buraya yazılır
-src/app/app.component.ts > İlgili komponentin kendisidir.
———bir html çıktısına hizmet eden class’tır
———selector > component çağrılacağı isim
———templateUrl > component kullanacağı html yapısı
———styleUrl > component kullanacağı css dosyası bilgisi
———providers > servis kullanılacak ise burada tanımlama yapılır.(singleton olur) sadece bu component’te instance alınır

-src/app/app.module.ts > Uygulamanın root modulüdür.
———declarations > dahil etmek istediğimiz componentler
———imports > dışarıdan servislreini, componentlerini kullanmak istediğimiz modüllerdir.(3.parti yada angular kendi modulleri)
———exports > appmodule kullanan biri appmodule içindeki hangi modülleri kullanabilir tanımı
———providers > servis kullanılacak ise burada tanımlama yapılır.(singleton olur)
———bootstrap > modülüm başlangıç component tanımlaması yapılır

(export > public anlamına gelir)
./ > bulunduğu klasöre bakar, hiç bişi yazmıyor ise src klasöründen bakmaya başlar

Component oluşturmak için
-ng g component <component adı>

Servis olusşturmak için hangi component altında servis oluşturacak isek önce oraya gideriz (product.Service gibi isim verilir)
-ng g service <Servis adı>

Servis için ne zaman component scope , ne zaman module scope
-servis datası değişken ve her yerde takip edilmek isteniyor ise örneğin sepet, componentler arasında gezerken sepete birşey eklenir çıkarılır ama hep aynı sepet olmalı, global olmalı(module scope)
-her component için yeni oluşturması gerekirse component scope provider kısmında tanımlanmalıdır

yeni third-party paket eklemek için
-package.json tanımlaması yapılır
-root kısımda “npm install” denir

Pipe > Çalışma esnasında getirilen datayı kullanıcıya daha farklı şekilde göstermek için kullanılan özel tekniklerdir
Kendi pipe’mızı oluşturmak için hangi component ile ilgili bir pipe yapılacak ise onun klasörüne gidilir
-ng g pipe <pipe adı>

Projenin deploy edilmesi aşağıdaki komut ile olur ve angular cli “dist” isimli bir klasöre deploy edilecek halde projeyi oluşturur
-ng build –base-href ./

Örnek Projem.

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someonePrint this page

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir