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

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:
bash
```
npm install -g @angular/cli
```
1
ServBay önerilen web sitesi kök dizininde /Applications/ServBay/www yeni bir Angular projesi oluşturun:
bash
```
cd /Applications/ServBay/www
ng new servbay-angular-app
```
1
2
İstendiğinde proje adını (önerilen ad servbay-angular-app) girin ve diğer seçenekleri ihtiyaçlarınıza göre seçin:
bash
```
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
```
1
2
Bağımlılıkları Yükleme
Proje dizinine gidin ve bağımlılıkları yükleyin:
bash
```
cd servbay-angular-app
npm install
```
1
2

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

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:
html
```
<div style="text-align:center">
  <h1>Hello ServBay!</h1>
</div>
```
1
2
3

Geliştirme Moduna Girme

Geliştirme Sunucusunu Çalıştırma
Geliştirme sunucusunu başlatın ve bir port (örneğin: 8585) belirtin:
bash
```
ng serve --port 8585
```
1
Bu, yerel bir geliştirme sunucusu başlatacak ve 8585 portunu açacaktır.
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.
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

Ü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:
bash
```
ng build --prod
```
1
İnşa tamamlandıktan sonra, oluşturulan statik dosyalar dist/servbay-angular-app dizininde yer alacaktır.
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
Ü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.