Angular 7 Proje Dosyaları ve Anlamları

Angular7

Merhaba arkadaşlar, Angular ile ilgili bir kaç makale daha yazmayı planlıyorum. Kısa bir Angular nedir ne değildir ve ne işe yarar gibi bir bütünlük olmasını düşünüyorum.

Bir önceki makalede de Oluşturduğumuz Angular projesinin dosyalarını inceleyerek devam edelim.

Angular

Oluşturduğumuz Yeni Proje ekran görüntüsünden ilerleyelim makalemize.

New Project

Dip Not: Ben IDE olarak visual studio code ve eklentilerini kullanıyorum. Başka bir makalede vscode ve kullandığım eklentilerden bahsedeceğim.

Projemizi oluşturduğumuza göre şimdi dosya ve klasör yapısına bakalım.

Dosya ve Dizin Yapısı

Dosya ve Klasör Açıklamaları:

  • e2e: dosyası (end to end) testlerin konfigürasyonlarıyla ilgili dosyaları içerir.
  • node_modules: Tüm çalışma alanları için npm paketleri sağlar .
  • src: Bizim için en önemli klasördür. Tüm işimiz burayla olacak.
  • src/assets: Uygulamanızı oluştururken olduğu gibi kopyalanacak resim dosyalarını ve diğer varlık dosyalarını içerir.
  • src/environments: Belirli hedef ortamlar için yapılandırma seçeneklerini içerir. Varsayılan olarak adlandırılmamış bir standart geliştirme ortamı ve bir üretim ortamı vardır. Ek hedef ve çevre yapılandırmaları tanımlayabilirsiniz.
  • src/main.ts: Uygulamanız için ana giriş noktası. Uygulamayı JIT derleyicisi ile derler ve uygulamanın kök modülünü (AppModule) tarayıcıda çalıştırmak için önyükler.AOT derleyicisini , --aotbayrağı CLI’ye buildve servekomutlarına ekleyerek çalıştırır. Herhangi bir kodu değiştirmeden de kullanabilirsiniz .
  • src/polfills.ts: FTarayıcı desteği için çoklu doldurma komut dosyaları sağlar.
  • test.ts: Ünitenizin ana giriş noktası, bazı Açısal spesifik konfigürasyonlarla. Genellikle bu dosyayı düzenlemeniz gerekmez.
  • src/tsconfig.app.json ve src/tsconfig.spec.json: TypeScript ve Angular template compiler seçenekleri de dahil olmak üzere çalışma alanındaki uygulamalar için varsayılan TypeScript yapılandırması.TypeScript Yapılandırması bölümüne bakabilirsiniz .
  • .editorconfig: Kod editörleri için konfigürasyon. EditorConfig bakın .
  • .gitigonre: Kasten izlenmeyen dosyaları belirtir Git görmezden gelir.
  • package.json: Çalışma alanındaki tüm projeler için geçerli olan npm paket bağımlılıklarını yapılandırır . Bu dosyanın özel formatı ve içeriği için npm belgelerine bakabilirsiniz .
  • tsconfig.json: Typescript’in compiler konfigürasyonlarını içerir.
  • tslint.json: Çalışma alanı genelinde tslint.jsondosyadan devralır .
  • angular.json: CLI hizmet ve test araçları, yapılandırma seçeneklerini içeren çalışma alanındaki tüm projeler için CLI yapılandırma varsayılan TSLint . Ayrıntılar için, bkz. Angular Çalışma Alanı Konfigürasyonu .

Şimdi sıra geldi en çok vakit geçireceğimiz alan olan src/ klasörünün içerisinde bulunan app dosyalarının yapısal ve içeriksel olarak incelemeye.

App Yapısı

App Klasörü ve İçeriği :

app/app.component.ts : AppComponent Adında uygulamanın kök bileşeninin mantığını tanımlar . Bu kök bileşenle ilişkilendirilen görünüm , uygulamanıza bileşenler ve hizmetler eklerken görünüm hiyerarşisinin kökü olur .

app/app.component.html : AppComponent Kökle ilişkilendirilmiş HTML şablonunu tanımlar .

app/app.component.css : AppComponent Kök için temel CSS stil sayfasını tanımlar .

app/app.component.spec.ts : AppComponent Kök için birim testi tanımlar .

app/app.module.ts : Angular’a uygulamanın nasıl birleştirileceğini söyleyen AppModule adlı kök modülünü tanımlar . Uygulamaya daha fazla bileşen ekledikçe, burada bildirilmeleri gerekir. Ayrıca bu kısım @NgModule’den türetilmiş olması gereklidir.

assets/* : Uygulamanızı oluştururken olduğu gibi kopyalanacak resim dosyalarını ve diğer varlık dosyalarını içerir.

Dosyaları ve ne iş yaptıklarını yazı üzerinde tanıdık bu kısma kadar kafanızda bir şeyler şekillenmeye başladı artık. Şimdi bu öğrendiklerimizi uygulama üzerinde pekiştirelim ve böylelikle tam oturacaktır her şey.

Tabi bunu başka bir makalede ele alacağız. Başka bir makalede görüşmek üzere.

You may also like...

Bir cevap yazın

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