AngularJS-컨트롤러

AngularJS 애플리케이션은 주로 컨트롤러에 의존하여 애플리케이션의 데이터 흐름을 제어합니다. 컨트롤러는 ng-controller 지시문을 사용하여 정의됩니다 . 컨트롤러는 속성 / 속성 및 함수를 포함하는 JavaScript 개체입니다. 각 컨트롤러는 컨트롤러가 처리해야하는 응용 프로그램 / 모듈을 나타내는 $ scope를 매개 변수로 허용합니다.

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

여기서는 ng-controller 지시문을 사용하여 studentController 라는 컨트롤러를 선언합니다 . 우리는 다음과 같이 정의합니다.

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

studentController는 $ scope를 인수로 사용하는 JavaScript 개체로 정의됩니다.
$ scope는 studentController 개체를 사용하는 응용 프로그램을 나타냅니다.
$ scope.student는 studentController 개체의 속성입니다.
firstName과 lastName은 $ scope.student 개체의 두 가지 속성입니다. 우리는 그들에게 기본값을 전달합니다.
fullName 속성은 결합 된 이름을 반환하는 $ scope.student 개체의 함수입니다.
fullName 함수에서 학생 객체를 얻은 다음 결합 된 이름을 반환합니다.
참고로 별도의 JS 파일에서 컨트롤러 객체를 정의하고 HTML 페이지에서 해당 파일을 참조 할 수도 있습니다.

이제 ng-model을 사용하거나 다음과 같은 표현식을 사용하여 studentController의 학생 속성을 사용할 수 있습니다.

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과 student.lastname을 두 개의 입력 상자에 바인딩했습니다.
student.fullName ()을 HTML에 바인딩했습니다.
이제 이름과 성 입력 상자에 아무것도 입력 할 때마다 자동으로 업데이트되는 전체 이름을 볼 수 있습니다.

예

다음 예제는 컨트롤러의 사용을 보여줍니다-

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>

산출

웹 브라우저에서 testAngularJS.htm 파일을 열고 결과를 확인합니다.