AngularJS Kontrolör

AngularJS KontrolörAngularJS uygulamasının verilerini kontrol eder.

AngularJS kontrolörleri sıradan JavaScript nesnesi.

AngularJS Kontrolör

AngularJS uygulaması kontrolörler tarafından kontrol edilir.

ng-controller talimatı uygulama kontrolörünü tanımlar.

Kontrolcü standart JavaScript nesne yapıcıları tarafından oluşturulur JavaScript nesnesi.

AngularJS Örnek

<div ng-app="myApp" ng-controller="myCtrl">  
İsim: <input type="text" ng-model="firstName"><br>  
Soyadı: <input type="text" ng-model="lastName"><br>  
<br>  
tam adı: {{firstName + " " + lastName}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
});  
</script>

Kendi Kendine Deney

uygulama açıklaması:

AngularJS uygulaması ng-app="myApp" tanım. Uygulama <div> içinde çalışır.

ng-controller="myCtrl" öznitelik, bir AngularJS düzenleyicisidir. Bir kontrolör tanımlar.

myCtrl fonksiyon, bir JavaScript fonksiyonudur.

AngularJS, $scope nesnesi kontrolörü çağırır.

AngularJS'te, $scope, uygulama nesnesi (uygulama değişkenleri ve fonksiyonlarının sahibidir).

Kontrolör, aralığında (firstName ve lastNamedışında iki özellik (değişken) oluşturmak için

ng-model Düzenleyici, girdi alanlarını kontrolör özelliklerine (firstName ve lastName) bağlar.

Kontrolör yöntemleri

Yukarıdaki örnek, lastName ve firstName iki özelliğe sahip bir kontrolör nesnesi göstermektedir.

Kontrolörler ayrıca yöntemler (fonksiyon değişkenleri olarak) sahip olabilir:

AngularJS Örnek

<div ng-app="myApp" ng-controller="personCtrl">  
İsim: <input type="text" ng-model="firstName"><br>  
Soyadı: <input type="text" ng-model="lastName"><br>  
<br>  
Tam adı: {{fullName()}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('personCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
  $scope.fullName = function() {  
    return $scope.firstName + " " + $scope.lastName;  
  };  
});  
</script>

Kendi Kendine Deney

Dış dosyalardaki kontrolörler

Daha büyük uygulamalarda, kontrolörleri dış dosyalarda saklamak çok yaygındır.

Yalnızca <script> etiketi arasındaki kodu, adı personController.js dış dosyasında:

AngularJS Örnek

<div ng-app="myApp" ng-controller="personCtrl">  
İsim: <input type="text" ng-model="firstName"><br>  
Soyadı: <input type="text" ng-model="lastName"><br>  
<br>  
Tam adı: {{fullName()}}  
</div>  
<script src="personController.js"></script>

Kendi Kendine Deney

Bir diğer örnek

Önümüzdeki örnekte, yeni bir kontrolör dosyası oluşturacağız:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
  ];
});

Dosyayı şu şekilde kaydedin namesController.js:

Sonra uygulamanın içersinde kontrolör dosyasını kullanın:

AngularJS Örnek

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>
<script src="namesController.js"></script>

Kendi Kendine Deney