<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
{
name:"Talip",
surname:"Akhan"
}
<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>
<div ng-app="MainCtrl">
<input class="ng-picker">
<date-picker></date-picker>
</div>
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
function MainCtrl($scope){
$scope.name="Emin Şahin";
$scope.surname = "Demir";
$scope.fullName = function(){
return $scope.name+" "+$scope.surname;
};
}
<div ng-controller="AamirCtrl">
<p>
<b>Merhaba</b> {{name}} {{surname}}
</p>
<div ng-controller="NicolasCtrl">
<p>
<b>Merhaba</b> {{name}} {{surname}}
</p>
</div>
</div>
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);
}
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 $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>
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);
}
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>
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);
}
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>
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
}
];
}
<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>
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);
}
}
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); // ?
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); // ?
})
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"));
});
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));
})
angular
.module("kodcucom", [])
.service("Buyutec", function () {
this.buyut= function(e){
return e.toUpperCase();
}
})
.controller("KodcuCtrl", function ($scope, Buyutec) {
console.log(Buyutec.buyut("kodcu.com"));
})
<div ng-pano=""></div>
angular
.module("kodcucom", [])
.directive("ngPano",function(){
return {
restrict:"A",
template:"<iframe src="http://pano.kodcu.com"></iframe>"
}
})
<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";
});
<div ng-controller="KodcuCtrl">
<div class="ng-pano"></div>
</div>
angular
.module("kodcucom", [])
.directive("ngPano",function(){
return {
restrict:"C",
templateUrl:"views/pano/index.html"
}
});
<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>
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
.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>
<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;
}
});
<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;
}
});
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 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)