Angular Projesi Oluşturma ve Çalıştırma

Angular Nedir?

Angular, Google tarafından geliştirilen ve bakım edilen, dinamik tek sayfalı uygulamalar (SPA) oluşturmak için kullanılan açık kaynaklı bir ön uç çerçevesidir. TypeScript tabanlı olup, geliştiricilerin karmaşık uygulamaları verimli bir şekilde oluşturmalarını sağlayan zengin araçlar ve özellikler sunar. Angular'ın temel prensibi bileşenler ve modülerliktir, bu da kodun daha düzenli ve bakımı kolay olmasını sağlar.

Angular'ın Ana Özellikleri ve Avantajları

• Bileşen Tabanlı: Kullanıcı arayüzünü bileşenler aracılığıyla oluşturma, kodun daha modüler ve yeniden kullanılabilir olmasını sağlar.
• Çift Yönlü Veri Bağlama: Veri modeli ve görünümün otomatik olarak senkronize edilmesi, veri yönetimini daha kolay hale getirir.
• Bağımlılık Enjeksiyonu: Bağımlılık enjeksiyonu mekanizması sayesinde, kodun test edilebilirliği ve bakımı artırılır.
• Güçlü CLI Araçları: Angular, proje oluşturma, geliştirme ve derlemeyi basitleştiren güçlü komut satırı araçları (Angular CLI) sunar.
• Dahili Yönlendirme ve Form İşleme: Angular, tek sayfalı uygulamalar oluşturmayı daha kolay hale getiren güçlü yönlendirme ve form işleme özellikleri sunar.

Angular kullanmak, geliştiricilerin modern ve hızlı web uygulamalarını daha verimli bir şekilde oluşturmasına yardımcı olur.

ServBay Kullanarak Angular Projesi Oluşturma ve Çalıştırma

Bu makalede, ServBay'in sağladığı Node.js ortamını kullanarak bir Angular projesi oluşturup çalıştıracağız. Projeye erişimi sağlamak için ServBay'in 'host' özelliğini kullanarak bir web sunucusu ayarlayacak ve ters proxy ve statik dosya servisi aracılığıyla projeye erişim sağlayacağız.

Angular Projesi Oluşturma

1. Projeyi Başlatma

   Öncelikle, ServBay tarafından sağlanan Node.js ortamını kurduğunuzdan emin olun. Ardından, Angular CLI'yi küresel olarak yüklemek için aşağıdaki komutu kullanın:

   npm install -g @angular/cli

   ServBay önerilen web sitesi kök dizininde /Applications/ServBay/www yeni bir Angular projesi oluşturun:

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   İstendiğinde proje adını (önerilen ad servbay-angular-app) girin ve diğer seçenekleri ihtiyaçlarınıza göre seçin:

   ? Would you like to add Angular routing? Yes
   ? Which stylesheet format would you like to use? CSS

2. Bağımlılıkları Yükleme

   Proje dizinine gidin ve bağımlılıkları yükleyin:

   cd servbay-angular-app
   npm install

Angular Proje Çıktısını Değiştirme

1. src/app/app.component.html Dosyasını Değiştirme

   src/app/app.component.html dosyasını açın ve içeriği değiştirerek web sayfasının "Hello ServBay!" çıktısını vermesini sağlayın:

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
   </div>

Geliştirme Moduna Girme

1. Geliştirme Sunucusunu Çalıştırma

   Geliştirme sunucusunu başlatın ve bir port (örneğin: 8585) belirtin:

   ng serve --port 8585

   Bu, yerel bir geliştirme sunucusu başlatacak ve 8585 portunu açacaktır.

2. ServBay Host Ters Proxy Ayarları

   ServBay'in 'host' özelliğini kullanarak geliştirme sunucusuna ters proxy aracılığıyla erişin. ServBay'in 'host' ayarlarında yeni bir ters proxy ekleyin:

   • Adı: My first Angular dev site
   • Alan Adı: servbay-angular-test.dev
   • Host Türü: Ters Proxy
   • IP: 127.0.0.1
   • Port: 8585

   Ayrıntılı ayar adımları için Nodejs geliştirme web sitesini ekleyin konusuna bakın.

3. Geliştirme Moduna Erişim

   Tarayıcınızı açın ve https://servbay-angular-test.dev adresine giderek projeyi canlı olarak görün. ServBay, özelleştirilmiş alan adı ve ücretsiz SSL sertifikası sağladığından daha yüksek güvenlikten faydalanacaksınız.

Üretim Sürümünü Oluşturma

1. Üretim Sürümünü Oluşturma

   Geliştirmeyi tamamladığınızda, üretim sürümünü oluşturmak için aşağıdaki komutu kullanın:

   ng build --prod

   İnşa tamamlandıktan sonra, oluşturulan statik dosyalar dist/servbay-angular-app dizininde yer alacaktır.

2. Statik Dosya Servisi Ayarları

   ServBay'in 'host' özelliğini kullanarak üretim sürümüne statik dosya servisi aracılığıyla erişin. ServBay'in 'host' ayarlarında yeni bir statik web sitesi ekleyin:

   • Adı: My first Angular production site
   • Alan Adı: servbay-angular-test.prod
   • Host Türü: Statik
   • Web Sitesi Kök Dizin: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app

3. Üretim Moduna Erişim

   Tarayıcınızı açın ve https://servbay-angular-test.prod adresine giderek üretim sürümünü görün. ServBay'in özelleştirilmiş alan adı ve ücretsiz SSL sertifikası ile web siteniz daha yüksek güvenlik ve güvenilirlik elde edecektir.

Yukarıdaki adımları izleyerek, bir Angular projesini başarılı bir şekilde oluşturup çalıştırdınız ve projeyi yönetmek ve erişmek için ServBay'in sağladığı özellikleri kullandınız.