[Angular JS] Controllers

Angular JS controllers

    Controller는 "ng-controller"라는 directive를 사용하고 javascript 생성자에 의해 만들어진 javascript object이다. 역할은 angular JS aplication에서 데이터를 조작한다. 아래의 예제를 보자.

<div ng-app="" ng-controller="personController">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
function personController($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe",
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
}
</script>

    위의 예제를 보면 "personController"라는 controller를 선언했다. model은 "firstName"과 "lastName" 둘이 있다. "personController"의 생성자는 아래에 정의되어 있다. 생성자는 controller와 똑같은 이름을 가진다. 생성자의 내부를 보면 $scope에 변수와 함수를 property에 할당하는 것을 볼 수 있다. scope는 application object로 model과 view를 연결하고 controller에게 이벤트를 보내는 역할을 한다. 아래의 또 다른 예제처럼 다른 JS 파일에 구현한 controller를 가져다 사용할 수 있다.

<div ng-app="" ng-controller="namesController">

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

</div>

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

namesController.js

function namesController($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
}

출처 : http://www.w3schools.com