AngularJS - kontrolery

Aplikacja AngularJS opiera się głównie na kontrolerach do sterowania przepływem danych w aplikacji. Kontroler jest definiowany za pomocą dyrektywy ng-controller . Kontroler to obiekt JavaScript zawierający atrybuty / właściwości i funkcje. Każdy kontroler akceptuje $ scope jako parametr, który odnosi się do aplikacji / modułu, który kontroler musi obsługiwać.

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

Tutaj deklarujemy kontroler o nazwie studentController , używając dyrektywy ng-controller. Definiujemy to następująco -

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

StudentController jest zdefiniowany jako obiekt JavaScript z $ scope jako argumentem.
$ Scope odnosi się do aplikacji, która używa obiektu studentController.
$ Scope.student jest właściwością obiektu studentController.
FirstName i lastName to dwie właściwości obiektu $ scope.student. Przekazujemy im wartości domyślne.
Właściwość fullName jest funkcją obiektu $ scope.student, która zwraca połączoną nazwę.
W funkcji fullName pobieramy obiekt studenta, a następnie zwracamy połączoną nazwę.
Uwaga: możemy również zdefiniować obiekt kontrolera w oddzielnym pliku JS i odnieść się do tego pliku na stronie HTML.

Teraz możemy użyć właściwości studenta studentController za pomocą ng-model lub używając następujących wyrażeń -

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()}}

Powiązaliśmy student.firstName i student.lastname do dwóch pól wejściowych.
Powiązaliśmy student.fullName () z HTML.
Teraz za każdym razem, gdy wpiszesz cokolwiek w polach wprowadzania imienia i nazwiska, zobaczysz, że pełna nazwa jest aktualizowana automatycznie.

Przykład

Poniższy przykład pokazuje użycie kontrolera -

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>

Wynik

Otwórz plik testAngularJS.htm w przeglądarce internetowej i zobacz wynik.