AngularJS - Denetleyiciler

AngularJS uygulaması, uygulamadaki veri akışını kontrol etmek için temel olarak denetleyicilere dayanır. Bir kontrolör, ng-controller direktifi kullanılarak tanımlanır . Bir denetleyici, öznitelikleri / özellikleri ve işlevleri içeren bir JavaScript nesnesidir. Her denetleyici, denetleyicinin işlemesi gereken uygulama / modülü ifade eden bir parametre olarak $ kapsamını kabul eder.

<div ng-app = "" ng-controller = "studentController">
   ...
</div>

Burada ng-controller direktifini kullanarak studentController adında bir kontrolör tanımlıyoruz . Bunu şu şekilde tanımlıyoruz -

<script>
   function studentController($scope) {
      $scope.student = {
         firstName: "Mahesh",
         lastName: "Parashar",
         
         fullName: function() {
            var studentObject;
            studentObject = $scope.student;
            return studentObject.firstName + " " + studentObject.lastName;
         }
      };
   }
</script>

StudentController, argüman olarak $ kapsam içeren bir JavaScript nesnesi olarak tanımlanır.
$ Kapsamı, studentController nesnesini kullanan uygulamayı ifade eder.
$cope.student, studentController nesnesinin bir özelliğidir.
FirstName ve lastName, $ kapsam.student nesnesinin iki özelliğidir. Varsayılan değerleri onlara iletiyoruz.
FullName özelliği, birleşik adı döndüren $ kapsam.student nesnesinin işlevidir.
FullName işlevinde, öğrenci nesnesini alırız ve ardından birleşik adı döndürürüz.
Bir not olarak, denetleyici nesnesini ayrı bir JS dosyasında da tanımlayabilir ve bu dosyaya HTML sayfasında başvurabiliriz.

Şimdi, ng-modelini veya aşağıdaki ifadeleri kullanarak studentController'in öğrenci özelliğini kullanabiliriz -

Enter first name: <input type = "text" ng-model = "student.firstName"><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}

Student.firstName ve student.lastname'i iki giriş kutusuna bağladık.
Student.fullName () 'i HTML'ye bağladık.
Artık ad ve soyad giriş kutularına herhangi bir şey yazdığınızda, tam adın otomatik olarak güncellendiğini görebilirsiniz.

Misal

Aşağıdaki örnek, denetleyicinin kullanımını gösterir -

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Controller</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "studentController">
         Enter first name: <input type = "text" ng-model = "student.firstName"><br>
         <br>
         Enter last name: <input type = "text" ng-model = "student.lastName"><br>
         <br>
         You are entering: {{student.fullName()}}
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

Çıktı

Bir web tarayıcısında testAngularJS.htm dosyasını açın ve sonucu görün.