Downloaded 18 times
![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されて
自動的に表示変更](https://image.slidesharecdn.com/0725directiveinnote-140726035051-phpapp02/75/Directive-34-2048.jpg)
Directiveで実現できたこと
- 1.
- 2. 自己紹介 • KON Yuichi(@konpyu)! • Software Engineer in peace of cake! • Server side engineer! • Love Angular
- 3.
- 5.
- 6.
- 7.
- 8. 開発の規模感 • Rails 4.1+ nginx + MySQL + AngularJS(1.2系) • coffeeで8500Lくらい • 14 Controller, 33 Service, 36 Directive • エンジニア4名、デザイナー2名
- 9. Directive use casein note
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. Shift + Enterで改行するテキストエリア Enterを押すと送信されちゃう。Shift+ Enterを押した 時には改行にしたい
- 22.
- 23.
- 24.
- 25.
- 26. DOMを操作したくなったら Directiveの出番 ・Testablity / コンポーネント化/ 再利用性 ・ui-bootstrapのような外部ライブラリも検討 ・$watch内でDOM操作をすると激重になるので注意
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. いまのnote $rootScope NavbarController $rootScopeからイベントを$broadcast 受信側は$scope.$onで受け取り処理を行う $scope.$on followUser (uid)-> # 表示の反映処理 Directive UserController # フォロー成功イベントを発行 $rootScope.$broadcast followUser , uid Directive
- 33. イベントベースの問題点 ・多用するとコードが追いにくくなる（なってる） ・2 way databindingのメリットを捨てている
- 34. MainCtrlを置く方法 [参考] http://gon.to/2013/05/01/sharing-data-state-on- angularjs-alternatives-comparison-and-my-solution/ MainController UserController NavbarController DirectiveDirective 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 databind されるので$rootScope.$broadcast不要 ・MainCtrlの肥大化が懸念
- 36.
- 37. 継承に関するDot Rule ・$scopeの継承の仕組みはjavascriptのprototype chainと 同じ（$scopeis pure javascript object） ・子の$scopeにhogeが無ければ、親の$scopeへhogeを探 しに行く ・hogeが文字列や整数のようなprimitiveな変数だと prototype chainが実行されない ・$scope.container.hoge のようにしてobjectを挟むとよい
- 38.
- 39. 参考資料 ! Directive to DirectiveCommunication 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/ ! AdvancedDesign Patterns and Best Practice http://trochette.github.io/Angular-Design-Patterns-Best-Practices/#/intro !