AngularJS 1.4.0 のリリースは来春 2015 年 3 月頃になるようですね。

公式ブログの記事『Planning Angular 1.4』を日本語訳しておきました。


Planning Angular 1.4

AngularJS 1.4 についてのミーティングを先週実施し、その概要をまとめています。ミーティングの映像は YouTube でご覧いただけます。

Release Schedule

最初のリリースとなる 1.4.0 を、2015 年 3 月 5 日の ng-conf にあわせて、2015 年の春を予定しています。1.3.x は継続的にリリースしていきます。

Work Planning

GitHub でコミュニティの関心が高い issues と PRs から、1.4 への提案機能のリスト spreadsheet を Lucas が作成しました。大きな機能や、重大な変更 (breaking changes)、新しい API について記載しています。ミーティングの大半の時間は、これらの機能について Angular 1.x で対応すべきか、どのリリースにするか、誰が担当するかについて話し合いました。

1.4 Targets

1.4 で予定している機能について tracking spreadsheet を作成しています。

1.4 の主要なテーマは以下のとおりです。

  • RouterBrian – Angular 1 と 2 で対応する新しい router – Progress
  • I18NChirayu – ファーストクラスの国際化対応 – Design Doc
  • FormsMartin – 簡単に使えて保守性の高い parsing / formatting / validation – Design Doc
  • HTTPPawel$http サービスの改善 (serialization, JSON parsing, testing mock DSL)
  • ParserLucas$parse サービスのパフォーマンス改善
  • DocumentationCaitlin – Material Design を使ってドキュメントのデザインを再設計

加えて、以下の重要または重大な変更 (breaking changes) を含めることを計画しています。

  • $injectorBrian – module を再定義しているとエラーを投げることで、バグを早期に発見 (#1779)
  • $compileIgor – より簡単にコンポーネントタイプの directive を定義するために、新しく module.component ヘルパーを提供 (#10007)
  • $compileCaitlin – オプショナルでない isolated scope のマッピングに対応する属性を記述漏れしているとエラーを投げる (#9216)
  • Project layout / ModularityPete – angular.js をさらに小さなオプショナルのモジュール/ファイルに分割し、ノンオプショナルなコアのファイルサイズを小さくする(モバイルのユースケースで有益)
Read on →

AngularJS 公式ブログの記事 ng-europe, Angular 1.3, and beyond を日本語訳しておきました。


先週、パリで開催した ng-europe において、Angular の過去、現在、そして未来について発表しました。このブログポストでは、重要なポイントとお知らせについてまとめています。

Angular 1.3

リリースしたばかりの新しい AngularJS 1.3 では、AngularJS 1.2 には無かった多くの機能と改善が含まれています。

  • パフォーマンス:DOM 操作や digest など多くの処理が 3 – 4 倍高速化し、アプリケーションが軽快に動作します。
  • フォーム:シンプルな API となり、フォームバリデーションのコードを短く記述できます。
  • ARIA サポート:ngAria により、スクリーンリーダーなどの支援ソフトウェアをサポートする適切な ARIA 属性を追加・削除できます。
  • Material Design:ユーザインターフェイスデザインとインタラクションのための Google’s specification をほぼ完全に機能するよう実装しています。詳しくは material.angularjs.org で。

Web アプリケーションを実装しているなら、このバージョンを使ってください。Angular 1.x で構築された Google の 1,600 を超えるアプリケーションで、長期間にわたってこのバージョンを最上位としてサポートしていくことをコミットしています。

Angular 1.x で予定していた新機能と breaking changes については、一部の例外を除いて 2.0 に先送りし、新しい設計をベースに取り組んでいきます。PRs(プルリクエスト)のレビューと issues への返答を続けてはいますが、1.x については、機能よりも安定性、セキュリティ、性能をより重視していきます。

Angular 1.2 をお使いであれば、コードを 1.3 に移行する方法について migration instructions日本語)を確認してください。

Read on →

Slides at ng-europe 2014

10/22 〜 10/23 に、パリ(フランス)で AngularJS のカンファレンス ng-europe が開催されていました。

捕捉できたスライドについてはリンクしています。抜けが多いですが、スライドを捕捉できしだい追加していきます。

WEDNESDAY OCTOBER 22nd

Igor Minar & Brad Green – Keynote

Jeff Cross & Brian Ford – Angular 1.3

Andrew Joslin – Ionic Framework

Victor Berchet & Rado Kirov – AngularDart under the hood

Vojta Jína – Can We Learn from Architects?

Julien Bouquillon – Using AngularJS and Phonegap to build hybrid mobile applications

Thomas Burleson & Max Lynch – Material Design

Pete Bacon Darwin – Dgeni – Documentation generation on steroids

Julie Ralph & Chirayu Krishnappa – Protractor and the Testability API

Rob Eisenberg – The new Router for AngularJS

Pawel Kozlowski – ui-bootstrap

Matthieu Lux – Angular from scratch

Oliver Dore – Responsive Takes Flight: Building The First Responsive Airline Website

WEDNESDAY OCTOBER 23rd

Miško Hevery – Keynote

Igor Minar & Tobias Bosch – Angular 2.0 Core

Zack Brown – Famous Angular

Douglas Duteil – Yet another way to animate in Angular

Martin Gontovnikas – Restangular 2.0: The future and beyond

Erik Arvidsson & Vojta Jína – ES6 in Angular 2.0

Matias Niemelä – Animations (sequencer, web animations)

Lukas Ruebbelke – Be a Real Time Cage Dragon with AngularJS and Firebase

Carmen Popoviciu & Pascal Precht – “Don’t stop thinking about tomorrow” – AngularJS and Web Components

Marcy Sutton – AngularJS Accessibility

Jeremy Elbourn – Software Patterns and Design with AngularJS

Dave Smith – The Power of $q

Matias Woloski & Martin Gontovnikas – Making your Angular app a maximum security prision

Ari Lerner – Building games with AngularJS

Brian Ford – Tooling

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 がお気に入りです。