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

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!