İÇERİK

  • Angular MVW (Model, View,WhatEver)
  • Angular Modül Sistemi
  1. Routing(Sayfalama Sitesmi)
  2. Configuration(Ayarlar)
  3. View (Görünüm)
  4. Controller(Kod Taraflı Kontroller)

 

 

  • Directives
  • Filter
  • Factory, Service, Provider
  • Constants, Values

AngularJS

BAŞLANGIÇ

<html ng-app>
<head>
<script src="/js/angular.min.js" type="text/javascript"></script>
</head>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</html

MODEL VIEW WHATEVER

  1. Model
  • Basit JS nesneleridir.
  • View'de sunulur.
  • Bazen de View'de sunulmaz, iş mantığında
    tüketilir.
  • Sunucudan alınıp,verilebilir.

2.View

  • HTML eleman(ları) bütünüdür.
  • Harici Template'ler halinde tutulabilir.
  • Model verilerini sergiler, düzenleyebilir.

3.*

  • Model ile View arasını haberleştiren bileşenlerdir.

MODEL

  • Basit Javascript nesneleridir.
  • View bileşenlerinde
    tüketilebilir.
{
name:"Talip",
surname:"Akhan"
}

VIEW

  • Önyüz bileşenleridir.
  • Önyüzde bol bol Directives bulunur.
  • Model verilerini sunar, düzenleme imkanı verir.
  • View bileşenleri harici dosyalar halinde
    tutulabilir.
<div>
<input ng-model="name" placeholder="Adınızı giriniz..">
<input ng-model="surname" placeholder="Adınızı giriniz..">
<span>
Merhaba ben {{name}} {{surname}}
</span>
</div>

DIRECTIVES

  • View içerisinde yer alan ara Angular
    bileşenleridir.
  • DOM işlemleri için uygundur.
  • Custom Component oluşturma imkanı sunar.
  • Üç halde bulunabilir
  1. Element
  2. Attribute
  3. Class
<div ng-app="MainCtrl">
<input class="ng-picker">
<date-picker></date-picker>
</div>

ANGULAR DIRECTIVES

a

form

input input[checkbox] input[dateTimeLocal] input[date]
input[email] input[month] input[number] 
ngMousemove ngMouseover ngMouseup 

input[radio] input[text] input[time]
input[url] input[week] ngApp

ngBind ngBindHtml ngBindTemplate
ngBlur

ngChange 

ngChecked ngClass ngClassEven ngClassOdd
ngClick ngCloak ngController ngCopy ngCsp ngCut
ngDblclick ngDisabled ngFocus 

ngForm 

ngHide

ngHref
ngIf

ngInclude

ngInit ngKeydown ngKeypress ngKeyup
ngList ngModel ngModelOptions ngMousedown ngMouseenter 

ngMouseleave

ngNonBindable ngOpen ngPaste
ngPluralize ngReadonly ngRepeat ngSelected ngShow ngSrc
 

ngSrcset

ngStyle ngSubmit ngSwitch ngTransclude ngValue
script select textarea

CONTROLLER

  • Model ve View arasındaki ara bileşendir.
  • Model'den aldığı verileri View'e taşır.
  • View'den aldığı verileri de Model'e taşır.
  • İş mantığını yürütür.
  • DOM işlemleri için uygun değildir.
  • DOM işlemleri için Directives
    kullanılır.
function MainCtrl($scope){
$scope.name="Emin Şahin";
$scope.surname = "Demir";
$scope.fullName = function(){
return $scope.name+" "+$scope.surname;
};
}

CONTROLLER SCOPE

  • View ve Controller arası iletişim için Scope aracı
    nesneleri kullanılır.
  • Bir uygulamada bir tek $rootScope nesnesi bulunur.
  1. $rootScope diğer tüm Controller ileşenlerden ortakça erişilebilir.
  2. Fakat sık kullanmaktan kaçınmak gerekir.
  • Her bir Controller kendine has $scope esnesine sahiptir.
  1. $scope nesnesine Model verileri bağlanabilir.
  2. $scope nesnesine View events bağlanabilir.
  3. Bir $scope nesnesinden alt ve üst $scope nesnelerine erişilebilir.
  4. Prototype zinciri söz konusudur.

SCOPE PROTOTYPE ZİNCİRİ

<div ng-controller="AamirCtrl">
<p>
<b>Merhaba</b> {{name}} {{surname}}
</p>
<div ng-controller="NicolasCtrl">
<p>
<b>Merhaba</b> {{name}} {{surname}}
</p>
</div>
</div>

KOD(000)

