Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,077 views

Published on

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

Published in: Engineering
  • Be the first to comment

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

  1. 1. 1.3にBrowserify組み合わせて イベント駆動にした話 ng-japan March 21, 2015
  2. 2. @armorik83 • 京都から来ました from Kyoto. • AngularJS Anti-patterns
 アンチパターン集 • Modern AngularJS
 etc.
  3. 3. 1.4.0-beta.5 1.3.12by own project var angular = require('angular'); console.log(angular.version);
  4. 4. var angular = require('angular'); console.log(angular.version); 1.4.0-beta.5 ^1.3.14 2015-02-24 !!??
  5. 5. Already supported • 1.3でBrowserify使った話しようと
 思ったら、もう対応してました 👍 • browserify-shim is useful when you use <=1.3.13
 thlorenz/browserify-shim
  6. 6. Use only directive • Each .ts file has one directive • Towards 2.0, I DON'T use service, factory, ng-controller
  7. 7. Isolate Scope & broadcast • Use only Directive's isolate scope • Use only $broadcast() • But event names scattered
 イベント名文字列が散らばる…
  8. 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. 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. 10. Find more on GitHub https://github.com/armorik83/interactive-sem/tree/latent-variable Thanks a lot!

×