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
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
1.5k
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
マンガアプリViewerの大画面対応を考える
kk__777
0
260
CSC305 Lecture 10
javiergs
PRO
0
260
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
130
Introduce Hono CLI
yusukebe
6
3.1k
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
660
One Enishi After Another
snoozer05
PRO
0
160
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
290
CSC305 Lecture 09
javiergs
PRO
0
310
iOSでSVG画像を扱う
kishikawakatsumi
0
170
Featured
See All Featured
Site-Speed That Sticks
csswizardry
13
930
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Making Projects Easy
brettharned
120
6.4k
How STYLIGHT went responsive
nonsquared
100
5.9k
Optimizing for Happiness
mojombo
379
70k
The Invisible Side of Design
smashingmag
302
51k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Gamification - CAS2011
davidbonilla
81
5.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
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!