Angular Framework
Angular projelerimizi geliştirirken teknik olarak %100 zorunlu olmasa bile, pratikte işlerimizi çok kolaylaştırdığı, kodlarımızı javascript in superset’ i TypeScript ile yazdığımız için rahatça TypeScript’ ten javascript’ e compile etmekte yardımcı olduğu vb. pek çok sebepten ötürü Angular CLI’ ı kurmak ve kullanmayı öneriyorum. Angular CLI, nodejs ile birlikte çalışıyor. Bu yüzden öncelikle çalışma ortamınıza nodejs... » read more
Angular projeleri geliştirirken sıklıkla kullanılan Angular CLI komutlarını liste halinde bu başlıkta yazıyor olacağım. ng new Yeni bir angular projesi oluşturur. ng new projeIsmi Komut uygulandıktan sonra, projeye router modülünün dahil edilmek istenip istenmediğini sorar. Gelişmiş bir uygulama için router olmazsa olmaz olduğu için "Y" cevabını verin, ardından CSS için seçenekler getirir. Dilediğinizi seçebilirsiniz. Kurulum... » read more
Yeni bir angular projesi oluşturduğunuzda pek çok dosya ve klasör size çok yabancı gelebilir. İlk bakışta genel bir değelendirme yapalım. Online editor ile de canlı olarak dosyaları inceleyebilirsiniz; e2e, uçtan uca testler için node_modules, nodejs kullanan tüm projelerde bulunur. Compile, build vb araçlar, ilgili node modüllerini kullanıyor. src klasöründe projemizi yazdığımız kodlar bulunur. diğer config... » read more
![Angular projesine Bootstrap Eklemek [The Basics]](https://gelistir.net/wp-content/uploads/2019/10/maxresdefault-360x240.jpg)
Angular projenizde css framework olarak Bootstrap kullanabilmek için uygulamanız gereken ÇOK ÇOK basit adımları yazıyorum. Dilediğiniz bootstrap versiyonunu şu komut ile npm üzerinden indirin. cd projeKlasoru npm install --save bootstrap@3 Bootstrap dosyaları node_modules altına indirilecektir. Angular’ ın bootstrap den haberinin olması gerekiyor. Bunu gerçekleştirmek için, angular framework’ ün ayarlarını tuttuğu angular.json dosyasını açıyoruz. Bu dosyada... » read more
İlk defa Single Page Application yazacak kişiler için Angular’ ın nasıl çalıştığı biraz kompleks gelebiliyor. Çünkü klasik düzenden çok farklı. Klasik düzende, sayfalar backend’ teki layout larda bind edilir ve tarayıcıya rendered şekilde gelir. Lakin SPA yapısında sayfalarımız tamamen tarayıcıda render ediliyor. Backend’ ten XHR requestler ile data alınıyor ve sayfalara bind ediliyor. Server da... » read more
![Angular yeni bir component oluşturmak [The Basics]](https://gelistir.net/wp-content/uploads/2019/10/ang-360x240.png)
Angular Component bir TypeScript class’ ı dır. export class AppComponent { title = 'first'; } ÖNEMLİ NOT: Aşağıdaki anlatımda adım adım component yazmayı anlatıyorum. Lakin ng cli ile "ng generate component " şeklindeki komut ile de component oluşturabiliyoruz. Bu noktada, component leri elle mi oluşturucaz yoksa cli ile mi çelişkisi yaşamayın. Her iki yöntem de... » read more
AppModule Nedir ? Angular web sayfaları oluşturmak için component leri kullanır. Module leri ise component lerden paketler oluşturmak için kullanır. AppModule ise tüm module leri bir arada toplayan Root Module olarak görev yapar. AppModule Angular’ a şunları belirtmekle yükümlüdür; Uygulamadaki fonksiyonelliklerin(kütüphaneler, module ler vb.) varlığı ve kullanıldığı yerler import { BrowserModule } from '@angular/platform-browser'; import... » read more
Yeni bir component oluşturup uygulamamızda kullanmanın en basit yolunu anlatacağım. Amacımız şimdilik sadece işleyişi görmek olduğu için çok basit bir component olacak. ng generate component newProducts komutu ile newProducts adında bir component oluşturma emrini verdim. src/app/new-products klasörü altında; component class html template css dosyası test dosyası Oluşturuldu. AppModule dosyam altında gerekli import ve declaration işlemleri... » read more
Daha önce component oluşturmayı ve selector parametresini incelemiştik. Örneğin; @Component({ selector: 'app-new-products' }) Bu şekilde element ismi olarak component’ in selector değerini tanımlamıştık. Lakin component lerin selector tanımlamaları sadece element ismi ile sınırlı değil. Pek çok sebepten ötürü, selector değerini css class ismi yada attribute olarak tanımlayabilirsiniz. Örneğin, internette bootstrap vb. frameworkler üzerinde yazılmış ve... » read more
![Angular Data Binding Nedir ? [The Basics]](https://gelistir.net/wp-content/uploads/2019/10/top-18-most-common-angularjs-developer-mistakes-41f9ad303a51db70e4a5204e101e7414-360x240.png)
Data Binding Türkçe’ ye en güzel çevrilen teknik terimlerden birisidir. Türkçe’ si data bağlama. Tam olarak bunu yapıyor. TypeScript kodumuzdaki business logic içerisindeki veri ile template arasındaki bağlantıyı sağlayıp, çift taraflı olarak veriyi bağlıyor. Data Binding 3 kategoride incelenebilir; String Interpolation Property Binding Event Binding