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.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
670
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.4k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1.1k
Other Decks in Programming
See All in Programming
GraphRAGの仕組みまるわかり
tosuri13
8
530
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
350
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
670
LINEヤフー データグループ紹介
lycorp_recruit_jp
1
2.4k
Discover Metal 4
rei315
2
130
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
生成AI時代のコンポーネントライブラリの作り方
touyou
1
170
Deep Dive into ~/.claude/projects
hiragram
13
2.5k
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
Fireside Chat
paigeccino
37
3.5k
Agile that works and the tools we love
rasmusluckow
329
21k
Designing for Performance
lara
610
69k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Invisible Side of Design
smashingmag
301
51k
Done Done
chrislema
184
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Docker and Python
trallard
44
3.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
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!