AngularJS #TechLunch

AngularJS #TechLunch

AngularJS
2012/08/01 (水) @ Livesense TechLunch
発表者:塩足 拓也

E60aa4f80303f3f386898546ddb3686a?s=128

Livesense Inc.

April 21, 2014
Tweet

Transcript

  1. Takuya Shiotari

  2. JavaScriptMVCフレームワーク Framework UI Bindings Composed Views Web Presentation Layer Plays

    Nicely With Others Backbone.js ✗ ✗ ✓ ✓ SproutCore 1.x ✓ ✓ ✗ ✗ Sammy.js ✗ ✗ ✓ ✓ Spine.js ✗ ✗ ✓ ✓ Cappuccino ✓ ✓ ✗ ✗ Knockout.js ✓ ✗ ✓ ✓ Javascript MVC ✗ ✓ ✓ ✓ Google Web Toolkit ✗ ✓ ✗ ✗ Google Closure ✗ ✓ ✓ ✗ Ember.js ✓ ✓ ✓ ✓ Angular.js ✓ ✗ ✓ ✓ Batman.js ✓ ✗ ✓ ✓
  3. AngularJSとは • Googleとコミュニティによって開発されている • オープンソースのJavaScriptMVCフレームワー ク • 最新バージョンは1.0.2

  4. 特徴 • HTMLのシンタックスを拡張し、HTML自体をテ ンプレート言語として使うことができる • 双方向データバインディングでUI(View)からの データとJavaScriptオブジェクト(Model)を自動 的に同期する • 直感的なコントローラ

  5. テンプレートとしてのHTML HTML仕様と互換性をもつアプリ固有の要素、属 性、クラスタイプなどで既存のHTMLを拡張

  6. 双方向データバインディング UIでの変更をモデルに、モデルでの変更をUIに自 動的に反映する

  7. コントローラ DOM構造と一致した変数スコープ

  8. HTMLで再利用できるコンポー ネント カスタム要素や属性によって、動作を追加したり DOM を変更するなど、HTML のシンタックスを拡 張する手段を提供

  9. フィルタリング |演算子でパイプラインのようにフィルタを追加でき る

  10. 考察 • フレームワーク独自の定型的なコードがほとんど無 いので、やりたいことに注力できる • HTMLがそのままテンプレートになっているので、 JavaScriptを読み込めない環境(robotとか)には不 向き • 属性部分にコードを埋めることが出来るのは良い

    がやり過ぎは禁物 • minifyで77KBはでかい • 使い道がまだよくわからない