Angular Nedir? Kurulum ve İlk Proje


Merhaba arkadaşlar.

Bugün Angular yazı serisine başlıyoruz. İlk olarak Angular nedir, ne için kullanılır gibi sorulara cevap verelim. Gerekli kurumlarımızı yapalım ve diğer yazımızda ise çalışma ortamını tanıyalım.


Angular; javascript tabanlı açık kaynak kodlu yazılım geliştiricilerin web, mobil ve masaüstü ortamda kolay uygulama geliştirmelerini sağlayan, Google tarafından desteklenen bir MVC platformudur diyebiliriz.



Angular Single Page Application uygulamalar geliştirmemize olanak sağlayan bir frameworktür.
Peki nedir bu Single Page Application(SPA)?

İnternet sitelerinin hemen hemen hepsi HTML, CSS, JavaScript, backend' de ise PHP ya da ASP kullanarak geliştiriliyor. Bu geliştirme türlerinde ise sayfalar arası geçiş yaptığınız da bütün kodlar yeniden yükleniyor. Yazdığınız Javascript kodları, CSS kodları tekrar tekrar yüklenmektedir ki bu da ciddi bir kaynak israfı anlamına geliyor. 
İşte burada devreye SPA giriyor. Sayfayı yeniden yüklemek yerine sadece ilgili bölümü değiştirir. Şimdi diyebilirsiniz ki " e bunu JQuery ile de yapabiliriz". Doğru JQuery ile de yapılabilir ancak JQuery bir kütüphanedir. Angular ise MVC yapısında oluşturulmuş bir frameworktür.

KURUMLAR

Visual Studio Code ‘da angular geliştireceğiz. İsterseniz farklı bir editörde kullanılabilir(Sublime Text vb.) Bir diğer indireceğimiz paket ise Node.js

Visual Studio Code indirmek için buraya tıklayın.
Node.js indirmek için buraya tıklayın.

İndirmeler tamamlandıktan sonra kurulum için cmd ekranını açalım ve aşağıdaki komutu yazalım.
npm install –g @angular/cli



Bu komut ile paketler otomatik olarak kurulur.

Kurumları tamamladıktan sonra herhangi bir yere dizin oluşturalım. Bu dizinin içine projemizi oluşturacağız. Cmd ekranından projemizi oluşturacağımız dizinimize gidelim ve dizin içerisindeyken aşağıdaki komutu yazalım.
ng new proje_ismi

Kurulum tamamlandıktan sonra cmd ekranında proje dizinimizin içerisine girelim ve " code . "
yazarak projemizi VS Code üzerinde açalım.
Projemizi çalıştırmak için ise " ng serve --open " yazarız ve tarayıcıda default olarak 4200 portundan projemiz ekrana gelir.

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

DLL Dosyalarını Exe'ye Gömme

Resim
Projemizde dll kullanmışsak exe’nin olduğu yerde bu dosyalar olmalı ki program çalışabilsin. Yaptığımız işi bir başka bilgisayarda çalıştırabilmek için ya bu dll’lerin olduğu dosyayı da atmalıyız ya setup yaparak programı o bilgisayara kurarız ya da sadece exe dosyasını atarız. Tabi bu son işlem için projemizde kullandığımız dll’leri exe dosyamıza gömmemiz gerekli. Araştırmalarım sonucu bunun için 2 yol buldum. -           ILMerge ile dll’leri gömeriz -           Ya da bu işlemi kendimiz VS ile yaparız. ILMERGE ILMerge’yi buradan indirebilirsiniz. 1 -) Add Assemblies butonu ile dll dosyalarımızı ve exe dosyamızı seçelim.       2 -) Bu adımda oluşturulacak exe’nin nereye oluşturulacağını seçelim.       3 -) Merge! butonu ile işlemi başlatalım. Dll dosyalarının boyutuna ve sayısına göre 1-2 dakika içerisinde dosyamız oluşmuş olacak. VS ile DLL...
Devamı

Jenkins Nedir? Continuous Integration(CI) ve Continuous Deployment(CD) Nedir?

Resim
Jenkins Nedir?         Jenkins, cross-platform ve açık kaynak kodlu otomasyon aracıdır. Otomasyon derken neyi kastediyoruz peki?         Bir projeyi yazarken sürekli build, test ve deploy işleriyle uğraşıyoruz. Bu işler bi süre sonra büyük bir zaman kaybına neden oluyor. Bi de proje birden fazla kişinin katıldığı bir ekip ile yazılıyorsa her hafta hatta her gün yeni commit’ler gelmesi olası. Jenkins bu build, test ve deploy işlemlerini bizim yerimize otomatik bir şekilde yapıyor.         Jenkins’i daha iyi anlamak için birkaç kavramı bilmemiz gerekiyor. Peki bunlar nedir? Continuous Integration(CI) ve Continuous Deployment(CD) Continuous Integration(CI)         CI kelime anlamı olarak sürekli entegrasyon anlamına gelmektedir. Aslında buradan bile bir anlam çıkıyor. CI, kodun Git gibi versiyon kontrol sistemlerinden sürekli değişiklik olup olmadığını kontrol edip en küçük d...
Devamı

DEVEXPRESS BEAK FORM ( FLYOUTPANEL )

Resim
Merhaba arkadaşlar. Bugün Devexpress’in gayet basit ve kullanışlı olan bi tool’undan bahsedeceğiz. Beak Form Win Form’da uyarı ya da notification vermek için ya da bambaşka bişey için de kullanılabilir. Konuyu daha fazla uzatmadan direk mevzuya gireyim. Toolbar’da FlyoutPanel’i aratıp forma sürükleyelim. Bu panelin içine herhangi bir tool atabiliriz. Peki bu araç nerede gözükecek. Yani bi textbox’ın yanında mı yoksa bu panelin üstünde mi yoksa formun kenarında mı işte bunu ayarladığımız property ise FlyoutPanel üzerinde OwnerControl. Burada nerede gözükmesini istediğimizi ayarlarız. Beak Form’u göstermek için ise aşağıdaki satır yeterlidir.    flyoutPanel1.ShowBeakForm(); Bu şekilde projemizi görsel açıdan daha güzel hale getirebiliriz. Devexpress'in diğer tool'larını da ilerleyen zamanlarda işlemeye devam edeceğiz. Şimdilik görüşmek üzere arkadaşlar.
Devamı