테스트 사이트 - 개발 중인 베타 버전입니다

AngularJS Services 두번째

· 8년 전 · 1309
AngularJS Services 두번째


$timeout 서비스
이 $timeout서비스는 AngularJS 버전의 window.setTimeout기능입니다.


2 초 후 새 메시지 표시 :

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});

[전체소스]
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>This header will change after two seconds:</p>

<h1>{{myHeader}}</h1>

</div>

<p>The $timeout service runs a function after a specified number of milliseconds.</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
</script>

</body>
</html>


$interval 서비스

이 $interval서비스는 AngularJS 버전의 window.setInterval기능입니다.



매초마다 시간 표시 :
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});

[전체소스]
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>The time is:</p>

<h1>{{theTime}}</h1>

</div>

<p>The $interval service runs a function every specified millisecond.</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>

</body>
</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
1386
1385
AngularJS 주형
1384
AngularJS 컨트롤러
1383
1382
1381
1380
1379
1378
1377
1376
1375
1374
1373
1372
1371
1370
AngularJS AngularJS API
1369
AngularJS 검증 예제
1368
1367
AngularJS CSS 클래스
1366
1365
AngularJS 이메일
1364
1363
AngularJS 선택 상자
1362
1361
AngularJS 체크 박스
1360
1359
AngularJS $event 객체
1358
1357