0 beğenilme 0 beğenilmeme
115 gösterim

angularjs nedir

Google mühendislerinin geliştirmeye başladığı ve sonradan birçok developerın dahil olduğu açık kaynak kodlu javascript kütüphanesidir. MVC yapısıyla gelen AngularJs, SPA sayfalar geliştirmenize olanak tanıyan bir javascript kütüphanesidir.

Eğer kullanmaya kara verdiyseniz jQuery’den vazgeçmelisiniz. Aslında beraber çalışabiliyorlar ancak en ufak karışıklıkla işler çıkılmaz bir noktaya gelebilir. Ancak çok çok çok önemli bir kütüphaneye ihtiyacınız yok ise jQuery kullanmanıza zaten gerek yok çünkü AngularJs zaten jQuery’nin jQLite ismini verdiği element kütüphanesini içinde bulunduruyor. Hangi fonksiyonlar olduğunu merak ediyorsanız buraya tıklayarak detaylı bilgi alabilirsiniz.

AngularJs nasıl kullanılır ?

Şuanki versiyonu 1.5.0 resmi websitesi'nden projemize dahil edeceğiz.

Öncelikle boş bir index.html dosyası hazırlıyoruz.

<!DOCTYPE html>
<html>

  <head>
    <title>Merhaba AngularJs | uzmancoder.com</title>
  </head>

  <body>
    <h1>Merhaba Angular Js!</h1>
  </body>

</html>

Öncelikle Angularjs.org sitesine girerek AngularJs 1 kütüphanesini indiriyoruz.

Orada göreceğiniz AngularJs 2 var ancak ona sonra değineceğiz.

Aşağıdaki resimleri takip ederek gerekli javascript dosyası için CDN adresini kopyalıyoruz.

angularjs indir

angularjs indir

Aldığımız CDN linkini sayfamıza body tagından hemen önce ekleyelim.

HTML dosya mızın son hali aşağıdaki gibi olacak;

<!DOCTYPE html>
<html>

  <head>
    <title>Merhaba AngularJs | uzmancoder.com</title>
  </head>

  <body>
    <h1>Merhaba Angular Js!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  </body>

</html>

Evet artık sayfamıza javascript dosyasını dahil ettik. Ancak jQuery v.b gibi kütüphaneler gibi hemen kullanamıyoruz. Öncelikle hangi alanda kullanacağımızı ng-app direktifi ile belirtmeliyiz.

Belirtmeden önce neden böyle birşey var onu açıklayalım. Siz sitenizin her bir köşesinde Angularjs kullanmak zorunda değilsiniz. Bir kısmında (mesela sadece header) kullanmak isterseniz ng-app direktifini o kısımın olduğu div etiketine verebilirsiniz. Genellikle html yada yada body tagına eklenir çünkü birçok kişi tüm sitede angularjs’nin hakim olmasını ister. Ancak istisnalar olabilir ve bu bilgiyide aktarmak istedim.

Şimdi Html tagımıza ng-app direktifini yazıyoruz ve Angularjs’nin tüm sayfada çalışmasını istediğimizi söylüyoruz. Html kodumuz şu şekilde oluyor;

<!DOCTYPE html>
<html ng-app>

  <head>
    <title>Merhaba AngularJs | uzmancoder.com</title>
  </head>

  <body>
    <h1>Merhaba Dünya</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  </body>

</html>

Artık AngularJs’nin tüm nimetlerinden yararlanabiliriz. Ben bu konuda kısaca bir giriş yapacağım. Sonra ki makalelerimizde detaylı anlatımlara geçeceğiz.

Şimdi bir inputumuz olsun ve içine ne yazarsak yazalım istediğimiz bir etiketin içine onu yazsın. Örnek;

<!DOCTYPE html>
<html ng-app>

  <head>
    <title>Merhaba AngularJs | uzmancoder.com</title>
  </head>

  <body>
    <input type="text" ng-model="inputModel" />
    <h1>{{inputModel}}</h1>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  </body>

</html>

Yukarıdaki html sayfasını yaptığınıda inputun içine ne yazarsanız h1 etiketinde yazıldığını göreceksiniz.

Bunu ngModel direktifi sayesinde yaptık.

Ayrıca html içinde AngularJs değişkenlerini kullanmak için {{değişken}} şeklinde kullanıyoruz.

4 Ağustos 2017 Javascript kategorisinde serhat.öcal Uzman Coder (13,360 puan) paylaştı | 115 gösterim

Bu soruya cevap vermek için lütfen giriş yapınız veya kayıt olunuz.

uzmancoder.com'a Hoşgeldiniz. Sitemiz 24.06.2017 tarihinde kurulan bir soru-cevap platformudur.

Siz de aklınıza takılan soruları sorabilir veya diğer sorulara cevaplar yazabilirsiniz.

BU AY EN AKTİF ÜYELER


  1. Muhammet

    + 1/100 Puan



  2. uluturk

    + 1/120 Puan



  3. tughancjma

    + 1/100 Puan


97 soru

83 cevap

21 yorum

244 üye

×

Bizi Takip Edin!

Bumerang - Yazarkafe

comodo ssl




97 soru
83 cevap
21 yorum
244 üye