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.
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
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]}}
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 }} |
|
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 }}
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);
};
}]);
