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

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

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!