Angularjs의 controller에 대해서 알아보겠습니다.
controller는 $scope를 이용해서 controller <-> view 양방향 바인딩이 가능하게 해주는 역할을 합니다.
예제로 간단하게 controller를 사용해보겠습니다.
- html
<body ng-app="myApp">
<div ng-controller="ctrl1">
<input ng-model="txt">
<span>{{txt}}</span>
<button ng-click="click()">버튼 클릭</button>
</div>
<hr/>
<div ng-controller="ctrl2">
<input ng-model="txt">
<span>{{txt}}</span>
<button ng-click="click()">버튼 클릭</button>
</div>
</body>
- javascript
var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope) {
$scope.txt = "테스트입니다";
$scope.click = function() {
alert("버튼 클릭");
}
});
app.controller('ctrl2', function($scope) {
$scope.txt = "ctrl2 컨트롤러입니다.";
$scope.click = function() {
alert("ctrl2 컨트롤러입니다.");
}
});
예제에서는 두 개의 컨트롤러를 만들었습니다.
나중에 angularjs를 이용한 프로젝트를 진행하시다면 화면별로 controller를 분리하여 작성하시면 편하게 사용하실 수 있을꺼 같습니다.
예제 : 이동
간단하게 컨트롤러를 사용하는 방법에 대해 알아보았습니다.
'AngularJS' 카테고리의 다른 글
| [Angularjs] angularjs click ngclick 버튼 클릭 (0) | 2015.12.23 |
|---|---|
| [Angularjs] filter, $filter, 필터링, 재정렬 (0) | 2015.12.22 |
| [Angularjs] repeat, ngrepeat, 배열, 배열 처리, 반복, 반복문 (0) | 2015.12.15 |
| [Angularjs] angularjs $scope 스코프 (0) | 2015.12.14 |
| [Angularjs] angularjs 시작하기, 기초, 샘플 (0) | 2015.12.10 |