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 양방향 데이터 바인딩이 되기 때문에 별도의 javascript코딩없이 적용되는 모습을 볼 수가 있습니다.

 
<div ng-app>
<input ng-model="txt">
<span>{{txt}}</span>
</div>
<div>
<input ng-model="txt">
<span>{{txt}}</span>
</div>


ng-app는 angularjs 라이브러리를 적용하겠다고 선언하는 부분입니다.


저는 <div ng-app> </div> div안에 선언해 놓았기 때문에 <div> 안에서만 angularjs 라이브러리가 적용이 됩니다.

아래는 ng-app이 선언이 안되었기 때문에 에러가 나는 걸 확인할 수 있습니다.


샘플을 통해서 확인하시면 더욱 이해가 빠르게 될꺼 같습니다.


예제 : 이동


+ Recent posts