function AliCtrl($scope, $timeout) {
$scope.name = "Ali";
$scope.surname = "Öküzcü";
$timeout(function () {
delete $scope.name;
}, 3000);
}
function NicolasCtrl($timeout, $scope, $rootScope) {
$scope.name = "Nicolas";
$scope.surname = "Cage";
$rootScope.name = "Hüseyin";
$timeout(function () {
delete $scope.surname;
}, 3000);
}

Data Binding

Two Way Data Binding

KOD(001)

Angular two way binding, ng-model, ng-show, ng-hide directive elemanları
<div>
<input type="text" ng-model="ad">
<input type="text" ng-model="soyad">
<input type="email" ng-model="eposta">
<div>
<h1 ng-hide="ad || soyad || eposta">....</h1>
<input value="{{ad}} {{soyad}}" ng-show="ad || soyad">
<h3 ng-show="eposta">{{eposta}}</h3>
</div>
</div>
KOD(002) - VIEW
ng-controller, ng-click, $scope property & function
<div ng-controller="Kodcu">
<input type="text" ng-model="ad">
<input type="text" ng-model="soyad">
<input type="email" ng-model="eposta">
<div ng-show="ad && soyad || eposta">
<input value="{{ad}} {{soyad}}" ng-show="ad && soyad">
<h3 ng-show="eposta">{{eposta}}</h3>
</div>
<button ng-click="capitalize()" ng-disabled="capitalized">Cap..</button>
</div>
KOD(002) - CONTROLLER
var Kodcu = function ($scope) {
// $scope.eposta = "rahmanusta@kodcu.com";
// $scope.ad = "Rahman";
// $scope.soyad = "Usta";
$scope.capitalize = function () {
$scope.ad = $scope.ad.toUpperCase();
$scope.soyad = $scope.soyad.toUpperCase();
$scope.capitalized = true;
}
}

ANGULAR YAŞAM DÖNGÜSÜ(LIFECYCLE)

KOD(003) - VIEW

Angular $wathcer mekanizması ile toplama uygulaması

<div ng-controller="Kodcu">
<input type="number" placeholder="Sayı 1.." ng-model="sayi1">
<input type="number" placeholder="Sayı 2.." ng-model="sayi2">
<div ng-show="sonuc">
<h1>Sonuç: {{sonuc}}</h1>
</div>
</div>

KOD(003) - CONTROLLER

var Kodcu = function ($scope) {
$scope.hesapla=function(){
if ($scope.sayi1)
if ($scope.sayi2);
$scope.sonuc= $scope.sayi1+$scope.sayi2;
}
$scope.$watch("sayi1",$scope.hesapla);
$scope.$watch("sayi2",$scope.hesapla);
}

KOD(004) - VIEW

Angular $wathcer ile hesap makinesi.
HTML <select> , ng-options, ng-init directives

<div ng-controller="Kodcu">
<input type="number" placeholder="Sayı 1.." ng-model="sayi1">
<input type="number" placeholder="Sayı 2.." ng-model="sayi2">
<select ng-options="islem.value as islem.label for islem in islemler" nginit="
islem='+'" ng-model="islem">
</select>
<div ng-show="sonuc || sonuc==0">
<h1>Sonuç: {{sonuc}}</h1>
</div>
</div>

KOD(004) - CONTROLLER

var Kodcu = function ($scope) {
$scope.islemler = [
{value: "+", label: "Toplama"}, {value: "-", label: "Çıkarma"},
{value: "*", label: "Çarpma"}, {value: "/", label: "Bölme"}
];
$scope.hesapla = function () {
if ($scope.sayi1 && $scope.sayi2)
$scope.sonuc = $scope.$eval($scope.sayi1 + $scope.islem + $scope.sayi2);
}
$scope.$watch("sayi1", $scope.hesapla);
$scope.$watch("sayi2", $scope.hesapla);
$scope.$watch("islem", $scope.hesapla);
}

KOD(005) - VIEW

ng-repeat directive ile listeleme

<div ng-controller="Kodcu">
<table>
<thead>
<tr>
<th>Kitap adı</th>
<th>Kitap yazarı</th>
<th>Fiyat</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="kitap in kitaplar">
<td>{{kitap.ad}}</td>
<td>{{kitap.yazar}}</td>
<td>{{kitap.fiyat}}</td>
</tr>
</tbody>
</table>
</div>

KOD(005) - CONTROLLER

var Kodcu = function ($scope) {
$scope.kitaplar = [
{
ad: "Java Mimarisiyle Kurumsal Çözümler",
yazar: "Rahman Usta", fiyat: 25
},
{
ad: "Java ve Yazılım Tasarımı",
yazar: "Altuğ B. Altıntaş", fiyat: 35
}
];
}

