Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (16)
Similaire à Directiveで実現できたこと
Similaire à Directiveで実現できたこと (20)
Directiveで実現できたこと
- 2. 自己紹介 • KON Yuichi (@konpyu)! • Software Engineer in peace of cake! • Server side engineer! • Love Angular
- 8. 開発の規模感 • Rails 4.1 + nginx + MySQL + AngularJS(1.2系) • coffeeで8500Lくらい • 14 Controller, 33 Service, 36 Directive • エンジニア4名、デザイナー2名
- 9. Directive use case in note
- 21. Shift + Enterで改行するテキストエリア Enterを押すと送信されちゃう。Shift + Enterを押した 時には改行にしたい
- 26. DOMを操作したくなったら Directiveの出番 ・Testablity / コンポーネント化 / 再利用性 ・ui-bootstrapのような外部ライブラリも検討 ・$watch内でDOM操作をすると激重になるので注意
- 27. Directive Tips
- 32. いまのnote $rootScope NavbarController $rootScopeからイベントを$broadcast 受信側は$scope.$onで受け取り処理を行う $scope.$on followUser (uid) -> # 表示の反映処理 Directive UserController # フォロー成功イベントを発行 $rootScope.$broadcast followUser , uid Directive
- 33. イベントベースの問題点 ・多用するとコードが追いにくくなる（なってる） ・2 way data bindingのメリットを捨てている
- 34. MainCtrlを置く方法 [参考] http://gon.to/2013/05/01/sharing-data-state-on- angularjs-alternatives-comparison-and-my-solution/ MainController UserController NavbarController Directive Directive scope: user: = Follow.save , (res) -> scope.user.is_follow = true scope: user: = $scope.obj.user = {} $scope.obj.user = { name: kon , is_follow: false} 2 way data bindingされて 自動的に表示変更
- 35. MainCtrlベース ・子のcontrollerは親のcontrollerのscopeにアクセスできる 性質を利用 ・MainCtrlにはbindingする変数定義のみ置く ・初期化は子のcontrollerで行う ・2 way data bind されるので$rootScope.$broadcast不要 ・MainCtrlの肥大化が懸念
- 36. 実際にあった悲劇 !?
- 37. 継承に関するDot Rule ・$scopeの継承の仕組みはjavascriptのprototype chainと 同じ（$scope is pure javascript object） ・子の$scopeにhogeが無ければ、親の$scopeへhogeを探 しに行く ・hogeが文字列や整数のようなprimitiveな変数だと prototype chainが実行されない ・$scope.container.hoge のようにしてobjectを挟むとよい
- 39. 参考資料 ! Directive to Directive Communication http://www.thinkster.io/angularjs/sMgLuIxf02/angularjs-directive-to-directive- communication ! PROPOSED ANGULAR S WEBPAGE STRUCTURE http://gon.to/2013/05/18/proposed-angulars-project-structure ! Nested Scopes in AngularJS http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html ! Combining AngularJS with existing Components http://henriquat.re/directives/advanced-directives-combining-angular-with- existing-components-and-jquery/angularAndJquery.html !
- 40. 参考資料 Rethinking AngularJS Controllers http://toddmotto.com/rethinking-angular-js-controllers/ ! Advanced Design Patterns and Best Practice http://trochette.github.io/Angular-Design-Patterns-Best-Practices/#/intro !