En son web geliştirme öğreticiler
 

AngularJS Kontrolörler


Angularjs kontrol angularjs uygulamaları verileri.

Angularjs kontrolörleri düzenli JavaScript Nesneler vardır.


Kontrolörler angularjs

Angularjs uygulamalar kontrolörleri tarafından kontrol edilir.

Ng kontrol cihazı yönergesi uygulama kontrolörü tanımlar.

Bir denetleyici bir standart JavaScript nesne kurucu tarafından yaratılmış bir JavaScript Nesne vardır.

angularjs Örnek

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>
Kendin dene "

Uygulama açıkladı:

Angularjs uygulama ng içi = "myApp" ile tanımlanır. Uygulama içinde çalışır <div> .

ng-controller="myCtrl" özelliği, bir angularjs yönergesidir. Bir kontrolör tanımlar.

MyCtrl fonksiyonu bir JavaScript işlevidir.

Angularjs bir $ kapsamı nesnesi ile kontrolör açılmasına neden olur.

Angularjs olarak, $ kapsam uygulama nesnesi (uygulama değişkenleri ve fonksiyonları sahibi) olduğunu.

Kontrolör iki özellikleri oluşturur (variables) kapsamında (adı velastName) 'de.

Ng model direktifleri kontrol özelliklerine giriş alanlarını bağlamak (firstName and lastName) .


kontrolör Yöntemleri

velastName ve adı: Yukarıdaki örnekte, iki özelliğe sahip bir kontrol nesnesi gösterdi.

Bir kontrol cihazı ayrıca, yöntemleri olabilir (variables as functions) :

angularjs Örnek

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});
</script>
Kendin dene "

Dış Dosya Kontrolörler

Daha büyük uygulamalarda, dış dosyalarda saklamak denetleyicileri için ortaktır.

Sadece arasındaki kodu kopyalayıp <script> harici dosya adında içine etiketleri personController.js :

angularjs Örnek

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>
Kendin dene "

Başka bir örnek

Bir sonraki Örneğin yeni bir kontrolör dosyası oluşturur:

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

Dosyayı farklı kaydet namesController.js :

Ve sonra bir uygulamada 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>
Kendin dene "