Bu yazıda, Angular’ın nasıl kurulacağını ve ilk projenizin nasıl oluşturulacağını adım adım göstereceğim.
Gerekli Ön Koşullar
Angular’ı kurmadan önce bilgisayarınızda aşağıdaki araçların kurulu olduğundan emin olmalısınız:
1 Node.js
2 npm: Node.js paket yöneticisi. Angular CLI ve diğer kütüphaneleri yüklemek için kullanılır.
Eğer bu araçlar kurulu değilse detaylar için aşağıdaki yazılarımı okuyabilirsiniz.
Node.js Nedir? Node.js Kurulumu Nasıl Yapılır?
Npm Nedir? Npm ile Paket Kurulumu Nasıl Yapılır?
Angular CLI Kurulumu
Angular CLI (Command Line Interface), Angular uygulamalarını oluşturmak, test etmek ve dağıtmak için kullanılan bir araçtır. Terminal ya da komut satırını açın ve aşağıdaki komutu çalıştırarak Angular CLI’yi yükleyin:
|
1 2 3 |
npm install -g @angular/cli |
Bu komut, Angular CLI’yi global olarak yükleyecektir.
İlk Angular Projenizi Oluşturma
Terminalde istediğiniz bir klasöre gidin ve aşağıdaki komutla yeni bir Angular projesi başlatın:
|
1 2 3 |
ng new merhaba-dunya |
Bu komut, “merhaba-dunya” adında yeni bir Angular projesi oluşturacaktır. Kurulum sırasında stil ve testle ilgili bazı sorular sorulabilir; bu soruların varsayılan değerlerini kabul edebilirsiniz.
Ayrıca bu komut, projeniz için gerekli dosyaları otomatik olarak oluşturur ve projenizin çalışması için gerekli olan bağımlılıkları yükler.
Oluşturduğunuz projenin klasörüne gidin:
|
1 2 3 |
cd merhaba-dunya |
Uygulamayı lokal sunucuda çalıştırmak için:
|
1 2 3 |
ng serve |
Bu komut, uygulamayı derleyecek ve http://localhost:4200/ adresinde çalıştıracaktır. Tarayıcınızı açıp bu adrese giderek uygulamanızın çalıştığını görebilirsiniz.
Projedeki src/app/app.component.ts dosyasını açın. Bu dosya, uygulamanızın ana bileşenini tanımlar.
Bu dosyanın içindeki title özelliğini “Merhaba Dünya!” olarak değiştirin:
|
1 2 3 4 5 |
export class AppComponent { title = 'Merhaba Dünya!'; } |
Ardından, src/app/app.component.html dosyasını açın ve tüm içeriği aşağıdakine değiştirin:
|
1 2 3 |
<h1>{{ title }}</h1> |
Tarayıcınızda, otomatik olarak güncellenmiş ve “Merhaba Dünya!” başlığını gösteren bir sayfa göreceksiniz.
Tebrikler! Başarılı bir şekilde ilk Angular uygulamanızı oluşturdunuz.
Umarım “Angular Kurulumu ve İlk Projenin Oluşturulması” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Create React App ile Hazır React Projesi Oluşturma
Yeni bir yazımda görüşmek üzere.
Happy coding!
