Angular CLI, Angular uygulamaları için kullanılan önyüz aracıdır Bu araç sayesinde uygulama yapmak, test etmek ve yayınlamak daha kolay hale gelir CLI, Angular projesi oluşturma, eklenti ekleme, test yapma, yayınlama ve daha birçok işlemi yönetir CLI sayesinde geliştiriciler daha fazla zaman kazanır ve uygulama yaparken işlerini kolaylaştırır CLI indirilip kurulduktan sonra, projeyi başlatmak için 'ng new' komutu kullanılır Projenin canlı olarak çalıştırılabilmesi için 'ng serve' komutu kullanılırken, 'ng test' komutu ile uygulama test edilebilir 'ng build' komutu ise uygulamanın AOI'ye uygun hale getirilmesini sağlar ve yayınlama için dosyaların yüklenmesi ve hosting hizmeti sağlayıcısına bağlanması yeterlidir
Angular CLI, Angular uygulamaları için önemli bir araçtır. Temel olarak, Angular CLI, Angular uygulamalarının hızlı ve kolay bir şekilde oluşturulmasına yardımcı olan bir önyüz aracıdır. Bu nedenle, Angular CLI kullanarak uygulama yapmak, özellikle büyük uygulamalar için çok daha kolay ve verimlidir.
Bu makalede, Angular CLI kullanarak uygulama yapmanın adım adım rehberini bulacaksınız. Bu rehber sırasıyla CLI'nin ne olduğundan, nasıl indirileceğinden ve kurulacağından, projeyi nasıl başlatacağınızdan, testleri nasıl yapacağınızdan, uygulamanın nasıl yayınlanacağına kadar her bir adımda size yardımcı olacaktır. Bu şekilde, Angular CLI kullanarak uygulama yaparken izleyebileceğiniz açık bir iş akışı elde edeceksiniz.
CLI: Nedir?
Angular CLI (Command Line Interface), Angular ile uygulama geliştiricilerine işlerini kolaylaştıran bir araçtır. CLI, Angular projesi oluşturma, eklenti ekleme, test yapma, yayınlama ve daha birçok işlemi yönetir. Birçok bitirme kullanıcısı, cli'nin inanılmaz olmanın yanı sıra kendilerini farklı bir seviyeye çıkardığını söylüyor.
CLI aynı zamanda geliştiricilerin yazılım mühendisleri olarak daha fazla zaman ayırmalarına yardımcı olur. Bunun nedeni, CLI'nin otomatik olarak birçok görevi çözmesidir. CLI aracılığıyla uygulama oluşturabilir, çerçevenizi hazır hale getirebilir, sınıflar, bileşenler ve servisler oluşturabilirsiniz. Bununla birlikte, Angular CLI sayesinde uygulamanızı hızlı bir şekilde test edebilir ve yayınlayabilirsiniz.
- Angular CLI, Angular projesi oluşturma, açıkça tanımlanmış bir proje yapısı (inits), gelişmiş kod oluşturma (generate), uygulama testleri oluşturma (test), kodunuzu canlı izleme ve hata ayıklama (serve), bağımlılıkları yönetme ve uygulama yapmanın birçok başka yönü için komutlar sağlar.
- CLI kullanmak, proje dizinizde basit, kullanışlı ve net bir yapı sağlar. Örneğin, bileşen, stil, test, hizmet, modül gibi geleneksel klasörleri anında ve yürütülebilir dosyaları ekler. CLI, dosya ve dizin yapısında tutarlılık ve okunaklılık sağlarken geleneksel kullanım olmadan kodunuzu çalıştırmanızı sağlar.
Bu nedenle Angular CLI, Angular uygulama geliştiricileri için vazgeçilmez bir araçtır ve her geçen gün popülerliği artmaktadır. Artık CLI hakkında kısa bir genel bilgiye sahipsiniz, şimdi CLI'nin nasıl indirileceğine ve kurulacağına gerektiği kadar ayrıntılı bir şekilde bakabilirsiniz.
CLI: Nasıl İndirilir ve Kurulur?
CLI'ın (Command Line Interface) indirilmesi ve kurulumu, Angular CLI kullanarak uygulama yapmak için ilk adımdır. CLI'ı indirmek için, öncelikle Node.js'in sisteminizde kurulu olması gerekir. Eğer Node.js yüklü değilse, Node.js web sitesinden veya paket yöneticinizi kullanarak yükleyebilirsiniz.
CLI'ın indirilmesi ve kurulumu aşağıdaki adımlarla gerçekleştirilir:
- CLI'ın indirilmesi için komut istemcisini açın (örneğin, Terminal).
- "npm install -g @angular/cli" komutunu girin ve Enter tuşuna basın. Bu komut, Angular CLI'ın en son sürümünü indirir ve global bir paket olarak sisteminize kurar.
- CLI'ın kurulduğunu kontrol etmek için "ng version" komutunu girin ve Enter tuşuna basın. CLI'ın sürüm numarasını gösteren bir çıktı almalısınız.
CLI kurulumu tamamlandıktan sonra, uygulama yapmak için yeni bir proje oluşturabilirsiniz. CLI kullanmak için kullanışlı bazı komutlar aşağıdaki gibidir:
| Komut | Açıklama |
|---|---|
| ng new my-app | Yeni bir Angular projesi oluşturur. |
| ng serve | Projenizi canlı olarak çalıştırır ve değişiklikleri anında görüntüler. |
| ng generate component my-component | Yeni bir bileşen ekler. |
| ng build | Projenizi derler ve HTML, CSS ve JavaScript dosyalarının optimizasyon ile bir araya getirilmesini sağlar. |
CLI: Projeyi Başlatmak
Angular CLI kullanarak uygulama yapmak istiyorsanız, ilk olarak proje oluşturmanız gerekiyor. Bu adımı gerçekleştirmek için bir terminal penceresi açın ve proje adını yazın. Ardından, yaratılacak proje için bir stil seçmeniz istenecektir. Burada, örneğin CSS veya SCSS seçeneklerinden birini seçmeniz gerekir.
Projenizin adını ve stilini seçtikten sonra, bir dizi dosya ve klasör oluşturulacaktır. Bu yapının oluşması, proje yapısının belirlendiği anlamına gelir. Bu yapıyı, projenin ana dosyasına erişmek için bir terminal penceresinde projenizi oluşturduktan sonra kullanabileceğiniz komutlarla tanımlayabilirsiniz.
Projeyi başlatmak istediğinizde ise, yine terminal penceresindeki komutları kullanabilirsiniz. 'ng serve' şeklinde bir komut kullanarak projenizi başlatabilirsiniz. Bu komut sayesinde, uygulama yerel sunucuda çalışarak canlı olarak izlenebilir hale gelir.
Bu aşamaları gerçekleştirdikten sonra, uygulamanızı test etmek isteyebilirsiniz. Bunun için de CLI yine kullanışlı bir araçtır. 'ng test' şeklindeki bir komut, Jasmine ve Karma gibi test araçlarını kullanmanızı sağlayarak uygulamanızı test etme imkanı sunar.
Angular CLI, uygulama yapmanın ve test etmenin yanı sıra uygulamalarınızı yayınlamanızı da mümkün kılar. 'ng build' şeklindeki bir komut, uygulamanızın AOI'ye uygun hale getirilmesini sağlar. Bu işlem tamamlandıktan sonra, uygulamanızı yayınlamak için dosyalarınızı yüklemek ve hosting hizmeti sağlayıcınıza bağlanmak yeterlidir.
Angular CLI kullanarak projeler yaratmak, uygulamalar geliştirmek ve yayınlamak oldukça kolay ve kullanışlı bir yöntemdir. CLI'nin sunduğu kullanışlı araçlar sayesinde, uygulamalarınızı hızlı ve kolay bir şekilde yönetebilirsiniz.
Proje Yapısının Tanımlanması
Proje yapısının doğru şekilde tanımlanması uygulamanın işleyişi için oldukça önemlidir. Bu adım özellikle büyük ölçekli projelerde oldukça hayati bir önem taşır. Angular CLI'de, proje yapısının tanımlanması oldukça kolaydır. Projenin çalışması için gerekli olan temel dosyaları otomatik olarak oluşturmak için sadece birkaç adım izlemek yeterlidir.
İlk olarak, projemizin ana dizinine giderek terminali açmak gerekmektedir. Sonrasında "ng new
Projenin oluşturulması sırasında CLI, "src" dizini adı verilen temel klasöre yerleştirilen birkaç dosya oluşturacaktır. Bunlar, proje için gerekli olan en temel dosyalardır. Bu dosyalar arasında "index.html," "main.ts" ve "styles.css" bulunmaktadır. Daha sonra, projenin çalışmasını sağlayan diğer kritik dosyaları oluşturmak için "ng generate" komutunu kullanabilirsiniz.
Proje yapısının tanımlanması aşamasında projenin ihtiyacına göre bileşenleri, hizmetleri, modelleri ve yönergeleri de tanımlayabilirsiniz. Bu adımın tamamlanması, Angular CLI ile uygulama yapmak için gerekli olan temel yapıyı oluşturacaktır. Projenin işleyişi sırasında bu yapılar, uygulamanın düzenli ve anlaşılır bir şekilde ilerlemesini sağlayacaktır.
Sonuç olarak, proje yapısının tanımlanması adımı, herhangi bir projenin oluşturulması için en temel aşamalardan biridir. Angular CLI ile proje yapısının tanımlanması oldukça kolaydır ve sadece birkaç adımda gerçekleştirilebilir. Bu sayede, Angular CLI ile uygulama yapmak oldukça hızlı ve verimli bir şekilde ilerleyebilir.
Ayaklar Yerden Kesiliyor
Angular CLI, uygulama yaparken hem geliştirme sürecinin hem de canlı olarak uygulamanın izlenmesinin basitleştirilmesi için entegre geliştirme sunucusu sunmaktadır. Bu sunucu sayesinde, geliştirme süreci boyunca yapacağınız değişiklikler anında uygulama üzerinde canlı olarak görüntülenebilir.
Server'ı başlatmak için, CLI komut satırına 'ng serve' yazmanız yeterlidir. Eğer sisteminizde daha önce bir değişiklik yaptıysanız, bu komut Update üzerine build yapacak ve uygulamayı canlı sunucu üzerinde çalıştıracaktır.
Yerel sunucuda uygulamayı görüntülemek için, web tarayıcınızda 'http://localhost:4200' adresini açmanız gerekmektedir. Bu URL kullanılarak, herhangi bir tarayıcı üzerinden uygulamanın çalışması test edilebilir.
Eğer birden fazla geliştirici aynı uygulama üzerinde çalışıyor ise, bu server kullanımı çok daha faydalı hale gelebilir. Geliştiriciler kendi yerel sunucularını çalıştırarak, farklı tarayıcılarda ve cihazlarda uygulamayı izleyebilir ve bu sayede herhangi bir sorunun zamandan tasarruf edilerek çözümü sağlanabilir.
Tüm bunlardan sonra server'ı durdurmak için Ctrl+C tuşlarına basarak CLI üzerinde bir görev yapabilirsiniz. Bu, aynı zamanda angular projesinin kapatılmasını da sağlar.
CLI: Testler
Angular CLI, uygulamanın test edilmesi için gerekli tüm araçları sunar. Test etmek için, "ng test" komutunu kullanarak Jasmine ve Karma yardımıyla testleri çalıştırabilirsiniz.
Jasmine, Angular uygulamasındaki testleri koşmak için kullanılan bir test çerçevesidir. Karma ise, test dosyaları için bir test çalışma zamanı ortamı sağlayarak testleri otomatik olarak koşturur.
Angular CLI ile Jasmine ve Karma'nın kullanılması oldukça kolaydır. Öncelikle, "ng test" komutunu kullanarak Jasmine ve Karma'yı projenize yükleyin. Daha sonra, ".spec.ts" uzantılı dosyalarda Jasmine syntax'ını kullanarak testlerinizi yazabilirsiniz. Karma testlerinizi otomatik olarak koşturduğu için, testlerinizin sonuçlarını anında görebilirsiniz.
Bunun yanı sıra, Angular CLI testler için bazı özel parametreler sunar. Örneğin, "--watch" parametresi test dosyalarınızı anlık olarak izlemenize olanak tanır. Ayrıca, "--code-coverage" parametresi ile test edilen kodların kapsamını da görebilirsiniz.
Overall, Angular CLI ile test yapmak oldukça kolay ve kullanışlıdır. Jasmine ve Karma'nın yardımıyla testlerinizi otomatik olarak koşturabilir ve projenizin güvenliğini sağlayabilirsiniz.
Jasmine ve Karma: Nedirler?
Jasmine ve Karma, Angular CLI tarafından kullanılan iki test çerçevesidir. Karma, testleri çalıştırmak için bir test çalıştırıcısıdır. Aynı zamanda, bir browser sunucusu olarak çalışarak, testlerinçoklu browserlerde yapılmasını da sağlar. Karma sayesinde testler değiştirildiğinde, çalıştırmak için tarayıcıların yeniden başlatılmasını sağlar.
Jasmine test çerçevesi, Angular CLI'de en sık kullanılan test çerçevesidir. Jasmine dil olarak yaklaşık olarak İngilizce'ye benzetilebilir ve testlerde kullanılabilecek birçok açıklayıcı fonksiyon sunar. Bu fonksiyonlar, test dosyaları içinde olan ve testlerin tam bir açıklama ve dökümantasyonuna olanak sağlayan metinlerdir.
Jasmine test dosyaları, öncelikle karma test çalıştırıcısı vasıtasıyla çalıştırılırlar. İşlem tamamlandığında, Karma sonucu testlerin başarılı olup olmadığını gösteren bir rapor gönderir. Jasmine ve Karma, Angular CLI tarafından sağlanan güçlü araçların sadece birkaçıdır. CLI kolay test yapımına ve kontrolüne olanak sağlamak için tasarlanmıştır.
Jasmine ve Karma: Nasıl Kullanılırlar?
Jasmine ve Karma, Angular CLI ile test yapmak için kullanılan iki önemli araçtır. Jasmine, bir test çerçevesidir ve test senaryolarını tanımlamak için kullanılır. Karma ise testlerin çalıştırılmasını sağlar.
Jasmine ve Karma, Angular CLI ile birlikte yüklenir. İlk adım, "ng test" komutunu kullanarak testi başlatmaktır. Bu komut, Jasmine ve Karma'yı otomatik olarak yapılandırır ve test senaryolarını bulur. Test senaryoları "src/app" dizini altında bulunur.
Test dosyaları "spec.ts" uzantılıdır ve test senaryoları karma.conf.js dosyası tarafından yapılandırılan tarayıcılarda çalıştırılır. Bu dosya, "test.ts" dosyasında referans edilir.
Test senaryoları, "describe" ve "it" ile tanımlanır. "describe" blokları, senaryonun ne hakkında olduğunu tanımlar ve "it" blokları, test edilecek özellikleri tanımlar. "expect" ifadesi, özelliklerin doğruluğunu kontrol eden ifadedir.
Karma, test senaryolarını farklı tarayıcılarda çalıştırır ve sonuçları raporlar. Karma, "karma.conf.js" dosyasında yapılandırılmıştır ve farklı tarayıcılar ve test ortamları ayarlanabilir.
Jasmine ve Karma, Angular CLI ile test yapmanın vazgeçilmez araçlarıdır. Angular uygulamalarının doğru çalışması için test etmek gereklidir. Jasmine ve Karma'nın kullanımı, Angular CLI ile kolay ve etkili bir şekilde gerçekleştirilebilir.
CLI: Yayınlama
Angular CLI'nin sağladığı en büyük avantajlardan biri, projelerimizi hızla yayınlayabilme olanağıdır. CLI, web uygulamamızı statik dosyalar halinde optimize etmek için Gulp veya Grunt gibi araçlarla karşılaştırılabilir bir performans sağlar.
Bir web uygulamasının yayınlanması, çok sayıda hata ve soruna yol açabilir. Ancak, Angular CLI, yayınlama işlemini basit bir hale getirir.
İşte bir Angular CLI projesinin nasıl yayınlanacağına dair adım adım talimatlar:
Öncelikle, Angular uygulaması için gerekli olan tüm dosyaları bir kök klasöre yerleştirmeniz gerekir. Bu işlem, dosyalarınızı uygun bir şekilde yerleştirerek ve son düzenlemelerin yapılıp yapılmadığından emin olarak gerçekleştirilir. Ardından, dosyalarınızı GitHub gibi bir depoya yükleyebilir veya doğrudan bir sunucuya taşıyabilirsiniz.
Bir web uygulamasının yayınlanması, ilk olarak web sunucusu ayarlarının yapılmasını gerektirir. Burada, Angular uygulamanızı barındırabileceğiniz ücretsiz veya ücretli bir Web Sunucusuna ihtiyacınız olacaktır. Uygulamanızı bir sunucuya ücretli bir hizmetle yapmanız gerektiğinde, hosting şirketinin sağladığı yönergeleri takip etmelisiniz.
Ardından, uygulamanızı web sunucusuna yükleyebilirsiniz. Bu işlemi, FTP veya doğrudan web sunucusuna yükleyerek veya bulut tabanlı bir host kullanarak yapabilirsiniz. Alternatif olarak, uygulamanızı GH Pages'e de yükleyebilirsiniz.
Son olarak, uygulamanızı yayınlayacak bir adım kaldı. Bu işlemin yapılması için, Angular CLI'de aşağıdaki komutu kullanmanız yeterlidir:
ng build --prod
Bu komut, uygulamanızı prod-ready haline getirir ve birkaç dakika sürer. Ardından, projenizi web sitesinde yayınlayabilirsiniz.
Aşağıdaki adımları takip ederek, Angular CLI aracılığıyla web uygulamanızı kolayca yayınlayabilirsiniz. Bu işlem, web uygulamanızı stabil ve tutarlı bir şekilde kullanıcılara sunmanıza yardımcı olacaktır.
Dosya Yüklemek
Angular CLI ile proje oluşturduktan sonra, projeye dosya yüklemek oldukça kolaydır. Angular CLI'nin sağladığı komutlar ile dosyalarınızı proje içerisine yükleyebilirsiniz. Bunun için öncesinde proje klasörü içerisinde olmanız gerekmektedir.
Dosya yüklemek için kullanabileceğiniz komut aşağıdaki gibidir:
| ng generate component example | Örnek bir bileşen oluşturmak için kullanılan komut |
Bu komut ile örnek bir bileşen oluşturabilirsiniz. Oluşturulan bileşen, projenizin klasörü içerisinde `src/app/example` yolunda yer alacaktır. İlgili bileşenin klasörüne giderek, içerisinde dosya yüklemek istediğiniz klasöre erişebilirsiniz.
Dosya yükleme işlemi için kullanabileceğiniz komut da aşağıdaki gibidir:
| ng generate component example | Örnek bir bileşen oluşturmak için kullanılan komut |
| ng g c example | Örnek bir bileşen oluşturmak için kullanılan kısa form komutu |
Bu komut ile örnek bir bileşen oluşturduktan sonra, projenizin klasörü içerisinde `src/app/example` yolunda dosyalarınızı yükleyebilirsiniz. Örnek olarak, `src/app/example/assets` klasörüne bir resim yükleyebilirsiniz.
Yükleme işlemi tamamlandıktan sonra dosyalarınız proje içinde yer alacaktır. Artık dosyalarınızı projenizde kullanabilirsiniz.
Hosting ve Publish
Uygulamanızı yaparak ve testlerinizi yaptıktan sonra bir sonraki adım projenizi yayınlamaktır. İlk yapmanız gereken şey projenizin production ortamına yapılandırılmış olmasıdır. Bu yüksek performansa sahip bir uygulamaya sahip olduğunuz anlamına gelir.
Bir sonraki adım, bir hosting hizmetinde bir hesap açmaktır. Hosting hizmeti, uygulamanızı paylaşmanıza ve yayınlamanıza izin verir. Firebase veya AWS gibi popüler seçenekler vardır.
Hosting sağlayıcınızı seçtikten sonra, Angular CLI aracılığıyla projenizi build edin. Bu, projenizi optimize eder ve production ortamı için hazırlar. Sonra clouda dosya yüklemek için dosyalarınızı projenize yükleyin.
Ayrıca, bir domain adı almanız gerekir. Hosting sağlayıcınızın talimatlarına göre hareket etmelisiniz, ancak genellikle bir domain adını bir alan kaydediciden satın almanız gerekir. Bu, projenizi yayınlamak için bir web adresine sahip olmanızı sağlar.
Son olarak, projenizi yayınlayın. Hosting sağlayıcınızın ayarlarına bağlı olarak, projeniz için bir CNAME kaydı oluşturmanız gerekebilir. Bu, bir alt alanından bağlantı verilen bir domain adı oluşturmanızı sağlar.
Projenizi yayınladıktan sonra, uygulamanıza herhangi bir kullanıcı erişebilir. Bu, uygulamanızın online olarak kullanılır duruma getirilmesini ve herkese açık hale getirilmesini sağlar.
Sonuç
Angular CLI, uygulama yapmak için son zamanlarda en popüler araçlardan biri haline geldi. CLI kullanarak, geliştiriciler, uygulama yapmayı ve yönetmeyi çok daha kolay hale getirerek zamanında teslimatı sağlarlar.
Angular CLI, başlatılan projeler için otomatik olarak yapılandırılmış bir altyapıya sahiptir ve bu, uygulamalar için sağlam bir temel oluşturur. CLI, çıktıların dahil edilmesi, test edilmesi ve optimize edilmesi için gereken tüm dosyaları ve araçları kullanır. Bunun yanı sıra, uygulama yapmanın yanı sıra projelerin yayınlanması ve hosting edilmesi için de kullanılabilir.
Bununla birlikte, Angular CLI kullanmanın en büyük avantajlarından biri, uygulama yapmak için gerekli olan ana yapıların hızlı bir şekilde oluşturulabilmesidir. CLI, bir çok şeyi otomatik olarak yapar, bu da geliştiricilerin uygulamanın diğer yönlerine daha fazla odaklanmasını sağlar. Ayrıca, Angular CLI, yardımcı dosyalar, bileşenler ve hatta testlerin kolayca oluşturulmasını sağlar.
Diğer avantajlar arasında, CLI üzerinden yayınlanan uygulamaların optimize edilmesi, çoklu dil desteği, veri güncellemeleri için otomatik yenileme ve daha birçok özellik yer alır. Bu nedenlerden dolayı, Angular CLI, uygulama geliştiricileri tarafından tercih edilen bir araç haline geldi.
Sonuç olarak, Angular CLI kullanarak uygulama yapmak, uygulamanın yapısını ve yönetimini kolaylaştırır. Bu araç, geliştiricilerin zamanında teslimat yapabilmelerini sağlar ve birçok özellik sunarak, uygulamaları hızlandırır. Kısacası, Angular CLI, teknoloji dünyasında önemli bir yere sahip olan uygulama geliştirme sürecini daha verimli ve kolay hale getirir.