Submit Search
Upload
Angular js はまりどころ
•
Download as PPTX, PDF
•
42 likes
•
24,106 views
Ayumi Goto
Follow
AngularJSを業務で使って、はまったところをご紹介
Read less
Read more
Technology
Report
Share
Report
Share
1 of 32
Download now
Recommended
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
One Time Binding & Digest Loop
One Time Binding & Digest Loop
Kon Yuichi
3分でわかるangular js
3分でわかるangular js
Shin Adachi
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
Recommended
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
One Time Binding & Digest Loop
One Time Binding & Digest Loop
Kon Yuichi
3分でわかるangular js
3分でわかるangular js
Shin Adachi
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
Hayashi Yuichi
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
React.js + Flux
React.js + Flux
dsuke Takaoka
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Takahiro Maki
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
tomonari takahashi
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
Alt01-LT
Alt01-LT
Yuta Hiroto
Angular2
Angular2
Kenichi Kanai
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
Angular1&2
Angular1&2
Kenichi Kanai
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
Struts2を始めよう!
Struts2を始めよう!
Shinpei Ohtani
More Related Content
What's hot
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
Hayashi Yuichi
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
React.js + Flux
React.js + Flux
dsuke Takaoka
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Takahiro Maki
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
tomonari takahashi
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
Alt01-LT
Alt01-LT
Yuta Hiroto
Angular2
Angular2
Kenichi Kanai
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
Angular1&2
Angular1&2
Kenichi Kanai
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
What's hot
(20)
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
React.js + Flux
React.js + Flux
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Alt01-LT
Alt01-LT
Angular2
Angular2
Flux react現状確認会
Flux react現状確認会
今からでも遅くない! React事始め
今からでも遅くない! React事始め
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Angular1&2
Angular1&2
angular1脳で見るangular2
angular1脳で見るangular2
Similar to Angular js はまりどころ
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
Struts2を始めよう!
Struts2を始めよう!
Shinpei Ohtani
Inside mobage platform
Inside mobage platform
Toru Yamaguchi
scala+liftで遊ぼう
scala+liftで遊ぼう
youku
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
Shogo Sensui
AngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたい
Yosuke Onoue
Vue入門
Vue入門
Takeo Noda
[出張!雲勉 in Tokyo] Swagger で簡単APIドキュメント作成
[出張!雲勉 in Tokyo] Swagger で簡単APIドキュメント作成
Tomoki Oyamatsu
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
Yuki Takei
ASP.NET MVC 1.0
ASP.NET MVC 1.0
Shinpei Ohtani
Koa.js_エンジニア勉強会20140328
Koa.js_エンジニア勉強会20140328
エンジニア勉強会 エスキュービズム
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
Using Windows Azure
Using Windows Azure
Shinji Tanaka
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
Kazunari Hara
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Yatabe Terumasa
densan2014-late01
densan2014-late01
Takenori Nakagawa
Visualforce + jQuery
Visualforce + jQuery
Salesforce Developers Japan
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
Satomi Tsujita
Similar to Angular js はまりどころ
(20)
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Struts2を始めよう!
Struts2を始めよう!
Inside mobage platform
Inside mobage platform
scala+liftで遊ぼう
scala+liftで遊ぼう
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
AngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたい
Vue入門
Vue入門
[出張!雲勉 in Tokyo] Swagger で簡単APIドキュメント作成
[出張!雲勉 in Tokyo] Swagger で簡単APIドキュメント作成
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
ASP.NET MVC 1.0
ASP.NET MVC 1.0
Koa.js_エンジニア勉強会20140328
Koa.js_エンジニア勉強会20140328
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Using Windows Azure
Using Windows Azure
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
densan2014-late01
densan2014-late01
Visualforce + jQuery
Visualforce + jQuery
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
Recently uploaded
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Recently uploaded
(7)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Angular js はまりどころ
1.
AngularJS はまりどころ 2014/9/18
2.
おめでとうございます。
3.
自己紹介 後藤歩(@balmychan) 株式会社オロ
CakePHP, Rails, iOS, AndroidなどのWeb系、アプリ系の受託開発 家族向け写真共有サービスnicori の立ち上げ、開発 クラウド管理会計ZAC Enterprise の開発
4.
開発対象概要 開発対象 Zac
Enterprise(管理会計システム) 開発体制 日本3~4名 海外(ベトナム)1名 ※将来的には、20~30名のエンジニアが開発する想定 技術構成 AngularJS + TypeScript + .NET
5.
AngularJSの構成 モジュール ルーティング(ui.router)は使用せず、多言語対応のためのangular-translateと、directiveの共
通コンポーネント化、serviceのビジネスロジックの共通化、実装方式の共通化を図るために導 入 ディレクティブ 約40個(テンプレート代わりや、新しいインターフェース) サービス 約31個(サーバーサイドからのデータ取得や共通処理をまとめる) フィルター 約10個
6.
導入のきっかけ コード量を減らしたい→ data
binding UIを統一したい→ directive クライアント側の開発を、多人数開発で効率よく行いたい→ フルスタック 検討を開始したのは、2013年10月ごろ
7.
導入前の大きな懸念 パフォーマンスは問題ないか? 業務システムでは、大量のデータを同時に表示することは多い
一部画面では大量のリスト&計算処理など、クライアント側で処理する重い処理もある ※それまでは、jQuery or pure JS
8.
いくつか、はまった事例を紹介します
9.
はまりの分類 はまるポイントは、大きく分類して下記があります ・スコープ
・パフォーマンス ・フィルター ・バリデーション ・DI ・ディレクティブ ・サービス ・セキュリティ ・angular-translate ・altJS(TypeScript) ・1.3への移行
10.
パフォーマンス関連ではまったところ
11.
パフォーマンス これは有名な話ですが、data-bindingは2,000を超えると重くなるといわれている 特に、angular-translateを使っていると、ラベル部分にもdata-bindingが使われるので、
固定ラベルにもdata-bindingが使われ、数が多くなっていく
12.
one-time binding 下記のように、AngularJS
1.3から使用できるone-time bindingを使うと、余計なdata-bindingを初回のみにすることができ ます。これによって大量のリストも表示が可能になりました。 ::を付けるだけ <span>{{ ::item.title }}</span> <span ng-bind="item.title></span> <span>{{ ::('message' | translate) }}</span> ※angular-translateでone-time bindingを使う場合は、filterにする
13.
one-time binding filterの結果や、ng-class、配列にも指定できるため、とにかくリアルタイムに変更しない項目はすべてこれを使用してい
ます <span>{{ ::(item.date | date | convert) }}</span> <select> <option ng-repeat="option in ::options">{{ ::option.title }}</option> </select> <div ng-class="::{ normal: type == 0, warning: type == 1, danger: type == 2 }"></div> ※1.2までは、angular-onceやbindonceなどのモジュールを使用する 使えるところは使う
14.
過剰なdirective 大量のdata-bindingにも関連しますが、リストで表示するHTMLにdirectiveを使い過ぎると、ページング処理に重くなり ます。また、directiveのlinkで重い処理(大量のDOM処理や複雑な計算)を行うと、ページング時に生成に時間がかかり、
カクカクしだします。 <hoge-title>hoge</hoge-title> <hoge-button>Button1</hoge-button> <hoge-button>Button2</hoge-button> </hoge-header> </hoge-item> 可能な限りlinkは軽くする、directiveを使い過ぎない <hoge-item> <hoge-header> ※IEだとまた重い!!
15.
スコープ関連ではまったところ
16.
スコープ プリミティブな型のdata binding
scopeがtrue(継承)のdirective内でinputにプリミティブな型をng-modelでbindingすると、プロトタイプ継承の関係で想 定とは違う動作をすることがある。 このパターンはtitleが表示されない(myControllerで参照できない) <body ng-controller="myController"> <div>{{ title | json }}</div> <hoge-item> <input type="text" ng-model="title"> </hoge-item> </body> これは動作する <body ng-controller="myController"> <div>{{ obj.title | json }}</div> <hoge-item> <!-- このディレクティブはscope=true --> <input type="text" ng-model="obj.title"> </hoge-item> </body> title = "hoge" ← Set obj.title = "hoge" ← Set objが無い!ので上位 スコープを探索 このスコープからは参照できない
17.
ディレクティブ関連ではまったところ
18.
ディレクティブ ng-transcludeのscopeはfalseだが、内部で$scope.$new(false)が呼ばれている ng-transcludeで使用するHTMLに、プリミティブな値を使うと思わぬところで動作しない
※先ほどのscopeの問題と同様 このパターンは、titleが表示されない app.directive('hogeArea', function() { return { restrict: "EA", template: "<div ng-transclude></div>", transclude: true }; }); <hoge-area> <input type="text" name="title" ng-model="title"> </hoge-area> <div>{{ title }}</div>
19.
このように、scopeを指定してtranscludeすればOK app.directive('hogeItem', function()
{ return { restrict: "EA", template: "<div ng-transclude></div>", transclude: true, link: function(scope, element, attrs, ctrl, transclude) { if (transclude) { transclude(scope, function(clone) { element.find('div').append(clone); } } } }; }); 下記のissueで議論されていて、<div ng-transclude="parent, sibling, child"></div>で指定できるようになるかも。 https://github.com/angular/angular.js/issues/8609
20.
ディレクティブ input系のカスタムディレクティブを作るとき 独自に入力系ディレクティブを作る際、$viewValue,
$modelValue, $renderをしっかり理解しないとはまる たとえば、独自のselectタグのようなディレクティブを作りたい。まずは勢いとノリで実装してみる link: function(scope, element, attrs, ngModelCtrl) { // このinputは初期値を設定したいが、ng-repeatでelementが未生成だから遅延させよう $timeout(function() { ngModelCtrl.$setViewValue('initializeValue'); select(newValue); }); // ngModelが変わったら、選択肢を変更しよう scope.$watch("ngModel", function(newValue) { select(newValue); }); } }無限に選択肢が変わる現象が発生・・・
21.
ngModelCtrl.$viewValueは画面に表示するためのフォーマット後の値(ngModelの値が、$formattersを全て通った後) ngModelCtrl.$modelValueは内部で保持する値(画面入力値が、$parsersを全て通った後) ngModelCtrl.$renderは、ng-model="hoge"に指定された値が変更された時に呼ばれる、DOM操作関連の処理を入れる
link: function(scope, element, attrs, ngModelCtrl) { ngModelCtrl.$render = function() { var value = ngModelCtrl.$modelValue || ngModelCtrl.$viewValue; // 値無い場合(初期値が無いのも含む)の処理 if (angular.isUndefined(value)) { ngModelCtrl.$setViewValue("initialize Value"); ngModelCtrl.$render(); return; } // ここで、valueを元に、DOMを操作する処理を入れる element.find("div").addClass("hoge"); }; }
22.
ディレクティブ 良くあるフォームのリセットの処理をどうするか link:
function(scope, element, attrs, ngModelCtrl) { var beforePristing; scope.$watch(function() { return beforePristine = ngModelCtrl.$pristine; }, function() { if (beforePristine == false && ngModelCtrl.$pristine) { // リセット処理 } }; } こんなこともしてましたがいまいち・・・。みなさんどうしてるんでしょうか、教えてください
23.
DI関連ではまったところ
24.
DI Circular Dependency
errorが発生 あるディレクティブでサービスAを使い、そこでサービスBを使ってたらそいつがサービスAを使ってた app.directive('hogeDirective', ['serviceA', 'serviceB', function(serviceA, serviceB) { return { link: function() { serviceA.method(); serviceB.method(); } } }]); app.service('serviceA', ['serviceB', function(serviceB) { this.method = function() { alert("serviceA method!"); }; }]); app.service('serviceB', ['serviceA', function(serviceA) { this.method = function() { serviceA.method(); }; }); Circular Dependency errorが発生する https://docs.angularjs.org/error/$injector/cdep?p0=serviceA%20%3C-%20serviceB%20%3C-%20serviceA%20%3C-%20hogeInputDirective
25.
DI 下記で解決 app.directive('hogeDirective',
['serviceA', 'serviceB', function(serviceA, serviceB) { link: function() { serviceA.method(); serviceB.method(); } }]); app.service('serviceA', ['serviceB', function(serviceB) { this.method = function() { alert("serviceA method!") }; }]); app.service('serviceB', ['$injector', function($injector) { this.method = function() { $injector.invoke(['serviceA', function(serviceA) { serviceA.method(); }]); }; }]); $injectorサービスを使用する
26.
angular-translate関連ではまったところ
27.
angular-translate 多言語対応用のモジュール。下記の形にしておくと、各言語用の辞書データから読みだして、 表示される(動的に言語変更も簡単)
<div translate="APP_TITLE"></div> serviceとしても使用可能だが、promiseが返ってくるのでthenが入って見づらい app.controller("myController", ['$translate', function($translate) { $translate("APP_TITLE").then(function(value) { // タイトルを加工 scope.title = value; }); }); instantを使うと値が返ってくる(読み出しが完了していることが前提) app.controller("myController", ['$translate', function($translate) { scope.title = $translate.instan("APP_TITLE"); });
28.
1.3への移行ではまったところ
29.
AngularJS 1.3 isolated
scope同士のdirectiveを同時に使用するとエラー 下記は、custom-buttonとtranslateでisolated scopeを使っているエラーになる <custom-button translate="MESSAGE"></custom-button> 今回はtranslateがfilterでも使用できるので、そちらで回避 <custom-button>{{ ::('MESSAGE' | translate) }}</custom-button>
30.
AngularJS 1.3 validationの実装方法が変更
以前は下記のような形でvalidationを実装していた("A"だけ許可する簡易なバリデーション) ngModelCtrl.$parsers.unshift(function(viewValue) { var valid = (value == "A") ? true : false; ngModelCtrl.$setValidity("validA", valid); return valid ? value : undefined; }); この実装の場合、例えばvalidBを同時に使用していた場合、validAを評価した時点でその次のparserへの値は undefinedになってしまうため、validBのバリデーションがうまく動作しなかった 1.3からは下記を使用する ngModelCtrl.$validators['validA'] = function(modelValue, viewValue) { var value = modelValue || viewValue; return value == "A"; }
31.
はまったときは ・「AngularJSリファレンス」を読む ・検索
・angular.jsのソースを読む ・githubでissueも見る ・英語に強くなる
32.
ご清聴ありがとうございました。 今度別の機会で、TypeScript関連について話します!
Download now