Angular 4 – Oluşturulan Projeyi Visual Studio Code İle Açmak ve Yayına Almak

Merhaba,

Önceki Angular 4 İçin Yeni Bir Proje Oluşturmak başlıklı makalemizde Angular CLI ile bir Angular 4 projesi oluşturmuştuk. Şimdi ise oluşturduğumuz bu projeyi Visual Studio Code ortamına aktarmayı ve yapılan işlevleri canlı bir şekilde izleyebilmek için yayına almayı inceliyor olacağız.

Makale serimizde genellikle bir önceki makalede oluşturulan ya da ele alınan yapı bir sonrakinde de kullanılacağı için yapılara yapılan atıflar makaleler arasındaki bağımlılığı gerektirmektedir. O yüzden seriyi en başından seyretmeniz gerekebilir. Demek istediğim o ki, makaleler arası devam niteliğinde bir ilişki olacağından dolayı bazı yapılar önceki makalelerde oluşturulup sonraki makalelerin senaryolarında kullanılıyor olabilir. Bu bilinçle seriyi komple bir bütün olarak algılayınız.

Neyse biz konumuza dönelim.

Bir önceki makalede “OrnekProje” isminde bir Angular 4 projesi oluşturmuştuk. “Başlat” -> “Komut İstemi” kombinasyonuyla komut penceresine gelerek “OrnekProje” isimli klasöre “cd” komutu ile locate oluyoruz.
Angular 4 - Oluşturulan Projeyi Visual Studio Code İle Açmak ve Yayına Almak

Angular 4 projemizin bulunduğu klasöre locate olmamızın sebebi, bu klasördeki proje dosyalarını Visual Studio Code editörü üzerinde açmak istememizdir. Ve bu işlemi gerçekleştirmek için öncelikli şartımız ilgili klasöre locate olmamızdır.

Locate işleminden sonra ilgili dizinde aşağıdaki komutu yazarak projeyi komple Visual Studio Code ortamına taşımış olursunuz.

code .

Angular 4 - Oluşturulan Projeyi Visual Studio Code İle Açmak ve Yayına Almak
İlgili komutu çalıştırdıktan sonra direkt olarak Visual Studio Code editörü proje dosyalarını entegre bir şekilde karşımıza gelecektir.
Angular 4 - Oluşturulan Projeyi Visual Studio Code İle Açmak ve Yayına Almak

Evet… Şimdi projemizi Visual Studio Code ortamına aktarmış olduk. Bu noktadan sonra proje üzerinde yapısal çalışmaları ele alıp adım adım gelişmeye başlayacağız lakin ben genede “şuana kadar ne yaptık?” sorusuna istinaden projemizin neye benzediğini görmek adına uygulamayı yayına almayıda ele alacağım.

Bir projeyi yayına almak için komut penceresinde aşağıdaki komutları çalıştırmamız gerekmektedir.

ng serve

Eğer ki bu şekilde kodu çalıştırırsak uygulama varsayılan olarak “localhost” üzerinden “4200” portunda yayına geçecektir.
Angular 4 - Oluşturulan Projeyi Visual Studio Code İle Açmak ve Yayına Almak
Tabi yayın başladıktan sonra herhangi bir tarayıcıda site otomatik açılmayacaktır. Gidip manuel bir şekilde bir tarayıcı üzerinden “localhost:4200” adresini tetiklediğimiz zaman projemiz ilk temel/varsayılan şablonuyla aşağıdaki gibi bizi karşılayacaktır.
Angular 4 - Oluşturulan Projeyi Visual Studio Code İle Açmak ve Yayına Almak

Yaa! amaAa olmaz hoca! ben yayını başlattığım zaman otomatik tarayıcıda da projeyi görmek istiyorum!” diyorsanız eğer kodu aşağıdaki gibi yazmanız yeterli olacaktır.

ng serve --o
ya da
ng serve --open

Bu şekilde kodu belirttiğiniz zaman proje “localhost”un “4200” varsayılan portu üzerinde yayınlanacaktır ve otomatik olarak bir tarayıcıda projeyi açacaktır.

Yok eğer “4200” varsayılan port numarasını değiştirmek istiyorsanız aşağıdaki gibi müdahalede bulunabilirsiniz.

ng server --port 1453

Eğer ki yukarıdaki kodu çalıştırırsanız projemiz “localhost” üzerinde “1453” portunda çalıştırılacaktır.

ng server --port 1453 --open

Bu kodumuz ise benzer mantıkla projeyi “localhost” üzerinde “1453” portunda çalıştıracak ve projeyi otomatik tarayıcıda açacaktır.

Evet…

Angular 4 projemizi yayına nasıl alındığını görmüş olduk. Yayına alınan proje üzerinde yapılan tüm çalışmalar manuel yenileme yapmadan tarayıcı üzerinde anlık olarak güncellenmektedir. Bu sayede yapılan tüm işlemleri net bir şekilde takip edebileceğiz. Tabi bu nimetlerden ileride faydalandığımızı net bir şekilde göreceksiniz.

Bir sonraki makalemizde oluşturmuş olduğumuz Angular 4 proje dosyalarını tek tek ele alıp neyin ne işe yaradığından bahsedeceğiz.

O halde görüşmek üzere diyelim 🙂
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

2 Cevaplar

  1. 26 Mart 2018

    […] Angular 4 – Oluşturulan Projeyi Visual Studio Code İle Açmak ve Yayına Almak […]

  2. 26 Mart 2018

    […] Önceki makalemizde Angular 4 projesi oluşturmuş ve bu projeyi Visual Studio Code ortamına taşımış ve hatta yayına almıştık. Şimdi ise Angular 4 nimetlerine giriş yapmadan önce oluşturmuş olduğumuz bu projenin dosya ve klasörüleri üzerine ne nedir? ne değildir? maksadıyla genel bir bakış sergileyeceğiz. En nihayetinde bu şekilde Angular 4’ün çalıştığı fiziksel yapıları tanıyarak dolaylı yoldan Angular 4 yapısını zihnimizde oturtmaya başlayacağız. […]

Bir cevap yazın

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

*

Copy Protected by Chetan's WP-Copyprotect.