1. The document discusses using Browserify with AngularJS 1.3 to create an event-driven application. It notes that Browserify support was already in place for AngularJS 1.3. 2. It describes an architecture where each TypeScript file contains a single directive, without using services, factories, or controllers. Events are broadcast from a central store using isolate scopes. 3. Code examples are provided for adding listeners to the central store and broadcasting events from the store. The architecture is said to respect Flux principles by having child directives act as dispatchers to the central store.

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!