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
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
140
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
Is Xcode slowly dying out in 2025?
uetyo
1
280
Goで作る、開発・CI環境
sin392
0
240
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
780
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
10k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
180
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
A designer walks into a library…
pauljervisheath
207
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Music & Morning Musume
bryan
46
6.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
960
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Agile that works and the tools we love
rasmusluckow
329
21k
Writing Fast Ruby
sferik
628
62k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
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?