Çalışma alanı ve proje dosya yapısı

Uygulamaları bir Angular çalışma alanı bağlamında geliştirirsiniz. Bir çalışma alanı, bir veya daha fazla proje için dosyaları içerir. Bir proje, bir uygulamayı veya paylaşılabilir bir kütüphaneyi oluşturan dosyalar kümesidir.

Angular CLI ng new komutu bir çalışma alanı oluşturur.

ng new my-project

Bu komutu çalıştırdığınızda, CLI gerekli Angular npm paketlerini ve diğer bağımlılıkları yeni bir çalışma alanına kurar ve my-project adında bir kök düzey uygulama oluşturur.

Varsayılan olarak, ng new çalışma alanının kök düzeyinde bir başlangıç iskelet uygulaması ve uçtan uca testlerini oluşturur. İskelet, çalıştırmaya hazır ve değiştirmesi kolay basit bir karşılama uygulaması içindir. Kök düzey uygulama çalışma alanıyla aynı ada sahiptir ve kaynak dosyaları çalışma alanının src/ alt klasöründe bulunur.

Bu varsayılan davranış, her uygulamanın kendi çalışma alanında bulunduğu tipik bir "multi-repo" geliştirme stili için uygundur. Başlangıç ve orta düzey kullanıcıların her uygulama için ayrı bir çalışma alanı oluşturmak üzere ng new kullanmaları teşvik edilir.

Angular ayrıca birden fazla projeli çalışma alanlarını da destekler. Bu tür bir geliştirme ortamı, paylaşılabilir kütüphaneler geliştiren ileri düzey kullanıcılar ve tüm Angular projeleri için tek bir depo ve genel yapılandırma kullanan "monorepo" geliştirme stilini benimseyen kuruluşlar için uygundur.

Bir monorepo çalışma alanı kurmak için kök uygulama oluşturmayı atlamalısınız. Aşağıdaki Çoklu proje çalışma alanı kurulumu bölümüne bakın.

Çalışma alanı yapılandırma dosyaları

Bir çalışma alanındaki tüm projeler bir yapılandırmayı paylaşır. Çalışma alanının en üst düzeyi, çalışma alanı genelinde yapılandırma dosyalarını, kök düzey uygulama için yapılandırma dosyalarını ve kök düzey uygulama kaynak ve test dosyaları için alt klasörleri içerir.

Uygulama proje dosyaları

Varsayılan olarak, CLI komutu ng new my-app "my-app" adında bir çalışma alanı klasörü oluşturur ve çalışma alanının en üst düzeyinde bir src/ klasöründe yeni bir uygulama iskeleti oluşturur. Yeni oluşturulan uygulama, bir kök bileşen ve şablonla birlikte bir kök modül için kaynak dosyaları içerir.

Çalışma alanı dosya yapısı oluşturulduktan sonra, uygulamaya işlevsellik ve veri eklemek için komut satırında ng generate komutunu kullanabilirsiniz. Bu başlangıç kök düzey uygulaması, CLI komutları için varsayılan uygulamadır (ek uygulamalar oluşturduktan sonra varsayılanı değiştirmediğiniz sürece).

Tek uygulamalı bir çalışma alanı için, çalışma alanının src alt klasörü kök uygulama için kaynak dosyalarını (uygulama mantığı, veri ve varlıklar) içerir. Çoklu proje çalışma alanı için, projects klasöründeki ek projeler aynı yapıya sahip bir project-name/src/ alt klasörü içerir.

Uygulama kaynak dosyaları

src/ dizininin en üst düzeyindeki dosyalar uygulamanızın çalışmasını destekler. Alt klasörler uygulama kaynağını ve uygulamaya özgü yapılandırmayı içerir.

src klasörünün içinde, app klasörü projenizin mantığını ve verilerini içerir. Angular bileşenleri, şablonları ve stilleri buraya yerleştirilir.

Uygulama yapılandırma dosyaları

Kök uygulama için uygulamaya özgü yapılandırma dosyaları çalışma alanı kök düzeyinde bulunur. Çoklu proje çalışma alanı için, projeye özgü yapılandırma dosyaları projects/project-name/ altındaki proje kökünde bulunur.

Projeye özgü TypeScript yapılandırma dosyaları, çalışma alanı genelindeki tsconfig.json'dan devralır.

Çoklu projeler

Çoklu proje çalışma alanı, birden fazla Angular projesi için tek bir depo ve genel yapılandırma kullanan bir kuruluş için uygundur ("monorepo" modeli). Çoklu proje çalışma alanı ayrıca kütüphane geliştirmeyi de destekler.

Çoklu proje çalışma alanı kurulumu

Çalışma alanında birden fazla proje bulundurmayı planlıyorsanız, çalışma alanını oluştururken ilk uygulama oluşturmayı atlayabilir ve çalışma alanına benzersiz bir ad verebilirsiniz. Aşağıdaki komut, tüm çalışma alanı genelinde yapılandırma dosyalarıyla birlikte ancak kök düzey uygulama olmadan bir çalışma alanı oluşturur.

ng new my-workspace --no-create-application

Daha sonra çalışma alanı içinde benzersiz adlara sahip uygulamalar ve kütüphaneler oluşturabilirsiniz.

cd my-workspace
ng generate application my-app
ng generate library my-lib

Çoklu proje dosya yapısı

İlk açıkça oluşturulan uygulama, çalışma alanındaki diğer tüm projelerle birlikte projects klasörüne gider. Yeni oluşturulan kütüphaneler de projects altına eklenir. Projeleri bu şekilde oluşturduğunuzda, çalışma alanının dosya yapısı çalışma alanı yapılandırma dosyası, angular.json yapısıyla tamamen tutarlıdır.

my-workspace/
├── … (workspace-wide configuration files)
└── projects/ (applications and libraries)
├── my-app/ (an explicitly generated application)
│ └── … (application-specific code and configuration)
└── my-lib/ (a generated library)
└── … (library-specific code and configuration)

Kütüphane proje dosyaları

CLI kullanarak bir kütüphane oluşturduğunuzda (ng generate library my-lib gibi bir komutla), oluşturulan dosyalar çalışma alanının projects/ klasörüne gider. Kendi kütüphanelerinizi oluşturma hakkında daha fazla bilgi için Kütüphane Oluşturma bölümüne bakın.

Bir uygulamanın aksine, bir kütüphanenin kendi package.json yapılandırma dosyası vardır.

projects/ klasörü altında, my-lib klasörü kütüphane kodunuzu içerir.