Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AngularJS 1.3にBrowserify組み合わせてイベント駆動にした話
Search
OKUNOKENTARO
March 21, 2015
Programming
0
120
AngularJS 1.3にBrowserify組み合わせてイベント駆動にした話
ng-japan 2015年3月21日発表分の資料をSlideShareより再掲。
http://www.slideshare.net/armorik83/ng-japan
OKUNOKENTARO
March 21, 2015
Tweet
Share
More Decks by OKUNOKENTARO
See All by OKUNOKENTARO
トレタO/X アーキテクチャ移行記 Next.js App Router化への道のり / TORETA TECH UPDATE 1
okunokentaro
5
11k
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
190
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
10k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.4k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.6k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.8k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
690
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.4k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1.1k
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
260
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
540
Serena MCPのすすめ
wadakatu
4
980
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
230
開発生産性を上げるための生成AI活用術
starfish719
3
450
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
110
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2.1k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
310
チームの境界をブチ抜いていけ
tokai235
0
160
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Navigating Team Friction
lara
190
15k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
860
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Leading Effective Engineering Teams in the AI Era
addyosmani
1
220
Become a Pro
speakerdeck
PRO
29
5.5k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Balancing Empowerment & Direction
lara
4
690
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Transcript
1.3にBrowserify組み合わせて イベント駆動にした話 ng-japan March 21, 2015
@armorik83 • ژ͔Βདྷ·ͨ͠ from Kyoto. • AngularJS Anti-patterns Ξϯνύλʔϯू •
Modern AngularJS etc.
1.4.0-beta.5 1.3.12 by own project var angular = require('angular'); console.log(angular.version);
var angular = require('angular'); console.log(angular.version); 1.4.0-beta.5 ^1.3.14 2015-02-24 !!??
Already supported • 1.3ͰBrowserifyͬͨ͠Α͏ͱ ࢥͬͨΒɺ͏ରԠͯ͠·ͨ͠ • browserify-shim is useful when
you use <=1.3.13 thlorenz/browserify-shim
Use only directive • Each .ts file has one directive
• Towards 2.0, I DON'T use service, factory, ng-controller
Isolate Scope & broadcast • Use only Directive's isolate scope
• Use only $broadcast() • But event names scattered Πϕϯτ໊จࣈྻ͕ࢄΒΔ…
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 ✌️
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.
Find more on GitHub https://github.com/armorik83/interactive-sem/tree/latent-variable Thanks a lot!