집 >웹 프론트엔드 >JS 튜토리얼 >AngularJS 컨트롤러 사용에 대한 간략한 소개_AngularJS

AngularJS 컨트롤러 사용에 대한 간략한 소개_AngularJS

WBOY원래의: 2016-05-16 15:54:391016검색

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

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

여기서는 ng-controller 지시문을 사용하여 컨트롤러 StudentController를 선언했습니다. 다음 단계에서는 다음과 같이 StudentController를 정의하겠습니다.

<script>
function studentController($scope) {
  $scope.student = {
   firstName: "yiibai",
   lastName: "com",
   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이라는 두 개의 입력 상자가 있습니다.
이제 HTML에 Student.fullName() 메소드가 추가되었습니다.
이제 이름과 성 입력란에 입력하는 내용만 입력하면 두 이름이 자동으로 업데이트되는 것을 볼 수 있습니다.

예

다음 예에서는 컨트롤러 사용을 보여줍니다.
testAngularJS.html 파일의 내용은 다음과 같습니다.

<html>
<head>
<title>Angular JS Controller</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" 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>
function studentController($scope) {
  $scope.student = {
   firstName: "Mahesh",
   lastName: "Parashar",
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

출력

웹 브라우저에서 textAngularJS.html을 열고 다음 결과를 확인하세요.

2015616120726250.png (679×365)

성명：

이전 기사：전통적인 문서 객체 모델에 대한 JavaScript 지원에 대한 간략한 소개_기본 지식다음 기사：전통적인 문서 객체 모델에 대한 JavaScript 지원에 대한 간략한 소개_기본 지식

AngularJS 컨트롤러 사용에 대한 간략한 소개_AngularJS

관련 기사