2015--03-21 ng-japan LTにて発表したスライドです

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.12by 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!