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 →


HTTP Headers を設定

AngularJS による HTTP リクエストについては、$httpProvider.defaults.headersオブジェクトで HTTP ヘッダ情報を設定できる。

1
$httpProvider.defaults.headers.common.Authorization = '...';

以下のように、get だけ、post だけに適用することも。

1
2
$httpProvider.defaults.headers.get['Authorization'] = '...';
$httpProvider.defaults.headers.post = { 'Authorization' : '...' };

(複数の書き方を例示するために、わざと違った書き方にしてます)

Read on →


テキストボックスなどで、Enter キーによるイベント処理を記述するコード例をいくつか。

$event オブジェクト

ng-keydownなどの directive を利用する際には、$eventでイベントオブジェクトを利用。

1
2
3
4
5
6
7
$scope.comments = [];
$scope.handleKeydown = function(e) {
  if (e.which !== 13) {
    $scope.comments.push($scope.newComment);
    $scope.newComment = '';
  }
}
1
2
3
4
<input type="text" ng-model="newComment" ng-keydown="handleKeydown($event)">
<ul>
  <li ng-repeat="comment in comments"></li>
<ul>
Read on →


ng-conf 2014 – The World’s First Angular Conference in Salt Lake City, Utah

Angular カンファレンス ng-conf 2014 最終日(Friday, January 17)の動画まとめです。

YouTube の ng-conf 2014 チャンネル だけでなく、公式サイトのトップページにも動画が表示されるようになっていますが、このエントリーでは最終日のスケジュールどおりに並べています。

Angular === Community (Keynote)

Igor Minar

Read on →


ng-conf 2014 – The World’s First Angular Conference in Salt Lake City, Utah

Angular カンファレンス ng-conf 2014 が、アメリカはユタ州ソルトレイクシティで開催中です。

YouTube の ng-conf 2014 チャンネル のほうに動画はまとめてアップロードされていますが、このエントリーでは当日(Thursday, January 16)のスケジュールどおりに並べています。最終日(Friday, January 17)の動画は次のエントリーで。

Keynote

Miško Hevery & Brad Green

Read on →


データバインドが効かない?!

AngualrJS を使っていて楽しいのは超ラクチンなデータバインド。なのに、そのデータバインドで以下のような困ったことに遭遇しているとしたら、それは $apply を学ぶときが来ているということ。

  • データバインドが効かないぞ?!
  • データの反映が次のイベントまで遅れてる気がする??

こういうときは $apply の出番だ。$apply を使う必要があるケースというのは、ざくっと言うと AngularJS が知りえないところでイベントが起こっているとき。$apply で AngularJS に変化が起きていることを伝え、後のことは任せることができる。

Read on →