AngularJS で HTML を分割するのにお手軽な ng-include

1

<div ng-include="'partials/sidebar.html'"></div>

1

<ng-include src="'partials/sidebar.html'"></ng-include>

ポイントとしては、属性値に文字列を渡す必要があって、ダブルクオートの内側にシングルクオートを記述すること。

変数を渡して、可変にもできる。

1

$scope.sidebarUrl = 'partials/sidebar.html';

1

<div ng-include="sidebarUrl"></div>

ng-includeで表示する HTML 部分でも、もちろん普通に AngularJS の管理下にあり、データバインドも効く。分割したフラグメント専用に controller の scope を作るなら、ng-controllerも指定できる。

1

<div ng-include="'partials/sidebar.html'" ng-controller="SidebarCtrl"></div>

増殖現象にビビる

UI Bootstrap の alert と、angular-app あたりを参考にしながらメッセージ表示機能を実装していたら、どんどんメッセージが増殖してくのでビビった。１件メッセージを追加するたびに、メッセージ配列ごと増えるという…。

増殖現象デモ

ng-class とは

ng-class は、HTML 要素に CSS class 属性値を動的にセットできる directive で、ほんとよく使う。

すでに同じ class 属性値が要素にセットされてるときは、重複しないようになっているあたりもいい感じ。

ng-class の使い方は、スペース区切りの class 文字列'active disabled'を保持する変数や、class 属性値文字列の配列['active', 'disabled']を保持する変数を指定する。

けれど一番良く使うのは、class 属性値と boolean 値をマッピングした object で、これを ng-class に指定する使い方について紹介。

待望の AngularJS 1.2.0 リリースがキター！！

まだ把握してない内容もあるんだけど、取り急ぎ公式ブログの内容を（一部省略して）日本語に訳しときます。

AngularJS 1.2.0: timely-delivery

1.2.0-rc3 で見つかった多くの問題を修正し、前回の安定版リリースからいくつもの新しい機能を導入している。

前回の安定版リリースからの注目すべき変更点：

• アニメーションとトランジション
• エラーメッセージ（error minification を含む）
• 厳密なコンテキストのエスケーピング
• ng-repeat で重複を防ぐトラッキング機能
• テンプレート内で controller インスタンスにアクセスするための構文
• Promise A+ に準拠
• ngRoute を独自モジュールに分離

リリースの詳細は、changelog を参照。

移行ガイドは our guides を参照。

filter とは

filter は、表示用に値を加工してくれる機能。HTML テンプレートだけでなく、controller や service でも利用できる。また、独自の filter を簡単に定義することもできる。

構文から利用例、そしてカスタム filter のサンプルコードを紹介！

ngList とは

ngList は、テキストボックスに入力された区切り文字列と、文字列配列のモデルとを相互に変換してくれる directive です。

区切り文字（delimiter）のデフォルトはカンマですが、別の文字列や、正規表現も使えます。

うん、なんだか便利な感じ！

AngularJS 1.2.0-rc3 以降、Promise の扱いに注意

rc2 までと異なり、promise の自動アンラップ（auto unwrapping）がデフォルトで無効となり、promise を直接 $scope の変数に突っ込んでたりするとうまく動かなくなる。

rc2 までは、promise がリターンされるとき、こんなふうに書けた。

1

$scope.values = NinjaService.getValues();

rc3 からは、こう書かないと動かない。

1
2
3

NinjaService.getValues().then(function(values) {
  $scope.values = values;
});

自動アンラップを採用しなくした理由は、この Issue でのやり取りに詳しく書かれている。

Automatic unwrapping of promises by $parse severely limits its usefulness · Issue #4158 · angular/angular.js

この変更によって、前回のエントリーで書いた Angular UI の Typeahead も動作するようになったということ。

AngularJS で UI Bootstrap の Typeahead が動かない

AngularJS 1.2.0 の rc2 にした途端、UI Bootstrap (0.6.0) の Typeahead (Autocomplete みたいなやつ) が動かなくなった。

仕様変更なのかバグなのかわからず、とりあえずui-bootstrap-tpls-0.6.0.jsのコードを見たりしながらも AngularJS か UI Bootstrap のほうでバグ修正してくんないかなーと期待＆様子見していたところ、AngularJS 1.2.0 の rc3 では正常に動作するようになったので一件落着。

ちなみに、rc2 でのエラーは、matches is undefinedというもの。

Stack Overflow で関連する記事は、AngularJS 1.2.0 Bootstrap UI 0.6.0 (bootstrap3_bis2) Typeahead かな。rc2 では、promise絡みの実装に問題があったみたいだ。

jQuery と AngularJS は併用できるのか？

• jQuery と AngularJS は併用可能
• jQuery メインのサイトで AngularJS を部分的に使用可能

みんな大好き Twitter Bootstrap の話。CSS フレームワークの枠を超え、フロントエンド開発のキングというか、デファクトですね。

数年前のプロジェクトで Blueprint をチョイスした自分がバカみたいに、その後の Bootstrap の大流行。Bootstrap 3 も引き続き人気を博するだろうか。

そんな Bootstrap なんだけど、不満があるとすれば、モーダル（Modals）を動かせないこと！ モーダルダイアログがなんでドラッグで動かないんだ！