Angular 컨트롤러

컨트롤러

Knockout 라이브러리가 웹 페이지 전체에 바인딩했던 것과 다르게 Angular.js 라이브러리는

컨트롤러 단위로 바인딩합니다.

특정 공간 분할 태그에 ng-controller 속성을 부여하고 해당 속성 값과 같은 이름의 함수를 생성합니다.

예)

function basicController($scope){    // 반드시 매개변수로 $scope 식별자를 사용해야 합니다.

$scope.title = 'Students List';

$scope.students = [{ ... }, { ... }];

$scope.getAverage = function(){

var output = 0;

for(var i=0; i<$scope.students.length; i++){

output += $scope.students[i].score;

}

return output / $scope.students.length;

};

}

<div ng-controller="basicController">

<h1>{{ title }}</h1>

</div>

모델과 컬렉션

Angular.js 라이브러리는 모델과 컬렉션을 위한 별도의 생성자 함수를 제공하지 않습니다.

변수 $scope의 속성으로 지정하기만 하면 모델 바인딩과 컬렉션 바인딩이 자동으로 수행됩니다.

<div ng-controller="basicController">

<h1>{{ title }}</h1>

<table>

<tr ng-repeat="student in students">

<td>{{ student.id }}</td>

<td>{{ student.name }}</td>

<td><input type="number" ng-model="student.score" /></td>

</tr>

</table>

</div>

메서드

Angular.js 라이브러리는 템플릿에서 함수를 실행해 함수를 실행해 결과를 출력합니다.

예)

<div ng-controller="basicController">

<h3>Average : {{ getAverage() }}</h3>

</div>

function basicController($scope){

$scope.getAverage = function(){

var output = 0;

for(var i=0; i<$scope.students.length; i++){

output += $scope.students[i].score;

}

return output / $scope.students.length;

};

}

이벤트

예)

<div ng-controller="basicController">

<h1>{{ title }}</h1>

<form ng-submit="submit()">    // submit 이벤트 연결

<input ng-model="name" type="text">

<input type="submit" value="ADD" />

</form>

</div>

function basicController($scope){

$scope.submit = function(){

$scope.students.push({

id: $scope.students.length + 1,

name: $scope.name,

score: 0.0

});

$scope.name = '';

};

}