내 잔이 넘치나이다.

컨트롤러

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 Mode 

-  데이터를 표현

- 데이터의 변경을 감시

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

Backbone.Model 객체는 일반적인 자바스크립트 객체가 아닙니다.

Backbone.Model 객체를 일반 자바스크립트 객체로 변환하려면 toJSON() 메소드를 사용합니다.

이벤트

change - Backbone.Model 객체의 속성이 변경될 때 발생합니다.

change:[속성 이름] - Backbone.Model 객체의 특정 속성이 변경될 때 발생합니다.

destroy - Backbone.Model 객체가 삭제될 때 발생합니다.

예)

<script>

// Backbone.Model 객체를 생성

var person = new Backbone.Model({

name: '김태희',

region: '서울'

});

console.log(person.toJSON()); // 자바스크립트 객체로 변환

person.bind('change:region', function(model, attr){

//person.bind('change', function(){}); - 모든 속성의 변경 감지

alert(attr + ' [속성 변경]');

});

// 속성을 추출

person.get('name');

// 속성을 입력

person.set('region', '서울 특별시 강남구');

</script>

상속

자체적으로 지원하는 모든 생성자 함수의 상속을 지원한다.

상속을 사용하면 초기값을 설정하거나 객체 생성할 때 특정한 코드를 실행할 수 있다.

defaults - 객체가 기본적으로 가지는 속성을 정의

initialize() - 객체를 생성하는 시점에 생성되는 매소드

예)

var Person = Backbone.Model.extend({

defaults: {

name: '',

region: ''

},

initialize: function(){

this.bind('change:name', this.changName);

this.bind('change:region', this.changeRegion);

},

changeName: function(){ },

changeRegion: function(){ }

});