AngularJS 1.3.0 で導入された新機能から、ng-model でのモデル更新を調整できる directive の ngModelOptions について取り上げます。

ngModelOptions

すぐに覚えて使ってみるべきオプションは、updateOndebounce ですね。

updateOn

updateOn は、input などの UI に対するどのイベントの場合にモデルを更新するかを指定できます。

1
2
3
<input type="text" name="userName"
    ng-model="user.name"
    ng-model-options="{ updateOn: 'blur' }">

これで、blur(フォーカスが外れる)イベントまでは、この input で入力値を変更してもモデルに反映されなくなります。blur イベントではじめてモデル更新されます。

debounce

debounce は、モデルの更新を待機しておく時間を、ミリ秒単位で指定できます。

1
2
3
<input type="text" name="userName"
    ng-model="user.name"
    ng-model-options="{ debounce: 1000 }">

これで、変更から 1 秒(1,000 ミリ秒)経過後にモデルが更新されるようになります。変更から 1 秒経過するまでに別の変更があった場合には、待機中の更新処理は破棄されます。

Read on →

AngularJS 1.3.0 で導入された新機能から、ワンタイムバインディング (One-time binding) について取り上げます。

One-time binding

値が変わることのないデータまでも双方向データバインドされて、digest loop のたびに繰り返し変更監視されることで性能が劣化しやすかった大規模な AngularJS アプリケーションでの問題を解消できます。

1 回で使い捨てするデータバインドを定義できるようになり、監視 (watch) 対象を減らして digest loop を高速化し、アプリケーションの表示や操作の応答速度を高められる機能です。

One-time binding を指定すると、undefined のままである間は監視対象となり続け、digest loop の結果 undefined でなくなった時点で監視対象から外れます。null となった場合でも監視対象から外れます。

使い方

:: を付けるだけです。

Read on →

AngularJS 1.3.0 がリリースされたので、移行ガイド (Migrating from 1.2 to 1.3) のほうも日本語訳しておきました。


Migrating from 1.2 to 1.3

$parse

prevent invocation of Function’s bind, call and apply

angular 式の中では function の .bind .call .apply を呼び出せなくなりました。既存 function の振る舞いを予測できない形で変更させないようにするためです。

forbid __proto__ properties in angular expressions

angular 式の中では (deprecated) __proto__ プロパティは動作しなくなりました。

forbid __{define,lookup}{Getter,Setter}__ properties

angular 式の中では __{define,lookup}{Getter,Setter}__ を利用できなくなりました。必要な場合は、危険でなくなるようにラップ/バインドして scope オブジェクトを通して利用してください。

forbid referencing Object in angular expressions

angular 式の中では Object を利用できなくなりました。Object.keys が必要な場合は scope でアクセスできるようにしてください。

Read on →

AngularJS 1.3.0 がリリースされました!

ということで、公式ブログの記事『AngularJS 1.3.0 – superluminal-nudge』を日本語訳しておきました。


AngularJS 1.3.0 – superluminal-nudge

8 か月にわたり、2,000 を超えるコミット、19 のベータと 6 のリリースキャンディデートを経て、遂に AngularJS 1.3.0 superluminal-nudge をリリースしました!

このリリースには、注目すべき機能が多く含まれています。

  • One-time bindings:: を付けることによって、内挿 (interpolate) が 1 度となり、それ以降は監視 (watch) されなくなる。
  • ngAria – デフォルトで(アクセシビリティに関して)アクセシブルなカスタムコンポーネントを実装するための新しいモジュール
  • ngMessages – フォームの妥当性に対するフィードバック(メッセージ)を実装しやすくする新しいディレクティブ
  • ngModelOptions – バインドされたモデルの振る舞いをカスタマイズしやすくするディレクティブ。例:debounce (モデル更新のタイミング制御)、getter-setter スタイルのモデル、blur 時のモデル更新など。
  • Strict DI – 簡略した DI シンタックスを利用していて minify できないコードを見つけることができるオプション
Read on →

「AngularJS のこと対面で教えてよ!」というリクエストにお応えします。

ご希望あれば Twitter で @tama3bb までご連絡ください。各日とも先着 1 名です。

日時

  • 2014/10/16(木) 16:00 – 18:00 (ご予約済み)
  • 2014/10/17(金) 16:00 – 18:00
  • 2014/10/24(金) 16:00 – 18:00
  • 2014/10/31(金) 16:00 – 18:00
  • 2014/11/ 7(金) 16:00 – 18:00 (ご予約済み)
  • 2014/11/14(金) 16:00 – 18:00
Read on →

Yeoman のサイトにある Tutorial (codelab) をスクリーンキャストしてみました。

generator-angular で AngularJS 用のコードを生成し、そこから TODO アプリケーションに変更していく流れをデモしてます。

Yeoman がどんなものか試してみたかった方や、眺めてるだけで試した気になれる方にオススメです!

Read on →

@toddmotto さんが AngularJS styleguide を GitHub に上げてました。

AngularJS styleguide 日本語訳

この AngularJS styleguide を Fork し、『AngularJS スタイルガイド』として日本語に訳しておきました。

JavaScript Style Guide

なお、JavaScript のスタイルガイドについては、Airbnb の JavaScript Style Guide がお気に入りです。

この週末、オリンピックを見ながら日本人が出てくるまでヒマだったりしたので、ふとモバイルチャットでも作ってみるかと思い立ってダラダラとやってみました。

数時間しかかけてないので「ザ・未完成」なデキですが、サクッとリアルタイムなモバイルチャットアプリケーションを作れてしまうのは、なんともラクチンで楽しい。

利用した技術

Ionic についてはこれまでにブログで、書いてないや…。Firebase についてはずいぶん前に

Read on →


Bootstrap のボタン

Bootstrap ベースのボタンにng-clickを記述する(form を submit しない)コードは、主に以下の 2 通りある。

1
2
<button type="button" class="btn" ng-click="handleClick()">Done</button>
<a href="#" class="btn" ng-click="handleClick()">Done</a>

どちらでも見た目は同じになるし、イベント処理はng-clickがやってくれるし、<a>のほうがコードは短くなるしって感じで、どっちも一緒なんだし<a>にしとこってノリでやってると、disabled のワナにハマるかも。

Read on →