Angular.js 라이브러리는 특별한 일이 있을 때만 데이터와 뷰를 바인딩합니다.
예를 들어 속성으로 연결한 이벤트를 실행하거나 $http 서비스를 만드는데 데이터와 뷰를 바인딩합니다.
강제로 바인딩하고 싶다면 $scope 객체의 $apply() 메서드를 사용합니다.
예)
setInterval(function(){
$scope.title += "+";
$scope.$apply();
}, 1000);
팩토리
Angular.js 라이브러리는 팩토리 기능을 사용해 개발자가 직접 서비스를 만들 수 있습니다.
서비스를 만들어 사용하면 코드를 모듈로 분리해서 사용하므로 재사용성이 좋아지고 본문 코드가
간단해집니다.
<html ng-app="basic">
<script>
// 모듈을 생성합니다.
var basic_module = angular.module('basic', []);
// 서비스를 생성합니다.
/*
basic 모듈을 여기서 생성한다.
-> 컨트롤러는 모듈에 포함된다.
-> 컨트롤러에서는 생성된 서비스를 사용한다.
*/
basic_module.factory('$custom', function ($rootScope) {
// 클로저로 은닉 변수를 만듭니다.
var timerId = null;
// 리턴합니다.
return {
startTimer: function (callback, interval) {
timerId = setInterval(function () {
callback();
$rootScope.$apply();
}, interval);
},
stopTimer: function () {
clearInterval(timerId);
timerId = null;
}
};
});
</script>
<script>
basic_module= angule.module(); -> 모듈을 여기서 생성하면 서비스(Factory)를 생성하지 못한다.
// 컨트롤러를 생성합니다.
basic_module.controller('basicController', function ($scope, $custom) {
// 변수를 입력합니다.
$scope.title = 'Factory';
// 타이머를 연결합니다.
$custom.startTimer(function () {
$scope.title += '+';
}, 1000);
});
</script>
<div ng-controller="basicController">
<h1>{{ title }}</h1>
</div>
'Angular.js' 카테고리의 다른 글
| Angular 사용자 정의 속성 (1) | 2014.09.17 |
|---|---|
| angular example (0) | 2014.09.15 |
| Angular 서비스 (0) | 2014.09.15 |
| Angular 페이지 라우트 (0) | 2014.09.15 |
| Angular ng 속성 (0) | 2014.09.12 |
