AngularJS Nedir? Nasıl Kullanılır?
AngularJS, dinamik bir web uygulaması geliştirmek için kullamılan JavaScript MVC kütüphanesidir. AngularJS başlangıçta Google’da bir proje olarak başlatılmıştır. Fakat günümüzde açık kaynak olarak sunulmaktadır..
AngularJS tamamen HTML ve JavaScript'i temel almaktadır, bu nedenle başka bir kodlama dili öğrenmeye gerek yoktur.
AngularJS statik HTML'yi dinamik HTML olarak değiştirir. HTML'in yerleşik özellikler ve bileşenler ekleyerek yeteneğini genişletir ve ayrıca basit JavaScript kullanarak özel özellikler oluşturma olacağı sağlar.
Google, 2012’de ilk sürümü AngularJS’i resmen yayınladı ve o zamandan beri de sürdürüyor.
AngularJS'nin piyasaya sürülmesinden önce, dinamik sayfalar oluşturmanın başka yolları vardı. Ancak, AngularJS kadar uygun değildi.
AngularJS, web uygulaması geliştirmede kullanılan Model-View-Controller (MVC) mimarisini kullanır .
MVC şunlardan oluşur:
- Model - bilgileri burada yönetilir.
- Görünüm - bilgilerin işlenerek görüntüsü oluşturulur.
- Denetleyici - veri girişlerini işler ve modelle bağlantı kurar.
Basitçe söylemek gerekirse:
- AngularJS, JavaScript ve HTML'yi bağlar
- JavaScript kullanıcı girişini kabul eder ve AngularJS'e gönderir.
- AngularJS, HTML’yi değiştirmek için kullanılır
Aşağıdaki, bir metni metin kutusuna ne yazdığınıza göre değiştiren basit bir AngularJS örneğidir.
<!DOCTYPE html>
<html>
<head>
<script src=js/angular.js"></script>
</head>
<body ng-app>
Lütfen isminizi yazınız: <input type="text" ng-model=“isim” /> <br />
Merhaba <label ng-bind=“isim”></label>
</body>
</html>
Yukarıdaki örnek, ng-app, ng-model ve ng-bind gibi birkaç AngularJS ile yazılmış düz HTML kodudur.
Aynı görev, aşağıda gösterildiği gibi, daha fazla kod satırına sahip jQuery kullanılarak gerçekleştirilebilir.
AngularJS'in Avantajları<!DOCTYPE html>
<html>
<head>
<script src=“js/jquery-1.10.2.min.js"></script>
</head>
<body>
Lütfen isminizi yazınız: <input type="text" id=“yazi” /> <br />
Merhaba <label id=“buraya”></label>
<script>
$(document).ready( function () {
$(‘#yazi’).keyup(function () {
$(‘#buraya’).text($('#yazi').val());
});
});
</script>
</body>
</html>
- Açık kaynaklıdır.
- Google tarafından desteklenir.
- Başka bir kodlama dili öğrenmeye gerek yok. Sadece saf JavaScript ve HTML.
- MVC tasarım modelini kullanır.
- Statik HTML'yi dinamik yapar.
- Özelleştirmesi kolaydır.
- Tek Sayfa Uygulamasını Destekler.
- REST dostu.
Kaliteli Web Sitesine Sahip Olun
Ümraniye başta olmak üzere tüm Türkiye'de en iyi standartlarda oluşturmak yerine profesyonel destek almak isterseniz, sizin için hızlı ve SEO uyumlu çözümler sunuyoruz.
Web Tasarım Hizmetimizi İnceleyin
