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
Is Xcode slowly dying out in 2025?
uetyo
1
190
Java on Azure で LangGraph!
kohei3110
0
170
ReadMoreTextView
fornewid
1
480
Create a website using Spatial Web
akkeylab
0
300
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
A2A プロトコルを試してみる
azukiazusa1
2
1.1k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
400
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
480
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
380
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
800
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
A better future with KSS
kneath
239
17k
We Have a Design System, Now What?
morganepeng
53
7.7k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Adopting Sorbet at Scale
ufuk
77
9.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Code Review Best Practice
trishagee
68
18k
Speed Design
sergeychernyshev
32
1k
Producing Creativity
orderedlist
PRO
346
40k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
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?