Adı : Angular Nedir ve Nasıl Kullanılır?

Angular, Google tarafından geliştirilen bir JavaScript çerçevesidir. İstemci tarafında çalışır ve modern web uygulamaları oluşturmak için kullanılır. Angular, MVC (Model-View-Controller) tasarım desenine dayalıdır ve web uygulamalarını geliştirmek için gereken pek çok işlevi sağlar. Angular, kolay bir kullanım, modülerlik, performans, güvenlik ve genişletilebilirlik gibi özellikleriyle öne çıkar.
Neden Angular Kullanmalıyız?
Angular, modern web uygulamaları oluşturmak için oldukça popüler bir araçtır. Angular, HTML ve JavaScript teknolojilerini kullanır. Bu nedenle, nitelikli geliştiriciler daha önce bu dillerde deneyimli oldukları için kolayca öğrenebilirler. Angular'ın, uygulama kodları ve tasarımın ayrılmasına olanak tanıyan bir yapıya sahip olması, büyük uygulamaların daha kolay bir şekilde yönetilmesini sağlar. Ayrıca, Angular, evrensel bir ortamda çalışır ve birden çok platformu destekler.
Angular Kullanımı İçin Gereklilikler
Angular kullanmak için iki şeye ihtiyacınız var: Node.js ve Angular CLI. Node.js, JavaScript kodunun çalıştırılması için bir platformdur. Angular CLI (Command Line Interface), Angular uygulamalarını oluşturmak ve yönetmek için kullanılır. Angular CLI sisteminize yüklemek için, komut istemcisini kullanarak aşağıdaki adımları izleyebilirsiniz;
1. npm install -g @angular/cli
Bu, Angular CLI'nin sisteminize yüklenmesini sağlar.
2. ng new my-app
Bu, yeni bir Angular uygulaması oluşturur.
3. cd my-app
Bu, yeni oluşturulan uygulamanın klasörüne gider.
Angular Projenizi Oluşturma
Angular CLI ile yeni bir proje oluşturmak için öncelikle terminalde projenizin oluşturulacağı klasöre gitmeniz gerekiyor. Terminalde örneğin \"cd Desktop\" komutu ile masaüstüne gidebilirsiniz.
Ardından, \"ng new my-project\" komutunu kullanarak projenizi oluşturabilirsiniz. 'my-project' yazan yere proje adını yazabilirsiniz. Bu işlem tamamlandığında, proje klasörü oluşturulacaktır.
Kurulum bittiğinde, İlk adım olarak proje dosyalarının bulunduğu klasöre gitmelisiniz. Terminalde projeniz oluşturulan klasöre gitmek için \"cd my-project\" komutunu kullanabilirsiniz.
Angular Dosyalarına Kısa Bir Bakış
Angular projesi oluştururken, projenin her bir bileşeni için bazı dosyalar oluşturulur. Bu dosyalar, projenin birbirleriyle nasıl etkileşime girdiği konusunda bazı temel bilgiler içerir. Bazı temel dosyalar şunlardır;
1. package.json Dosyası
Bu, Angular projesinde kullanılan modüllerin, paketlerin ve bağımlılıkların listesi gibi birçok önemli bilgiyi içeren bir dosyadır. package.json dosyasında, projenizin bağımlılıklarını yönetebilirsiniz.
2. tsconfig.json Dosyası
Bu dosya, projenizin TypeScript ayarlarını yapılandırmaya yardımcı olur.
3. src Klasörü
Bu klasör, projenin kaynak kodlarını içerir. Bu klasörde, index.html, main.ts, app.module.ts, app.component.ts ve app.component.html dosyaları bulunur.
Örnek Bir Angular Uygulaması
Projeyi oluşturduktan sonra, sıradaki adım örnek bir uygulama oluşturmaktır. Bu uygulama, kullanıcılar tarafından girilen verilerin diziye eklenmesi ve ardından listelenmesi işlemini yapacaktır.
1. Component Oluşturma
İlk adım olarak, yeni bir bileşen oluşturacağız. \"ng generate component my-component\" komutunu kullanarak bileşeni oluşturabilirsiniz.
2. Template ve Component Düzenleme
Bileşenleri (component) oluşturduktan sonra, bileşenin HTML şablonunu (template) ve bileşen dosyasının (component.ts) kodu düzenlenmelidir. Örnek projemizde, bileşen dosyasını şu şekilde düzenleyebilirsiniz;
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
title = 'My Component';
name = '';
people: string[] = [];
addName() {
this.people.push(this.name);
this.name = '';
}
}
Ardından, bileşenimizin HTML şablonundaki (my-component.component.html) kodu aşağıdaki şekilde düzenleyebilirsiniz;

HTML kodları, bileşen dosyasında tanımlanan değişkenlere bağlıdır. Bu nedenle, eklenen veriler bileşen dosyasında tanımlanan people dizisine eklenecek ve ardından HTML şablonunda listelenecektir.
Sık Sorulan Sorular
1. Angular Versiyonları Nelerdir?
AngularJS ve Angular olmak üzere iki farklı versiyonu vardır. AngularJS, ilk sürümü olan versiyon 1.x ile başladı. Daha sonra, Google Angular 2 ile tamamen yeniden tasarlandı ve şu anda 11.x sürümünde kullanılmaktadır.
2. Angular Öğrenmek Zor Mu?
Angular, başlangıçta öğrenmesi zor gelebilir, ancak öğrendikten sonra oldukça kolay bir şekilde kullanılabilir. Angular, düzenli olarak güncellenir ve geliştirilir ve web geliştiricilerin ihtiyaçlarına cevap veren birçok araç ve kaynağa sahiptir.
3. Angular ile Neler Yapabilirim?
Angular, dinamik bir görsel arayüz oluşturmak, bir dizi iş akışı yönetmek, verileri güncellemek, RESTful API'lerle veri alışverişi yapmak, animasyonlar oluşturmak vb. birçok şey yapmanıza olanak tanır. Birkaç güncel örnekle birlikte, Angular tüm arayüzleri etkili bir şekilde kontrol edebilen modern web uygulamaları oluşturmak için kullanılabilir.