내 잔이 넘치나이다.

컨트롤러

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 = '';

};

}

Backbone.Collection

Backbone.Model 객체를 모아놓은 배열을 Backbone.Collection 객체라고 합니다.

(Backbone.Model의 역할과 동일)

- 데이터를 표현하는 역할

- 데이터의 변경을 감시하는 역할

- 데이터를 데이터 저장소와 동기화하는 역할 

생성

var collection = new Backbone.Collection();

collection.add({name: 'AAA'});

collection.add({name: 'BBB'});

자바스크립트 객체를 add() 메소드의 매개변수로 넣었지만 Backbone.Model 객체로 변경

Backbone.Collection 객체는 Underscore.js 라이브러리의 배열 관련 매소드(collection, arrays)를 활용

이벤트

add - 객체를 추가할 때 발생

remove - 객체를 제거할 때 발생

reset - 초기화할 때 발생

collection.bind('add', function(item){ });

collection.bind('remove', function(item){ });

collection.bid('reset', function(){ });

변환

Backbone.Collection 객체도 일반적인 자바스크립트 배열이 아닙니다.

따라서 toJSON() 매서드를 사용하여 일반적인 배열로 변환합니다. (Backbone.Model과 동일)

console.log(collection.toJSON());

상속

Backbone.Collection 생성자 함수도 상속해서 사용할 수 있습니다.

var Person = Backbone.Model.extend({ });        // Model 상속

var People = Backbone.Collection.extend({ });  // Collection 상속