Bu makalemizde AngularJS teknolojisi ile ilgili ilk örneğimizi gerçekleştireceğiz genel olarak nedir ve nasıl kullanılır tarzı sorulara cevap olması açısında hazırlanmış bir makaledir.

İçerik göster

AngularJS Nasıl Kullanılır İlk Örneğimiz

AngularJS Kütüphanesini kullanarak rahatlıkla ve hızlıca dinamik sayfalarınızı oluşturabilirsiniz performans açısındanda sayfaları refresh etmekden tek sayfalı projeler gerçekleştirebilirsiniz. Bu şekilde kullanıcıların daha rahat ve hızlıca işlem yapmasını sağlamış olacaksınız.

Öncelikle angularjs ile ilgili gerekli detaylı bilgilere https://angularjs.org/ adresinden ulaşabilirsiniz. AngularJs örneklerimizde alttaki angular kütüphanesini kullanacağız bu javascript kütüphanesini projenize dahil etmelisiniz.

Html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js" ></ script>

1	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js" ></ script>

AngularJS ile değerler üzerinde matematiksel veya string birleştirme gibi işlemleri direk olarak HTML içerisinde yapmak için alttaki gibi bir blok kullanmalısınız.

Örnek

4 + 3 = {{ 4 + 3 }}

Eğer angular kütüphanesini sayfanıza dahil etmediyseniz sayfada direk olarak {{ 4 + 3 }} düz bir metin şeklinde gözükecektir.

Sonuç

Üstte html kısmında görmüş olduğunuz gibi bir div etiketine ng-app attribute’ü ekledik bunun sebebi çalışmasını istediğiniz angular kodlarının ng-app attribute’üne sahip herhangi bir html element’ine verilmiş olması gerekiyor. Eğer yazmış olduğunuz angular kodları ng-app attribute’üne sahip html elementi altında yer almıyorsa yazmış olduğunuz kodlar düz metin olarak gözükecektir. Son olarak matematiksel işlemler yapılabildiği gibi string birleştirme veya değişkenler üzerinde işlemler yapmak içinde rahatlıkla kullanabilirsiniz bu blokları.

Modül Oluşturma

Modül oluşturmak için aşağıdaki gibi bir sözdizimi kullanmanız gerekmektedir.

var app = angular.module('gemStore', []);

1	var app = angular.module('gemStore', []);

Üstteki kodda gemStore diye adlandırılan kısım module adı oluyor html tarafında ng-app attribute’ümüze bu adı vereceğiz. ikinci parametrede ise köşeli parantezler içerisine modül bağımlılıkları eklenecek.

Controller oluşturma

Çok basit bir örnek ile oluşturduğumuz bir controller’in alert() fonksiyonu ile uyarı verdirmesini sağlayacağız.

Html

<!DOCTYPE html>
<html>
<body ng-controller="StoreController">
   
</body>
</html>

<!DOCTYPE html>

<html>

</body>

</html>

Javascript

function StoreController(){
    alert('Merhaba, Dünya')
}

function StoreController(){

alert('Merhaba, Dünya')

}

Nesneleri gizleyip gösterme

Nesneleri gizleyip göstermek için ng-show ve ng-hide şeklinde iki farklı yöntem bulunmaktadır. Bu yöntemlerin her ikisinide gizleyip göstermek için kullanabilirsiniz örneğin ng-show yöntemini hem gizlemek hemde göstermek için şu şekilde kullanabilirsiniz.

//Bunu ürün satıldıysa göstermek için kullanabilirsiniz.
<div ng-show="urun.satildi"></div>

//Bunu ise ürün satilmadiysa göstermek için kullanabilirsiniz.
<div ng-show="!urun.satildi"></div>

//Bunu ürün satıldıysa göstermek için kullanabilirsiniz.

//Bunu ise ürün satilmadiysa göstermek için kullanabilirsiniz.

Repeat Döngüsü İle Listeleme Yapma

Repeat döngüsü ile elemanları foreach döngüsü mantığı ile sırasıyla işleyebilirsiniz. Bu örneğimizde birden fazla olan ürünü ekrana listelemek için repeat döngüsünü kullanacağız.

Html Kodu

<html ng-app="store">
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></ script>
        <script type="text/javascript" src="script/app.js"></ script>
    </head>
<body>
    <div>
        <div ng-controller="StoreController as store">
            <div ng-repeat="item in store.products">
                <h1>{{item.name}}</h1>
                <h2>{{item.price}}</h2>
                <p>{{item.description}}</p>
            </div>
        </div>
    </div>
</body>

<head>

</head>

<body>

<div>

<h2>{{item.price}}</h2>

<p>{{item.description}}</p>

</div>

</body>

Javascript(app.js Dosyası İçeriği)

var app = angular.module("store", []);

app.controller("StoreController", function(){
    this.products = gems;
});

var gems = [
   {
        name: "Dodecahedron",
        price: 2.95,
        description: "...",
        canPurchase: true,
        soldOut: false
    },
    {
        name: "Pentagonal Gem",
        price: 5.95,
        description: "...",
        canPurchase: false,
        soldOut: true
    }
];

var app = angular.module("store", []);

app.controller("StoreController", function(){

this.products = gems;

});

var gems = [

{

name: "Dodecahedron",

price: 2.95,

description: "...",

canPurchase: true,

soldOut: false

{

name: "Pentagonal Gem",

price: 5.95,

description: "...",

canPurchase: false,

soldOut: true

}

];

5/5 - (1 vote)

Kategoriler

Bloga e-posta ile abone ol

AngularJS Nasıl Kullanılır İlk Örneğimiz