KOD(006) - VIEW

  • ng-repeat directive, kayıt ekleme
<div ng-controller="Kodcu">
<input ng-model="ad" type="text" placeholder="Kitap adı">
<input ng-model="yazar" type="text" placeholder="Kitap yazarı">
<input ng-model="fiyat" type="text" placeholder="Kitap fiyatı">
<a ng-click="ekle()">Ekle</a>
<table>
<!--...-->
<tbody>
<tr ng-repeat="kitap in kitaplar">
<td>{{kitap.ad}}</td>
<td>{{kitap.yazar}}</td>
<td>{{kitap.fiyat}}</td>
</tr>
</tbody>
</table>
</div>

KOD(006) - CONTROLLER

var Kodcu = function ($scope) {
$scope.kitaplar = [
{
ad: "Java Mimarisiyle Kurumsal Çözümler",
yazar: "Rahman Usta", fiyat: 25
},{
ad: "Java ve Yazılım Tasarımı",
yazar: "Altuğ B. Altıntaş", fiyat: 35
}
];
$scope.ekle = function () {
var kitap = {
ad: $scope.ad,
yazar: $scope.fiyat,
fiyat: $scope.fiyat
}
$scope.kitaplar.push(kitap);
}
}

ANGULAR MODÜL SİSTEMİ

  • Angularjs belirli iş ve servisleri parçalara ayırmak için modüler bir yapı sunar.
  • Oluşturulan modüller tekrar kullanılabilirliği artırır.
  • Angular.js çekirdeği haricinde çeşitli modülleri bulunur.(ngRoute, ngCookies, ngTouch gibi.)

ANGULAR MODÜL NASIL TANIMLANIR?

var app = angular.module("kodcu", []);
var kodcu = angular.module("kodcu");
console.log(app == kodcu); // true
// "kodcu" modülünü diğer bir modülde nasıl kullanırım ?
var girisimci = angular.module("girisimci",["kodcu"]);
console.log(girisimci); // ?

BİR MODÜLÜN İÇERİSİNDE NELER BULUNUR?

CONSTANT VE VALUE BİLEŞENLERİ

Bir modüle veri/değişken katmayı sağlayan modül bileşenleridir.
Bu alanlara Dependency Injection ile erişilebilir.
İkisi aynı amaç içindir ama Value konfigüre edilemez.

var app = angular.module("kodcucom", []);
app.value("$a", {value: 6});
app.constant("$b", {value: 5});
app.config(function ($b) {
$b.value = 18;
});
app.controller("KodcuCtrl", function ($scope, $a, $b) { // DI in action
console.log($a); // ?
console.log($b); // ?
})

PROVIDER, FACTORY, SERVICE
BILEŞENLERI

  • Angular modül servisleridir.
  • Birbirlerine çok benzerler.
  • Yalnızca Provider konfigüre edilebilir.
  • Factory ve Service konfigüre edilemez.

PROVIDER

var app = angular.module("kodcucom", []);
app.provider("$kodcu", function () {
var selam = {
mesaj: "Hoşgeldin",
selamla: function (e) {
return this.mesaj +" "+ e;
}
};
this.$get = function () {
return selam;
};
this.mesajDegis = function (e) {
selam.mesaj = e;
};
})
.config(function ($kodcuProvider) { //<providerName>Provider
$kodcuProvider.mesajDegis("Willkommen");
})
.controller("KodcuCtrl", function ($scope, $kodcu) {
console.log($kodcu.selamla("Rahman"));
});

FACTORY

angular
.module("kodcucom", [])
.factory("KodcuFactory", function () {
var hesap = function(){
this.hesapla= function (a, b) {
return a + b;
}
}
return hesap;
})
.controller("KodcuCtrl", function ($scope, KodcuFactory) {
console.log(new KodcuFactory().hesapla(3, 5));
})

SERVICE

angular
.module("kodcucom", [])
.service("Buyutec", function () {
this.buyut= function(e){
return e.toUpperCase();
}
})
.controller("KodcuCtrl", function ($scope, Buyutec) {
console.log(Buyutec.buyut("kodcu.com"));
})

DIRECTIVES

Attribute türünde Directive oluşturma

<div ng-pano=""></div>
angular
.module("kodcucom", [])
.directive("ngPano",function(){
return {
restrict:"A",
template:"<iframe src="http://pano.kodcu.com"></iframe>"
}
})

Element türünde Directive oluşturma

<div ng-controller="KodcuCtrl">
<kodcu-logo></kodcu-logo>
</div
angular
.module("kodcucom", [])
.directive("kodcuLogo", function () {
return {
restrict: "E",
template: "<img src="{{imageUrl}}">"
}
})
.controller("KodcuCtrl", function ($scope) {
$scope.imageUrl = "../images/kodcu-logo.gif";
});

