AngularJS 컨트롤러
AngularJS 컨트롤러 는 AngularJS 애플리케이션 의 데이터를 제어합니다 .
AngularJS 컨트롤러는 일반 JavaScript 객체 입니다.
AngularJS 컨트롤러
AngularJS 애플리케이션은 컨트롤러에 의해 제어됩니다.
ng-controller 지시문은 애플리케이션 컨트롤러를 정의합니다 .
컨트롤러는 표준 JavaScript 객체 생성자에 의해 생성된 JavaScript 객체 입니다 .
AngularJS 예제
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.firstName
= "John";
$scope.lastName = "Doe";
});
</script>
응용 프로그램 설명:
AngularJS 애플리케이션은 ng-app="myApp" 에 의해 정의됩니다 . 애플리케이션은 <div> 내에서 실행됩니다.
ng-controller="myCtrl" 속성 은 AngularJS 지시문입니다. 컨트롤러를 정의합니다.
myCtrl 함수는 JavaScript 함수입니다 .
AngularJS는 $scope 객체로 컨트롤러를 호출합니다.
AngularJS에서 $scope는 응용 프로그램 객체(응용 프로그램 변수 및 함수의 소유자)입니다.
컨트롤러는 범위( firstName 및 lastName ) 에 두 개의 속성(변수)을 생성합니다 .
ng-model 지시문 은 입력 필드를 컨트롤러 속성(firstName 및 lastName)에 바인딩합니다.
컨트롤러 방법
위의 예는 lastName과 firstName이라는 두 가지 속성을 가진 컨트롤러 객체를 보여줍니다.
컨트롤러에는 다음과 같은 메서드도 있을 수 있습니다(변수를 함수로 사용).
AngularJS 예제
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{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>
외부 파일의 컨트롤러
더 큰 응용 프로그램에서는 컨트롤러를 외부 파일에 저장하는 것이 일반적입니다.
<script> 태그 사이의 코드를 personController.js 라는 외부 파일에 복사하기만 하면 됩니다 .
AngularJS 예제
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script src="personController.js"></script>
또 다른 예
다음 예제에서는 새 컨트롤러 파일을 만듭니다.
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
파일을 namesController.js 로 저장합니다 .
그런 다음 응용 프로그램에서 컨트롤러 파일을 사용합니다.
AngularJS 예제
<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>