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
Make frontend development radical with Angular
Search
Ian Duncan
May 31, 2013
Programming
4
220
Make frontend development radical with Angular
Ian Duncan
May 31, 2013
Tweet
Share
More Decks by Ian Duncan
See All by Ian Duncan
OAuth at Logos
iand675
3
140
Other Decks in Programming
See All in Programming
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.8k
Navigating Dependency Injection with Metro
zacsweers
3
960
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
600
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
500
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
760
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
Ruby Parser progress report 2025
yui_knk
1
440
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
print("Hello, World")
eddie
2
530
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
Scaling GitHub
holman
463
140k
Building Applications with DynamoDB
mza
96
6.6k
Optimizing for Happiness
mojombo
379
70k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Context Engineering - Making Every Token Count
addyosmani
3
46
Thoughts on Productivity
jonyablonski
70
4.8k
Rails Girls Zürich Keynote
gr2m
95
14k
Designing for humans not robots
tammielis
253
25k
Docker and Python
trallard
45
3.6k
Transcript
ANGULAR MAKE FRONTEND DEVELOPMENT RADICAL WITH
I’M IAN
I’M IAN I BUILD FAITHLIFE
I’M IAN I BUILD FAITHLIFE I LIKE STUFF RADICAL
THINGS THAT ARE RADICAL: Fewer Bugs Less Code Fast Development
WHAT ANGULAR OFFERS: Routing Data Binding Controllers Dependency Injection Form
Validation Reusable HTML Components
WHAT ANGULAR OFFERS: Some other stuff too.
OK, that’s a lot to cover in one talk.
IN A NUTSHELL It’s a frontend JavaScript framework for building
testable, manageable code.
The good thing about Javascript: it’s really flexible. The bad
thing about Javascript: it’s really flexible.
None
Manually manipulating the DOM is like assembly programming
None
We’ve solved this problem before.
Why not MVC? Model View Controller
Model (Plain old Javascript object) View (HTML) Controller (JavaScript)
Controller
Controller
$scope exposes data/ functions to views
View
Surprise! It’s just HTML5.
Models really are just plain old JavaScript objects.
Where’s the magic?
Dependency injection + Two-way data binding
Dependency injection Specify dependency sources, Angular wires them up for
you.
Dependency injection Angular inspects function argument names to look for
the value to inject.
Dependency injection
Two-way data binding Values in $scope are exposed to both
the controller and the view.
Two-way data binding Modifications from one propagate to the other.
Two-way data binding Scopes are inherited
Two-way data binding Scopes trigger updates when observed values change
Two-way data binding
Directives
Directives Add behavior to HTML with classes, new elements, &
new attributes.
Directives Inspired by W3C’s Web Components working drafts.
Directives One of Angular’s killer features.
“Gee, I wish HTML could...” Support dropdown menus Have syntax-highlighted
text editing Have relative timestamps
Now it does! <sharks-with-lasers />
Directives The only place you should ever need to write
a line of code that manipulates the DOM
Testing Dependency injection makes that a lot easier. Separation of
concerns is the key!
Testing Run unit tests and integration tests across multiple browsers.
Angular has a ridiculously fast test runner, Karma.
Testing Built in mocks for common test scenarios: AJAX requests
Dates Logging
Testing Built in end-to-end testing support
Not covered in this talk: Internationalization & localization Filters Partial
templates CSS3 animation & transitions
QUESTIONS?