目的・実現方法
- リアルタイムの時間を AngularJS を使って表示したい。
- HTML タグを書いたところに自動的に時刻を挿入したい。
- 時間のフォーマットを HTML タグ内で指定したい。
JavaScript 側で機能を作ったら、HTML 側では機能を意識しないで使いたいですの。つまり、AngularJS と HTML の結びつきが薄い、疎な状態なものを作りたいですわ♪
サンプルソース
次のソースを index.html などのファイルにコピー＆ペーストし、ブラウザで確認すれば確認できますわ♪
ソースのポイントは、コメントを翻訳した部分以外では次だと感じました。
- ディレクティブ名として JavaScript では「myCurrentTime」などとと指定するが、HTML で呼び出す時は「my-current-time」と書く。異なる点に注意
- 今回のサンプルでは、「<span my-current-time=”‘yyyy年MM月dd日 HH時mm分ss秒'”></span>」と HTML タグの要素としてディレクティブを指定することで時間を挿入して表示する。
- また、my-current-time 要素の値に「’yyyy年MM月dd日 HH時mm分ss秒’」のように書くことでフォーマットを指定できる。シングルクォーテーション「’」で更に囲まないとエラーとなるので注意
- また、サンプルでは span タグだが、div でも h1 でもどんな HTML タグでも現在時刻を挿入できる。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リアルタイムの時刻を表示する AngularJS のサンプル</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<script>
angular.module('intervalExample', [])
// 'myCurrentTime' ディレクティブを作成
// $interval と dateFilter サービスを注入
.directive('myCurrentTime', ['$interval', 'dateFilter',
function($interval, dateFilter) {
// return the directive link function. (compile function not needed)
return function(scope, element, attrs) {
var format, // 時間のフォーマット
stopTime; // 時刻の更新をキャンセル可能にするための変数
// UI の更新用
function updateTime() {
element.text(dateFilter(new Date(), format));
}
// 自分自身のディレクティブを監視し、変更時に UI を更新
scope.$watch(attrs.myCurrentTime, function(value) {
format = value;
updateTime();
});
stopTime = $interval(updateTime, 1000);
// DOM の desttroy (removal) イベントが発生したら、DOM 要素が除去された
// 後も時刻が更新され続けることを防止するために、UI 更新をキャンセル
element.on('$destroy', function() {
$interval.cancel(stopTime);
});
}
}]);
</script>
<body ng-app="intervalExample">
<div>
現在時刻: <span my-current-time="'yyyy年MM月dd日 HH時mm分ss秒'"></span>
</div>
</body>
</html>
サンプルを作るのに地味に躓いた部分
Webサーバでなく、ローカルで試しているため、URL の指定は「http:」を含めないと動きませんでした＞＜。
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js
↓
//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js
また、<html lang=”ja”> へと変更して、言語は日本語であると明記しておきました。これは変更しなくても問題ありません。
サンプル完成後もわかっていない部分
まだまだ勉強はこれからですの！
- カスタムディレクティブの作り方
- // return the directive link function. (compile function not needed) というコメントの言いたいこと
- $interval
- dateFilter サービス
- AngularJS の（？）text 関数
おわりに
Monaca を使ったモバイルアプリを作ってみております。AngularJS も覚えていきたいですの。
そのような背景の中で、本投稿は時計のように刻一刻と時間が過ぎていくリアルタイムの時刻を AngularJS で書きたい！という気持ちから産まれました。
JavaScript では interval を使うことをなんとなくつかんでおりましたので、「AngularJS interval」で探しておりましたら、次の公式ページに実例があるではありませんか！
ただし、サンプルを実行してみましたら、今回の目的から考えますと余分な機能が付いておりました＞＜。
その余分な部分をなんとか、できる限り取り除いたのが今回の投稿となります！
カスタムディレクティブを作る方法を学習する必要があるのですけれども、深くは勉強しておりません＞＜。こちらのページを読みまして、雰囲気をつかんだ程度ですわ。
以上です。