6 - helloAngular5.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World, AngularJS</title>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var benimapp = angular.module("myapp",[]);
benimapp.controller("mycontroller",function($scope){
$scope.ders1 = "fizik";
$scope.ders2 = "kimya";
$scope.ders3 = "biyoloji";
});
</script>
</head>
<body ng-app = "myapp" ng-controller="mycontroller" >
<div>
{{ders1}}
</div>
</body>
</html>
- Bu örnekte ng-app'a isim verdik. Şöyle bir benzetme yapabiliriz :
ng-app -> cadde ng-controller -> sokak
Bir caddenin içerisinde birden fazla sokak olabilir. Bir sayfada bir tane ng-app vardır. Bir ng-app içerisinde birden fazla ng-controller olabilir.
- <script> element'i içerisinde ne yaptığımızı inceleyelim.
var benimapp = angular.module("myapp",[]); myapp isimli bir module yarattık.
benimapp.controller("mycontroller",function($scope) { #scope.ders1 = "fizik"; } );
myapp module'ü içerisinde, mycontroller isimli bir controller yarattık. Bu controller içerisindeki scope'da ders1 isimli bir variable tanımlayıp initialize ettik. Bu variable sadece bu scope içerisinde yaşar. Bu örnekteki ders1,ders2,ders3 variable'ları mycontroller isimli controller'ın scope'undadır.
7 - helloAngular6.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World, AngularJS</title>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var benimapp = angular.module("myapp",[]);
benimapp.controller("mycontroller",function($scope)
{
$scope.kutu = "birkutu";
$scope.yazdir = function(x)
{ alert($scope.kutu + " - " + x);
}
});
</script>
</head>
<body ng-app = "myapp" ng-controller="mycontroller" >
<input type = "text" ng-model="kutu"> <br>
<button ng-click="yazdir(kutu)">Değeri al</button>
</body>
</html>
Bu örnekte mycontroller isimli controller'ın scope'unda tanımlanmış olan kutu isimli variable'ın değerine hem script içerisinde controller tanımlanırken $scope.kutu diye erişebiliriz, hem de input box'a girilen değeri alıp yazdır method'una parametre olarak verebiliriz. Butona basınca yazdir() method'u çağırılır.
- sayfayı yüklediğimiz input box variable'ının bir ilk değeri olduğu için input box'da bu değer gözükür.
- mycontroller isimli controller'ın scope'unda, kutu isimli bir variable tanımlanmıştır. Daha sonra input box'a girilen değer bu variable'a bind edilir: <input type = "text" ng-model="kutu"> Artık input box'a gireceğimiz değer kutu variable'ının değeri olacaktır.
Reference : https://www.youtube.com/watch?v=ACfZgImvqbk&index=3&list=PLO0Gm_zAXCHwHOC7DHExOeLMQiWFxQE3_
No comments:
Post a Comment