Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularJS 1.3にBrowserify組み合わせてイベント駆動にした話

AngularJS 1.3にBrowserify組み合わせてイベント駆動にした話

ng-japan 2015年3月21日発表分の資料をSlideShareより再掲。
http://www.slideshare.net/armorik83/ng-japan

2bedb1eb8f841cd3c3ae584600b016e0?s=128

OKUNOKENTARO

March 21, 2015
Tweet

Transcript

  1. 1.3にBrowserify組み合わせて イベント駆動にした話 ng-japan March 21, 2015

  2. @armorik83 • ژ౎͔Βདྷ·ͨ͠ from Kyoto. • AngularJS Anti-patterns
 Ξϯνύλʔϯू •

    Modern AngularJS
 etc.
  3. 1.4.0-beta.5 1.3.12 by own project var angular = require('angular'); console.log(angular.version);

  4. var angular = require('angular'); console.log(angular.version); 1.4.0-beta.5 ^1.3.14 2015-02-24 !!??

  5. Already supported • 1.3ͰBrowserify࢖ͬͨ࿩͠Α͏ͱ
 ࢥͬͨΒɺ΋͏ରԠͯ͠·ͨ͠ • browserify-shim is useful when

    you use <=1.3.13
 thlorenz/browserify-shim
  6. Use only directive • Each .ts file has one directive

    • Towards 2.0, I DON'T use service, factory, ng-controller
  7. Isolate Scope & broadcast • Use only Directive's isolate scope

    • Use only $broadcast() • But event names scattered
 Πϕϯτ໊จࣈྻ͕ࢄΒ͹Δ…
  8. Add Listener import Store = require('./store'); class DirectiveController { constructor()

    { Store.addListener(this.someMethod); } } ! class Store { addListener(listener) { this.$rootScope.$on(EVENT_NAME, listener); } ! hasChanged(err) { this.$rootScope.$broadcast(EVENT_NAME, err); } } Gather into one class ✌️
  9. Respect for F... • An Architecture F...
 Action -> Dispatcher

    -> Store -> View • My Angular 1.3 Project
 Child Directive Controller -> Dispatcher
 -> Store -> Root Directive • Without ng-controller, Angular DI, service, factory. Browserify is helpful us.
  10. Find more on GitHub https://github.com/armorik83/interactive-sem/tree/latent-variable Thanks a lot!