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
RDoc meets YARD
okuramasafumi
4
170
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
1から理解するWeb Push
dora1998
7
1.9k
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
170
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
540
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
130
AIでLINEスタンプを作ってみた
eycjur
1
230
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
Deep Dive into Kotlin Flow
jmatsu
1
370
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Agile that works and the tools we love
rasmusluckow
330
21k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Optimizing for Happiness
mojombo
379
70k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
How to Ace a Technical Interview
jacobian
279
23k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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?