AngularJS 컨트롤러

AngularJS 컨트롤러 제어 AngularJS 애플리케이션의 데이터.

AngularJS 컨트롤러는 일반 JavaScript 개체입니다.

AngularJS 컨트롤러

AngularJS 애플리케이션은 컨트롤러에 의해 제어됩니다.

ng-controller 지시어는 애플리케이션 컨트롤러를 정의합니다.

컨트롤러는 표준 JavaScript 객체 생성자로 생성된 JavaScript 객체입니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

애플리케이션 분석:

AngularJS 애플리케이션은 ng-app에 의해 정의됩니다. 애플리케이션은 <div> 내에서 실행됩니다.

ng-controller="myCtrl" 속성은 AngularJS 지시문입니다. 컨트롤러를 정의하는 데 사용됩니다.

myCtrl 함수는 JavaScript 함수입니다.

AngularJS는 $scope 개체를 사용하여 컨트롤러를 호출합니다.

AngularJS에서 $scope는 애플리케이션 개체(애플리케이션 변수 및 함수에 속함)입니다.

Controller의 $scope(범위, 제어 범위와 동일)는 AngularJS 모델 객체를 저장하는 데 사용됩니다.

컨트롤러는 범위에 두 가지 속성을 생성합니다. (firstName 및 lastName).

ng-model 지시문은 입력 필드를 컨트롤러의 속성(firstName 및 lastName)에 바인딩합니다.

컨트롤러 메서드

위의 예에서는 lastName과 firstName이라는 두 가지 속성이 있는 컨트롤러 개체를 보여줍니다.

컨트롤러에는 메소드(변수 및 함수)도 있을 수 있습니다.

Instances

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

안으로 외부 파일 컨트롤러

대규모 애플리케이션에서는 컨트롤러를 외부 파일에 저장하는 것이 일반적입니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>

</body>
</html>

Run Instance»

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

기타 예제

다음 예제에서는 새 컨트롤러 파일을 만듭니다.

angular.module('myApp', []).controller('namesCtrl', 함수($scope) {
,country:'Denmark'}
];
});

파일을 namesController.js로 저장합니다.

그런 다음 애플리케이션에서 컨트롤러 파일을 사용합니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

← AngularJS 범위(scope)

AngularJS 필터 →

AngularJS 컨트롤러