AngularJS 컨트롤러

AngularJS 애플리케이션은 주로 컨트롤러를 통해 애플리케이션 내 데이터 흐름을 제어합니다. 컨트롤러는ng-컨트롤러지시정의된./속성과 함수. 각 컨트롤러는 $scope를 매개변수로 받아서, 컨트롤러가 처리해야 하는 애플리케이션을 나타냅니다/모듈。

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

여기서는 ng-컨트롤러 지시자는 이름이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는 JavaScript 객체로 정의되고 $scope를 파라미터로 사용합니다.
$scope는 studentController 객체를 사용하는 애플리케이션을 참조합니다.
$scope.student는 studentController 객체의 속성입니다.
firstName와 lastName는 $scope.student 객체의 두 개의 속성입니다. 기본 값을 그들에게 전달합니다.
fullName 속성은 $scope.student 객체의 기능입니다. 이 객체는 조합된 이름을 반환합니다.
fullName 함수에서는 Student 객체를 가져온 후 조합된 이름을 반환합니다.
주의할 것은, 우리는 단일 JS 파일에서 컨트롤러 객체를 정의하고 HTML 페이지에서 해당 파일을 참조할 수도 있습니다.

이제 ng-model 또는 아래의 표현식은 studentController의 student 속성을 사용합니다:

이름 입력: <input type="text" ng-model="student.firstName"><br>
성씨 입력: <input type="text" ng-model="student.lastName"><br><br>
입력 중입니다: {{student.fullName()}}

우리는 student.firstName와 student.lastname을 두 개의 입력 필드에 바인딩했습니다.
우리는 student.fullName()를 HTML에 바인딩했습니다.
이제, 이름과 성 입력 필드에 어떤 내용을 입력하든지, 전체 이름이 자동으로 업데이트되는 것을 볼 수 있습니다.

온라인 예제

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

testAngularJS.htm

예제

<html>
　　　<head>
　　　　　　<title>AngularJS 컨트롤러</title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">.
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS 컨트롤러 예제</h2>
　　　　　　
　　　　　　<div ng-app="mainApp" ng-controller="studentController">
　　　　　　　　　이름 입력: <input type="text" ng-model="student.firstName"><br>
　　　　　　　　　<br>
　　　　　　　　　성씨 입력: <input type="text" ng-model = "student.lastName"><br>"}}
　　　　　　　　　<br>
　　　　　　　　　입력 중입니다: {{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결과를 확인하십시오。

AngularJS 필터 AngularJS 표현식

AngularJS 기본 튜토리얼

AngularJS 컨트롤러

온라인 예제

testAngularJS.htm