AngularJS で時計を作る

時計を作るのが目的で AngularJS を使っていたわけではないのですが、はまったのでメモ。

とりあえず Yeoman を利用してプロジェクトを作ります。

$ mkdir watch && cd $_
$ yo angular

app/views/main.html をごそっと削除してこんな感じに。

<p>{{time}}</p>

app/scripts/controllers/main.js をこんな感じに。

  1. angular.module('angular2App')
  2. .controller('MainCtrl', function ($scope, $log) {
  3. var displayTime = function () {
  4. $log.info('Show time');
  5. $scope.time = Date();
  6. };
  7.  
  8. displayTime();
  9. setInterval(displayTime, 1000);
  10. });

でも、残念ながら "grunt serve" としても、時刻が表示されますが更新されずに、止まった時計になりました。

AngularJS のバインディングの監視の実装はどうなっているか疑問でした。WPF ではオブジェクトの値の変更を通知してもらう Observer パターンを利用していますが、AngularJS では異なるようです。

AngularJS では $interval というものが用意されていて、それを使うことができます。

  1. angular.module('angular2App')
  2. .controller('MainCtrl', function ($scope, $log, $interval) {
  3. var displayTime = function () {
  4. $log.info('Show time');
  5. $scope.time = Date();
  6. };
  7.  
  8. displayTime();
  9. $interval(displayTime, 1000);
  10. });

これで無事時刻が更新されるようになりました!

AngularJS では setInterval などの非同期関数を直接使うのではなく、用意済みのアダプターオブジェクトを使うのがよいようです。$interval の他にも $timeout$http など、必要そうなものはだいたい揃っています。

しかも、$interval では繰り返し回数が指定できるとか、Promise オブジェクトを返すようになっているとかで、ちょこっと強化されています。

この手の既存のコンポーネントをラップする必要があるようなフレームワークの場合、アダプターオブジェクトが足りなくて苦労したり、元のコンポーネントを詳しく知らないと使えなかったりするものも多いのですが、AngularJS の場合そういう不満をあまり聞かないのでよくできているようです。

さて、次回は setInterval 関数を用いて壊れていない時計を作ってみます。そのような苦労をする必要はありませんが、勉強のためにやってみます。

コメントを追加

Filtered HTML

  • ウェブページアドレスとメールアドレスは、自動的にハイパーリンクに変換されます。
  • 使用できるHTMLタグ: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <img>
  • 次のタグを使用してソースコード構文をハイライトすることができます。: <code>, <blockcode>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby> The supported tag styles are: <foo>, [foo].
  • 行と段落は自動的に折り返されます。

Plain text

  • HTMLタグは利用できません。
  • ウェブページアドレスとメールアドレスは、自動的にハイパーリンクに変換されます。
  • 行と段落は自動的に折り返されます。
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
イメージ CAPTCHA
Enter the characters shown in the image.