Angular CLI İle Angular Projesi Oluşturma
Angular CLI bir Angular projesi için gerekli komut setini barındıran yardımcı console uygulamasıdır ve bu makalede Angular CLI kullanarak yeni Angular projesi oluşturma işleminin nasıl yapıldığını anlatmaya çalışacağım.
Not: Angular projeleri oluştururken isimlendirmenin html selector olarak yapmanızı ister. Örneğin proje isimlendirmenizi spa-almendra-smart_school şeklinde yaparsanız ve ya SPA.almendra.SmartSchool şeklinde yaparsanız "Data path ".name" should match format "html-selector"." şeklinde bir hata ile karşılaşacaksınız. Bu durum ile karşılaşmamak için proje isimlendirmesine dikkat etmek gerekiyor.
Yeni bir proje oluşturmak için ng new spa-almendra-smart-school komutunu çalıştırıyoruz. Burada spa-almendra-smart-school proje ismidir ve bu isimlendirme benim projelerimde kullandığımı yapıdır. Buna benzer yapıları ve ya test işlemi için basit bir isimlendirme yaparak projenizi oluşturabilirsiniz.
Özetle Angular CLI ile yeni Angular projesi oluşturmak için ng new <proje-ismi> yapısını kullanmanız gerekiyor.
Eğer Angular projesini Visual Studio Code ile geliştiriyorsanız projeyi oluşturduktan sonra projenin oluşturduğu klasöre giderek "code ." komutunu çalıştırarak açabilirsiniz.
Not 1: Diğer proje türleri içinde "code ." komutunu çalıştırdığınızda mevcut klasör Visual Studio Code ile açılacaktır.
Not 2: code kelimesinden sonra nokta koyarak işlemi gerçekleştirebilirsiniz.
Kodlarımızı Visual Studio Code veya geliştirdiğiniz ortam hangisi ise sonraki hedef projeyi tarayıcıda açmak ve çalıştığından emin olmaktır. Bunun için angular-cli komutu olan ng serve kullanılır. Bu komutun parametreleri ile birlikte kullanımı "Angular Projelerini Çalıştırmak İçin ng serve Komutu" makalesinde detaylı anlattım.
...
Veya makale ile zaman kaybetmek istemiyorsanız ng serve --open komutunu çalıştırabilirsiniz. Makale içerisinde serve komutunun özel kullanımları da detaylı anlatılmıştır. Konuya hakim olmak istiyorsanız bu kısa makaleyi mutlaka okumanızı tavsiye ederim.
Yukarıdaki kodu çalıştırdıysanız aşağıdaki gibi bir çıktı alıyorsanız projeniz varsayılan tarayıcıda açılacaktır.
PS D:\Almendra Teknoloji\Project\AlmendraProject\spa-almendra-smart-school> ng serve --open --port 2300
** Angular Live Development Server is listening on localhost:2300, open your browser on http://localhost:2300/ **
Date: 2018-10-23T21:14:44.539Z
Hash: e0784a163d336dd976ef
Time: 7284ms
chunk {main} main.js, main.js.map (main) 13.1 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 228 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.69 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
Not: Angular projeleri oluştururken isimlendirmenin html selector olarak yapmanızı ister. Örneğin proje isimlendirmenizi spa-almendra-smart_school şeklinde yaparsanız ve ya SPA.almendra.SmartSchool şeklinde yaparsanız "Data path ".name" should match format "html-selector"." şeklinde bir hata ile karşılaşacaksınız. Bu durum ile karşılaşmamak için proje isimlendirmesine dikkat etmek gerekiyor.
Yeni bir proje oluşturmak için ng new spa-almendra-smart-school komutunu çalıştırıyoruz. Burada spa-almendra-smart-school proje ismidir ve bu isimlendirme benim projelerimde kullandığımı yapıdır. Buna benzer yapıları ve ya test işlemi için basit bir isimlendirme yaparak projenizi oluşturabilirsiniz.
Özetle Angular CLI ile yeni Angular projesi oluşturmak için ng new <proje-ismi> yapısını kullanmanız gerekiyor.
Eğer Angular projesini Visual Studio Code ile geliştiriyorsanız projeyi oluşturduktan sonra projenin oluşturduğu klasöre giderek "code ." komutunu çalıştırarak açabilirsiniz.
Not 1: Diğer proje türleri içinde "code ." komutunu çalıştırdığınızda mevcut klasör Visual Studio Code ile açılacaktır.
Not 2: code kelimesinden sonra nokta koyarak işlemi gerçekleştirebilirsiniz.
Kodlarımızı Visual Studio Code veya geliştirdiğiniz ortam hangisi ise sonraki hedef projeyi tarayıcıda açmak ve çalıştığından emin olmaktır. Bunun için angular-cli komutu olan ng serve kullanılır. Bu komutun parametreleri ile birlikte kullanımı "Angular Projelerini Çalıştırmak İçin ng serve Komutu" makalesinde detaylı anlattım.
...
Veya makale ile zaman kaybetmek istemiyorsanız ng serve --open komutunu çalıştırabilirsiniz. Makale içerisinde serve komutunun özel kullanımları da detaylı anlatılmıştır. Konuya hakim olmak istiyorsanız bu kısa makaleyi mutlaka okumanızı tavsiye ederim.
Yukarıdaki kodu çalıştırdıysanız aşağıdaki gibi bir çıktı alıyorsanız projeniz varsayılan tarayıcıda açılacaktır.
PS D:\Almendra Teknoloji\Project\AlmendraProject\spa-almendra-smart-school> ng serve --open --port 2300
** Angular Live Development Server is listening on localhost:2300, open your browser on http://localhost:2300/ **
Date: 2018-10-23T21:14:44.539Z
Hash: e0784a163d336dd976ef
Time: 7284ms
chunk {main} main.js, main.js.map (main) 13.1 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 228 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.69 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
Yorumlar
Yorum Gönder