AngularJS Nedir? Ders 1

AngularJs!

 

AngularJS, Google ‘ın kendi projeleri için geliştirdiği daha sonra derleyip toparlayıp bir framework halinde biz developerların hizmetine sunduğu en iyi MVC frameworklerinden biridir.

Az kod çok iş!

Javascript’te elementlere id veya name ‘i vasıtasıyla ulaşıp, get, set edebiliyorduk. Zira jQuery ile bu işlermiz daha da kolaylaşmıştı. AngularJs ‘de bu konuda çok iyi.

Eğer bir aksilik olmaz ise AngularJs ‘i sizlere birkaç ders halinde aktarmaya çalışacağım. Araştırmalarım esnasında karşılaştığım problemleri ve çözümleride yine burada sizlere yazıyor olacağım.

AngularJs ‘e başlamak için aşağıdaki linkten gerekli dosyaları indirin. Bootstrap CSS framework ‘ünü ilerleyen derslerde arayüz tasarımı için kullanacağız.

Bootstrap: http://getbootstrap.com/

AngularJs: https://angularjs.org/    (Uncompressed olanı indirin, min olanı canlıya çıktığınızda kullanmanızı tavsiye ederim.)

Yeni bir klasörü açıp dosyaları gerekli klasörlere attığınızı var sayıyorum. Ve başlayalım 🙂

Yeni bir sayfa oluşturup(index.html), head tagleri arasına bootstrap ve angularJs frameworklerini ekleyelim. Bunu yaparken <html>  tag inde ng-app i belirtmeyi unutmayın, yoksa sayfanız düz html olarak yorumlanır, niye çalışmıyor diye debelenirsiniz.

<html ng-app>
<head>
<link rel="stylesheet" type="text/css" src="css/bootstrap.min.css" />
<script type="text/javascript" src="js/angular.js"></script>
</head>
</html>

Şimdi angularca dünyaya bir merhaba diyelim. Adettendir.

Body tag lerinin arasına aşağıdaki kod satırlarını yazın

{{ "Merhaba " + "Dünya!"}}
İki sayıyı topla:  {{ 4+4 }}

Ekran çıktınız aşağıdaki gibi olacaktır.
Merhaba Dünya
İki sayıyı topla: 8

Görüldüğü gibi “{{” ve “}}” aralığını AngularJs yorumluyor ve işlemi gerçekleştirip sonucu basıyor.Basitçe bir örnek yapmış olduk. Şimdi biraz daha ilerletelim ve asıl meseleye girelim.

AngularJs MVC yapısında bir framework demiştik. Pratikte nasıl oluyor şimdi bunu görelim. Öncelikle module ve controller ımızı içerecek olan js dosyamızı hazırlayalım.

App.js imizin içeriği

var app = angular.module('myModule', []);
app.controller('StoreController', function () {

});

Yukarıda myModule adında bir modül tanımladık ve controller adımızıda StoreController olarak belirledik.  Şimdi bunu sayfamızda nasıl kullanacağımıza gelelim.. Head kısmına app.js dosyamızı ekliyoruz. (Bu arada path e dikkat edin, kendinize göre ayarlayın)

<script type="text/javascript" src="js/myapp.js"></script>

Daha sonra, baştaki html tag imizin içine ng-app directive ‘ini ekliyoruz! Body tag inede yazdığımız controller ı belirtiyoruz. Neden body? Div de kullanamaz mıyız? Tabi ki de ! İlerleyen kısımlarda göreceğiz.

<html ng-app="myModul">
<body ng-controller="StoreController">

Hangi controller ı kullanacağımızı body de belirttik. Şimdi app.js deki controller ‘ımıza gidip basit bir object tanımlayalım.

var app = angular.module('myModule', []);
var prod = { name:'Gömlek',price: 9.99 };
app.controller('StoreController', function () {
this.product = prod;
});

Burada da basit bir JSON Object tanımladık ve product ‘a atadık. Şimdi burdan alacağımız veriyi View da ekrana basalım. Sayfamızın son hali şöyle;

<html ng-app="myModule"> 
<head> 
<link rel="stylesheet" type="text/css" src="css/bootstrap.min.css" /> 
<script type="text/javascript" src="js/angular.js"></script> 
<script type="text/javascript" src="js/myapp.js"></script> 
</head> 
<body ng-controller="StoreController as store"> 
{{store.product.name}} 
{{store.product.price}} 
</body> 
</html>

Örneğimiz bitti, çalıştırıp ekran çıktısını görebilirsiniz.. Burada StoreController a Alias verdik ve store olarak kullanacağız dedik. Controller daki objemizin isim ve fiyat değerlerini body tagları arasında ekrana basmış olduk. Bu arada ng-controller directive ‘i ile ilgili olarak; hangi tag in içinde kullanırsanız sadece onu etkiler. Yani body altına div tagı açıp onun içinede ng-controller tanımlayabilirsiniz ve sadece o div in içinde çalışır. Örnek;

<div ng-controller="StoreController as store"> {{ store.product.name }} </div>

AngularJs ‘deki directive lerden biride ng-show. Şimdi bunu kullanımıyla ilgili bişeyler ekleyelim örneğimize. Mesela ürün stoklarda yok ise “tükendi” yazısını göstersin. Bunun için app.js deki objemize soldOut adında bool bir alan ekleyelim.

var prod = { name:'Gömlek',price: 9.99,soldOut:false };

Alanımızı ekledik. Şimdi de html kısmında bir div açalım ve ng-show directive ini kullanaraktan gelen false,true değerlerine göre tükendi yazısını göstereceğiz veya göstermeyeceğiz. Body içeriğini aşağıdaki şekilde değiştirin. (Sadece div tag i ekledim).

<body ng-controller="StoreController as store"> 
{{store.product.name}} 
{{store.product.price}} 
<div ng-show="store.product.soldOut">Tükendi!</div> 
</body>

Görüldüğü gibi gayet basit bir şekilde bunu da ayarlamış olduk. Peki birden fazla product olsaydı ne yapacaktık? Ona da bir directive imiz var diyor AngularJs, ng-repeat ! 🙂

Yine örneğimizi geliştirerek gidelim. App.js deki objemizi JSON Array yapacağız ve kayıt sayısını 2 ye çıkartacağız. Bunun için app.js deki prod umuzu aşağıdaki gibi değiştirelim.

var prod = [
{ name:'Gömlek',price: 9.99,soldOut:false },
{ name:'Pantolon',price: 29.99,soldOut:true };

2 adet ürün olmuş oldu böylece. Şimdi sayfamıza bu ürünleri basalım.

<body ng-controller="StoreController as store">
<div ng-repeat="product in store.product">
   <div style="width:100%;">
   <h1>{{product.name}}</h1>
   <h2>{{product.price}}</h2>
   <div ng-show="product.soldOut">Tükendi!</div>
   </div>
</div>
</body>

Ürün özelliklerini div in içine aldım ve ng-repeat directive ini kullandık. Store.product ı bir tablo gibi düşünün, product ise bir alias, div de foreach gibi 🙂 That’s it! Bu güzel özetin ardından dersimizi bitiriyorum 🙂

Yeni directive ‘ler ile Ders 2 de görüşmek üzere!

2 thoughts on “AngularJS Nedir? Ders 1

  1. Yine 2.dersi gelmeyen , gelemeyen bir egitim. Tesekkurler

    • Selam Akif, askerlik nedeniyle blogla ilgilenememiştim. Tekrar makale girmeye başladım. Angular ile ilgili derslere de devam edeceğim.
      İlgin için teşekkür ederim.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

Time limit is exhausted. Please reload the CAPTCHA.