Cuma 24 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. JavaScript
  3. Angular 2 ile Proje Oluşturmak ve Çalıştırmak
 Angular 2 ile Proje Oluşturmak ve Çalıştırmak
JavaScript

Angular 2 ile Proje Oluşturmak ve Çalıştırmak

Yazar : Bilal UÇAR 4 Ağustos 2017 0 Comment

JavaScript hızla büyüyen ve popülerliğini arttıran bir dil olarak karşımıza çıkıyor. JavaScript’in birçok frameworkü mevcut. Bu frameworklerin arasında en çok kullanılanlardan biri de şüphesiz Angular 2’dir.

Angular 2 Nedir?

Angular 2, HTML ve JavaScript’te web uygulamaları oluşturmak için açık kaynak kodlu bir JavaScript frameworküdür. Angular 2 tamamen sıfırdan yazılmış bir frameworktür. Bunu belirtmemin nedeni bildiğimiz Angular JS yani Angular 1.x ile alakası yoktur. Tamamen farklı bir mimari kullanılmıştır. Yani önce Angular JS’le başlayayım sonra Angular 2’yi öğreneyim daha kolay öğrenirim demek yanlış olur. Bu yüzden yeni bir dil öğreniyormuş gibi Angular 2’ye başlayın.

Angular 2 ‘de zorunlu olmamakla birlikte TypeScript kullanılması tavsiye ediliyor. Nedir bu TypeScript diye sorarsanız, hemen yanıtlayalım. TypeScript Microsoft’un geliştirdiği bir dildir. Peki bu dilin JavaScript’le ne alakası var?

TypeScript Nedir?

JavaScript ilk çıkarken büyük ölçekli uygulamalarda bizlere çok yardımcı olan classlar, interfaceler gibi nesne yönelimli yapıları içerisinde bulundurmuyordu. JavaScript patlama yaptıktan sonra büyük projeler için bir kolaylık sağlanması gerekiyordu. Typescript’in amacı büyük ölçekli uygulamalarda bize bu bahsettiğimiz yapıları kullandırtarak işlerimizi kolaylaştırmak.

Typescript kodu derlendiğinde çıktı olarak Javascript kodu üretiliyor. Yani Typescript içerisinde kullandığımız enum, interface gibi yapılar geçerli bir Javascript koduna çevriliyor. Bu yüzden Angular 2 ‘yle kodladığınız bir site sonuç olarak JavaScript’e çevriliyor. Projeyi tamamladıktan sonra build ederek js çıktısını alabiliyoruz.

Angular 2 İlk Proje

Kısaca Angular 2 ‘ye giriş yaptıktan sonra gelelim ilk projemizi oluşturmaya:
Öncelikle bilgisayarımıza Node.js ‘in en stabil sürümünü indiriyoruz. İlk olarak Node.js ‘in sitesine gidiyoruz. Anasayfada alt tarafta bizi iki tane sürüm bekliyor. Birincisi soldaki stabil sürüm. Diğeri ise yeni sürüm. Ben stabil olanı kullanmayı tercih ettiğimden soldakini seçip indiriyorum.


Daha sonra indirdiğim exe dosyasını çalıştırıp kuruluma geçiyorum. Hiçbir ayarı değiştirmeden, lisans sözleşmesini kabul ederek kurulumu tamamlayalım. En çok Windows işletim sistemi kullanıldığından bunun üzerinden anlatmayı tercih ettim. Eğer farklı bir işletim sistemi kullanıyorsanız takıldığınız noktalarda yorum yazarak yardım isteyebilirsiniz.

Node.js kurulumunu başarıyla bitirdikten sonra, sıra geldi angular-cli kurmaya. Angular 2 ile ilgili componentleri oluşturabilmesi ve kodların çalışabilmesi için npm install -g angular cli Angular komutu kullanılarak npm üzerinden angular-cli paketini indirmeniz gerekmektedir.

Öncelikle Windows’ta Komu İstemi ‘ne gidin. Bunu arama yaparak veya Windows Tuşu + R ‘ye basarak çalıştır penceresinin açılmasını sağlayabilir ilgili bölüme cmd komutu girilip tamam diyerekte açılabilir.

Gerekli yüklemeler bittikten sonra sıra geldi yeni proje oluşturmaya. Komut İstemci ‘sinden hangi klasöre proje oluşturmak istiyorsak oraya gitmeliyiz. Komut İstemini kullanmayanlar için örnek :  ben Masaüstüne yeni bir proje oluşturmak istiyorum. Bu yüzden cd Desktop yazıp Enter’e basıyorum. Bu sayede klasöre girebiliyorum. Bir üst klasöre çıkmak için de cd .. yapmanız yeterlidir. Bu sayede klasörlerde dolaşabilirsiniz.

Proje oluşturmak istediğiniz klasöre girdikten sonra ng new proje-adi şeklinde komut girerek proje dosyalarının otomatik oluşturulmasını sağlayabilirsiniz.

Projeniz oluşturulduktan sonra sıra geldi projeyi ayağa kaldırmaya. Bunun için ng serve yazmanız yeterli. Default olarak localhost:4200 adresi ve protunda çalışır. Hangı,i portta çalıştığı resimdeki çıktılarda görünüyor.

Herhangi bir tarayıcıdan localhost:4200 adresine girdiğimizde uygulamamızın çalıştığını görmekteyiz.

Bu makalede Angular 2’ye hızlı bir giriş yaparak ne olduğunu, proje oluşturmayı ve projeyi nasıl ayağa kaldırabileceğimizden bahsettik. Takıldığınız bir yer olursa sormaktan çekinmeyin. Bu konu hakkındaki düşüncelerinizi ve sorularınızı yorum yaparak bizlerle paylaşabilirsiniz.

Etiketler: angular 2 nedir angular 2 proje nasıl çalıştırılır angular 2 proje oluşturmak angular 2 ye nereden başlamalıyım türkçe angular kaynak typescript nedir
Önceki Yazı
Sonraki Yazı

Bilal UÇAR (Website)

administrator

Front-end Developer @Webmaster.Kitchen. Front-end developer olarak çalışıyorum. Bu konuda öğrendiklerimi sizlerle paylaşmaya çalışıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

Yorum Yap Yorumu İptal Et.

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

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.