Class türünde Directive oluşturma

<div ng-controller="KodcuCtrl">
<div class="ng-pano"></div>
</div>
angular
.module("kodcucom", [])
.directive("ngPano",function(){
return {
restrict:"C",
templateUrl:"views/pano/index.html"
}
});

Yeni bir Kartvizit komponenti geliştirelim

<div ng-controller="KartCtrl">
<kartvizit name="person.name" person-email="person.email"
image="person.img" person-slogan="person.slogan">
</kartvizit>
</div>
<div class="row panel">
<div class="columns large-4">
<a class="th">
<img ng-src="{{image}}">
</a>
<h5>{{name()}}</h5> <!-- Dikkat () -->
</div>
<div class="columns large-8">
<p>{{slogan}}</p>
<kdb class="right">{{email}}</kdb>
</div>
</div>

Yeni bir Kartvizit komponenti geliştirelim

var app = angular.module("kodcu", []);
app.directive("kartvizit", function () {
return {
restrict: "AE",
templateUrl: "views/index-0110/kartvizit.html",
/*
* = two way binding
* @ text binding
* & one way binding
* */
scope: {
name: "&",
email: "=personEmail",
image: "=",
slogan: "=personSlogan"
}
};
})
.controller("KartCtrl", function ($scope) {
});

Angular Filter |

angular
.module("kodcucom", [])
.controller("KodcuCtrl", function ($scope) {
$scope.tutar = 1200;
$scope.obj = {value:"10"};
$scope.merhaba = "Merhaba Dünya";
$scope.arr = ["Mavi","Sarı","Kırmızı","Ela"];
})

Angular sisteminin sunduğu özel dönüştürücü bileşenlerdir.

<div ng-controller="KodcuCtrl">
<ul>
<li>{{tutar | currency}}</li>
<li>{{tutar | currency:"TL"}}</li>
<li><pre>{{obj | json}}</pre></li>
<li>{{merhaba | uppercase}}</li>
<li>{{merhaba | lowercase}}</li>
<li>{{arr | limitTo:3}}</li>
<li>{{arr | filter:'Kı'}}</li>
</ul>
</div>

Custom Filter

<div ng-controller="KodcuCtrl">
<ul>
<li ng-repeat="renk in renkler | set">{{renk}}</li>
</ul>
</div>
var app = angular.module("kodcucom", []);
app.controller("KodcuCtrl", function ($scope) {
$scope.renkler=["Mavi","Sarı","Kırmızı","Sarı","Mavi"];
})
.filter("set", function () {
return function (input) {
if (!angular.isArray(input)) return input;
var temp =[];
input.forEach(function(item){
if(temp.indexOf(item)==-1) temp.push(item);
});
return temp;
}
});

Filter bileşenini Controller'da kullanmak

<div ng-controller="KodcuCtrl">
<ul><li ng-repeat="renk in renkSet">{{renk}}</li></ul>
</div>
var app = angular.module("kodcucom", []);
app.controller("KodcuCtrl", function (setFilter,$scope) {
var renkler=["Mavi","Sarı","Kırmızı","Sarı","Mavi"];
$scope.renkSet = setFilter(renkler);
})
.filter("set", function () {
return function (input) {
if (!angular.isArray(input)) return input;
var temp =[];
input.forEach(function(item){
if(temp.indexOf(item)==-1) temp.push(item);
});
return temp;
}
});

$routeProvider Bileşeni

  • Sunucudan bağımsız navigasyon imkanı
    sunar.
  • View bileşenleri arası geçiş sunar
  • Controller bileşenleri arası geçiş sunar

$routeProvider Bileşeni

angular.module("kodcucom", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/kurumsal-java/", {
templateUrl: "views/index-011/kurumsal-java.html",
controller: "KurumsalJava"
})
.when("/standart-java/", {
templateUrl: "views/index-011/standart-java.html",
controller: "StandartJava"
})
.when("/", {
templateUrl: "views/index-011/main.html",
controller: "Kodcu"
});
}

$http Service

  • $http.get
  • $http.post
  • $http.put
  • $http.delete

HTTP isteklerini yönetmeye olanak tanır.

$http.get('/someUrl').success(successCallback);

$http.post('/someUrl',data).success(successCallback);

$http.put('/someUrl',data).success(successCallback);

$http.delete('/someUrl').success(successCallback)

SON

Angular JS

By Talip Akhan

Made with Slides.com

Angular JS

  • 227

More from Talip Akhan