AngularJS Framework Örnekleri - Yeni Başlayanlar için...

Merhaba arkadaşlar bu yazıda AngularJS yeni başlayan için basit ve aynı zamanda AngularJS temelini öğretecek 8 örnek hazırlayıp yayınladım. Örnekler tek html sayfasının içerisindedir. Controller scriptlerini de < script > tagı ile aynı sayfanın içine koydum. Dilerseniz sayfayı buradan indirebilirsiniz.
AngularJS JavaScript ile hazırlanmış bir client-side frameworktür. Mobile web siteleri hazırlamak için kullanabilir. Kullanıcıların istek ve cevapları hızlı sonuçlanır. Route sayesisinde sayfa geçişlerinde sürekli server ile iletişime geçmeye gerek yoktur. RESTful web servis ile çalışmak çok kolaydır.

1. AgullarJS çalıştı mı?

AngularJS uygulamaları HTML tagı içerisinde ng-app direktifi ile başlar. ng-app Direktifinin bulunduğu HTML tagın < /.. > kapatılması ile sonlanır.
AngularJS bağlantısı yapılmışsa ve çalışıyorsa { { 4+3 } } ifadesinin çıktısı 7 olacaktır.

   // Module tanımlanması.
   var app=angular.module("app",[]);
  

Çıktı:{{ 4+3 }}

---

2. Direktifler 1 - ng-model ve ng-bind

Bu örnekte ng-model="name" direktifi olan text içinde yazılan değeri ng-bind="name" direktifi olan span tagı içerisinde göstermektedir.

İsminizi Giriniz:
Merhaba

---

3. Direktifler 2 - ng-repeat ve ng-init

ng-repeat direktifi foreach mantığıya çalışır. Listelenen kayıt sayısı kadar tag tekrarlanır. Veriler ng-init direktifi içinde json formata yazılmıştır.

Şehir Tablosu

• Şehir: {{ item.city }} Plaka Kodu: {{ item.plate }}

---

4. İfadeler

İfadeler { { ifadeler } } içiçe iki süslü parantez içinde yazılır.

Merhaba {{student.firstname + " " + student.lastname}}!
Kitabın Fiyatı : {{cost * quantity}} TL
Öğrenci No: {{student.rollno}}
Puan(Mat): {{marks[3]}}

---

5. Controller

MVC Direktif: ng-controller

AngularJS uygulamarının temelinde Controller vardır. Uygulamanın içindeki verilerin akışını Controller kontroler eder. ng-controller direktifi ile tanımlanır. Controller içinde özellikleri ve fonksiyonları barındıran JavaScript nesnesidir. Her Controller'ün bir $scope parametresi vardır.

  // FirstController
  app.controller('FirstController',['$scope', function FirstController($scope) {
   $scope.message="{ { message } } İlk Controller";
  }])
  

{{ message }}

---

6. Controller devam...

Örnek: Öğrenci Listesi

  // Student Controller
  app.controller('StudentController',['$scope', function StudentController($scope) {
   $scope.students=[
    {
     name:"Berken",
     no:101,
     lessons:['math:70','history:87']
    },
    {
     name:"Neslihan",
     no:102,
     lessons:['lineer:67','math:50','datastructer:47']  
    }
   ];
  }])
  

Öğrenci	Numarası	Dersler
{{ student.name }}	{{ student.no }}	{{ lesson }}

---

7. Controller devam...

Örnek: Controller içinde metot tanımlanması

Aynı zamada ng-model ve ng-click direktiflerinin nasıl kullanıldığını gösteren bir örnek.

  // Cutomer Controller
  app.controller('CustomerController', ['$scope',
   function CustomerControler($scope) {
    $scope.customer={};
    $scope.customer.name = "Resul GÜNEŞ";
    $scope.customer.number = 44522;
    // scopa metot ekleme
    $scope.changeCustomer = function(){
    $scope.customer.name = $scope.cName;
    $scope.customer.number = $scope.cNumber;
   };
  }]);
  

Müşteri Adı: {{ customer.name }} Numara: {{ customer.number }}

Müşteri Adı:
Numarası:

---

8. Controller devam...

Örnek: Form Submit

ng-submit direktifinin nasıl kullanıldığını gösteren bir örnek.

  // AddCustomer Controller
  app.controller('AddCustomerController',['$scope','$location',
   function AddCustomerController($scope,$location){
    $scope.submit=function(){
     $location.path('/AddCustomer/'+$scope.cName+'/'+$scope.cNumber);
    };
  }]);
  

Müşteri Adı:
Numarası:

---