Slide 1
Slide 1 text
BUILDING THE MODERN WEB
WITH ANGULARJS
@toddmotto | toddmotto.com
Slide 2
Slide 2 text
WHO AM I?
Lead front-end at Appsbroker
Created Conditionizr, HTML5Blank, FireShell
Partnered with Intel/Rolling Stone in 2013
Slide 3
Slide 3 text
SESSION OVERVIEW
Modern Web
Key concepts (MVC, data-binding)
AngularJS core features
Slide 4
Slide 4 text
WHAT/WHY ANGULAR?
Client-side MVC + JS framework
Server + Client AIO (one language!)
Rapid application development
Focus on data-driven apps (no DOM manipulation)
Slide 5
Slide 5 text
WHAT IS THE "MODERN WEB"?
Client side templating
Web Components/Shadow DOM
HTML5 data-* attributes
Single Page Apps
More JavaScript
Slide 6
Slide 6 text
KEY CONCEPTS
QUICK OVERVIEW OF MVC (+ DATA-BINDING!)
Slide 7
Slide 7 text
MODEL
APPLICATION DATA (JSON)
Slide 8
Slide 8 text
VIEW
RENDERED HTML/COMPONENTS/TEMPLATES
Slide 9
Slide 9 text
CONTROLLER
COMMS WITH THE SERVER AND CLIENT
DRIVES THE MODEL/VIEW CHANGES
Slide 10
Slide 10 text
TWO WAY DATA-BINDING
KEEPING DATA IN SYNC, MODEL UPDATES THE VIEW, VICE VERSA
Slide 11
Slide 11 text
THREE D'S
Design
Declare
Distribute
Slide 12
Slide 12 text
DESIGN (JSON - MODEL)
[
{
"
f
r
o
m
"
: "
S
t
e
v
e J
o
b
s
"
,
"
s
u
b
j
e
c
t
"
: "
H
o
l
d
i
n
g y
o
u
r i
P
h
o
n
e c
o
r
r
e
c
t
l
y
"
,
"
s
e
n
t
"
: "
2
0
1
4
-
0
1
-
1
2
T
0
8
:
0
5
:
5
9
Z
"
}
,
{
"
f
r
o
m
"
: "
B
i
l
l G
a
t
e
s
"
,
"
s
u
b
j
e
c
t
"
: "
O
v
e
r
c
o
m
i
n
g B
S
O
D
"
,
"
s
e
n
t
"
: "
2
0
1
4
-
0
1
-
1
6
T
1
9
:
0
1
:
2
6
Z
"
}
]
Slide 13
Slide 13 text
DECLARE (DATA-BINDING - VIEW)
<
u
l
>
<
l
i n
g
-
r
e
p
e
a
t
=
"
e
m
a
i
l i
n e
m
a
i
l
s
"
>
<
p
>
F
r
o
m
: {
{ e
m
a
i
l
.
f
r
o
m }
}
<
/
p
>
<
p
>
S
u
b
j
e
c
t
: {
{ e
m
a
i
l
.
s
u
b
j
e
c
t }
}
<
/
p
>
<
/
l
i
>
<
/
u
l
>
Slide 14
Slide 14 text
DISTRIBUTE (CONTROLLER)
v
a
r m
y
A
p
p = a
n
g
u
l
a
r
.
m
o
d
u
l
e
(
'
m
y
A
p
p
'
, [
]
)
;
m
y
A
p
p
.
c
o
n
t
r
o
l
l
e
r
(
'
M
a
i
n
C
t
r
l
'
, [
'
$
s
c
o
p
e
'
, f
u
n
c
t
i
o
n (
$
s
c
o
p
e
) {
$
h
t
t
p
.
g
e
t
(
'
/
e
m
a
i
l
s
'
)
.
s
u
c
c
e
s
s
(
f
u
n
c
t
i
o
n (
d
a
t
a
) {
$
s
c
o
p
e
.
e
m
a
i
l
s = d
a
t
a
; /
/ A
r
r
a
y
}
)
;
}
]
)
;
Slide 15
Slide 15 text
CORE FEATURES
THE WOW PARTS
Slide 16
Slide 16 text
HANDLEBAR BINDINGS
EXPOSING THE MODEL
/
/ J
S
$
s
c
o
p
e
.
u
s
e
r
n
a
m
e = '
T
o
d
d
'
;
/
/ H
T
M
L
<
p
>
W
e
l
c
o
m
e
, {
{ u
s
e
r
n
a
m
e }
}
<
/
p
>
/
/ O
u
t
p
u
t
<
p
>
W
e
l
c
o
m
e
, T
o
d
d
<
/
p
>
Slide 17
Slide 17 text
CONTROLLER SIMPLICITY
PUSHING TO THE $SCOPE
v
a
r m
y
A
p
p = a
n
g
u
l
a
r
.
m
o
d
u
l
e
(
'
m
y
A
p
p
'
, [
]
)
;
/
/ <
d
i
v n
g
-
c
o
n
t
r
o
l
l
e
r
=
"
U
s
e
r
s
C
t
r
l
"
>
<
/
d
i
v
>
m
y
A
p
p
.
c
o
n
t
r
o
l
l
e
r
(
'
U
s
e
r
s
C
t
r
l
'
, [
'
$
s
c
o
p
e
'
, f
u
n
c
t
i
o
n (
$
s
c
o
p
e
) {
/
/ g
e
t t
h
e u
s
e
r
n
a
m
e
$
h
t
t
p
.
g
e
t
(
'
/
u
s
e
r
s
'
)
.
s
u
c
c
e
s
s
(
f
u
n
c
t
i
o
n (
d
a
t
a
) {
$
s
c
o
p
e
.
u
s
e
r
n
a
m
e = d
a
t
a
.
u
s
e
r
n
a
m
e
;
}
)
;
}
]
)
;
Slide 18
Slide 18 text
TWO WAY DATA-BINDING
MODEL AND VIEW IN SYNC, NO RE-QUERYING AND INSTANT UPDATES
<
d
i
v c
l
a
s
s
=
"
u
s
e
r
n
a
m
e
"
>
<
p
>
C
h
a
n
g
e y
o
u
r u
s
e
r
n
a
m
e
:
<
/
p
>
<
i
n
p
u
t t
y
p
e
=
"
t
e
x
t
" n
g
-
m
o
d
e
l
=
"
u
s
e
r
n
a
m
e
"
>
<
a n
g
-
c
l
i
c
k
=
"
u
p
d
a
t
e
U
s
e
r
n
a
m
e
(
)
;
"
>
S
a
v
e u
s
e
r
n
a
m
e a
s {
{ u
s
e
r
n
a
m
e }
}
?
<
/
a
>
<
/
d
i
v
>
Slide 19
Slide 19 text
$SCOPE FUNCTIONS
CALLBACK-LESS DATA MANIPULATION (NO DOM)
/
/ a
p
p
l
i
e
d v
i
a n
g
-
c
l
i
c
k
=
"
d
e
l
e
t
e
E
m
a
i
l
(
$
i
n
d
e
x
, e
m
a
i
l
)
"
$
s
c
o
p
e
.
d
e
l
e
t
e
E
m
a
i
l = f
u
n
c
t
i
o
n (
i
n
d
e
x
, d
a
t
a
) {
$
h
t
t
p
.
d
e
l
e
t
e
(
d
a
t
a
)
.
s
u
c
c
e
s
s
(
f
u
n
c
t
i
o
n (
) {
$
s
c
o
p
e
.
e
m
a
i
l
s
.
s
p
l
i
c
e
(
i
n
d
e
x
, 1
)
;
}
)
;
}
;
Slide 20
Slide 20 text
TEMPLATING
SCALABLE/REUSABLE AND FAST COMPONENTS
<
!
-
- t
e
m
p
l
a
t
e
s
/
e
m
a
i
l
s
.
h
t
m
l -
-
>
<
d
i
v c
l
a
s
s
=
"
e
m
a
i
l
s
" n
g
-
c
o
n
t
r
o
l
l
e
r
=
"
E
m
a
i
l
s
C
t
r
l
"
>
<
p
>
I
n
b
o
x {
{ m
y
M
o
d
e
l
.
e
m
a
i
l
s
.
l
e
n
g
t
h }
}
<
/
p
>
<
/
d
i
v
>
<
u
l
>
<
l
i n
g
-
r
e
p
e
a
t
=
"
e
m
a
i
l i
n m
y
M
o
d
e
l
.
e
m
a
i
l
s
" n
g
-
c
l
i
c
k
=
"
v
i
e
w
E
m
a
i
l
(
$
i
n
d
e
x
, e
m
a
i
l
)
"
>
<
p
>
F
r
o
m
: {
{ e
m
a
i
l
.
f
r
o
m }
}
<
/
p
>
<
p
>
S
u
b
j
e
c
t
: {
{ e
m
a
i
l
.
s
u
b
j
e
c
t }
}
<
/
p
>
<
/
l
i
>
<
/
u
l
>
Slide 21
Slide 21 text
DIRECTIVES
REUSABLE CHUNKS OF CODE/LOGIC
/
/ <
e
m
a
i
l
s
-
l
i
s
t
>
<
/
e
m
a
i
l
s
-
l
i
s
t
> E
l
e
m
e
n
t
: '
E
'
/
/ <
d
i
v e
m
a
i
l
s
-
l
i
s
t
>
<
/
d
i
v
> A
t
t
r
i
b
u
t
e
: '
A
'
m
y
A
p
p
.
d
i
r
e
c
t
i
v
e
(
'
e
m
a
i
l
s
L
i
s
t
'
, f
u
n
c
t
i
o
n (
) {
r
e
t
u
r
n {
r
e
s
t
r
i
c
t
: '
E
A
'
,
r
e
p
l
a
c
e
: t
r
u
e
,
t
r
a
n
s
c
l
u
d
e
: t
r
u
e
,
t
e
m
p
l
a
t
e
U
r
l
: '
t
e
m
p
l
a
t
e
s
/
e
m
a
i
l
s
.
h
t
m
l
'
,
l
i
n
k
: f
u
n
c
t
i
o
n (
s
c
o
p
e
, e
l
e
m
e
n
t
, a
t
t
r
s
) {
/
/ D
O
M m
a
n
i
p
u
l
a
t
i
o
n
/
e
v
e
n
t
s h
e
r
e
!
}
}
;
}
)
;
Slide 22
Slide 22 text
EXPRESSIONS
EVALUATE DATA AND MANIPULATE THE DOM
<
p
>
{
{ m
y
M
o
d
e
l
.
e
m
a
i
l
s
.
l
e
n
g
t
h > 0 &
& '
E
m
a
i
l
s
' |
| '
N
o e
m
a
i
l
s
' }
}
<
/
p
>
Slide 23
Slide 23 text
FILTERS
INSTANT DOM FILTERING
<
!
-
- m
y
A
p
p
.
f
i
l
t
e
r
(
'
i
m
p
o
r
t
a
n
t
'
, [
l
o
g
i
c
]
) -
-
>
<
u
l
>
<
l
i n
g
-
r
e
p
e
a
t
=
"
e
m
a
i
l i
n m
y
M
o
d
e
l
.
e
m
a
i
l
s | f
i
l
t
e
r
:
i
m
p
o
r
t
a
n
t
"
>
<
p
>
{
{ e
m
a
i
l
.
f
r
o
m }
}
<
/
p
>
<
p
>
{
{ e
m
a
i
l
.
s
u
b
j
e
c
t }
}
<
/
p
>
<
/
l
i
>
<
/
u
l
>
Slide 24
Slide 24 text
DYNAMIC VIEWS/ROUTING
AUTOMATIC XHR HANDLING/TEMPLATE POPULATION
m
y
A
p
p
.
c
o
n
f
i
g
(
[
'
$
r
o
u
t
e
P
r
o
v
i
d
e
r
'
, f
u
n
c
t
i
o
n (
$
r
o
u
t
e
P
r
o
v
i
d
e
r
) {
$
r
o
u
t
e
P
r
o
v
i
d
e
r
.
w
h
e
n
(
'
/
e
m
a
i
l
s
'
, {
t
e
m
p
l
a
t
e
U
r
l
: '
v
i
e
w
s
/
e
m
a
i
l
s
.
h
t
m
l
'
}
)
.
w
h
e
n
(
'
/
e
m
a
i
l
s
/
i
t
e
m
:
i
d
'
, {
t
e
m
p
l
a
t
e
U
r
l
: '
v
i
e
w
s
/
e
m
a
i
l
s
-
s
i
n
g
l
e
.
h
t
m
l
'
}
)
.
o
t
h
e
r
w
i
s
e
(
{
r
e
d
i
r
e
c
t
T
o
: '
/
'
}
)
;
}
]
)
;
Slide 25
Slide 25 text
FACTORY
ABSTRACTED LOGIC (DRY)
m
y
A
p
p
.
f
a
c
t
o
r
y
(
'
J
S
O
N
F
a
c
t
o
r
y
'
, [
'
$
h
t
t
p
'
, f
u
n
c
t
i
o
n (
$
h
t
t
p
) {
v
a
r J
S
O
N
F
a
c
t
o
r
y = {
g
e
t
U
s
e
r
s
: f
u
n
c
t
i
o
n (
c
a
l
l
b
a
c
k
) {
$
h
t
t
p
.
g
e
t
(
'
/
u
s
e
r
s
'
)
.
s
u
c
c
e
s
s
(
c
a
l
l
b
a
c
k
)
;
}
,
p
o
s
t
U
s
e
r
s
: f
u
n
c
t
i
o
n (
c
a
l
l
b
a
c
k
) {
$
h
t
t
p
.
p
o
s
t
(
'
/
u
s
e
r
s
U
p
d
a
t
e
'
)
.
s
u
c
c
e
s
s
(
c
a
l
l
b
a
c
k
)
;
}
}
;
r
e
t
u
r
n J
S
O
N
F
a
c
t
o
r
y
;
}
]
)
;
/
/ J
S
O
N
F
a
c
t
o
r
y
.
g
e
t
U
s
e
r
s
(
f
u
n
c
t
i
o
n (
d
a
t
a
) {
/
/ $
s
c
o
p
e
.
u
s
e
r
s = d
a
t
a
;
/
/ }
)
;
Slide 26
Slide 26 text
VALIDATION
MODEL SAYS NO
<
!
-
- a
u
t
o e
v
e
n
t
.
p
r
e
v
e
n
t
D
e
f
a
u
l
t
(
) f
o
r X
H
R c
a
l
l
s -
-
>
<
f
o
r
m n
g
-
s
u
b
m
i
t
=
"
u
p
d
a
t
e
U
s
e
r
n
a
m
e
(
)
;
"
>
<
i
n
p
u
t t
y
p
e
=
"
t
e
x
t
" n
g
-
m
o
d
e
l
=
"
u
s
e
r
n
a
m
e
"
>
<
b
u
t
t
o
n t
y
p
e
=
"
s
u
b
m
i
t
" n
g
-
d
i
s
a
b
l
e
d
=
"
!
u
s
e
r
n
a
m
e
.
l
e
n
g
t
h
"
>
U
p
d
a
t
e U
s
e
r
n
a
m
e
<
/
b
u
t
t
o
n
>
<
/
f
o
r
m
>
Slide 27
Slide 27 text
"THINKING ANGULAR"
NG-THINKING
Forget the DOM exists $('.no!')
Think components and layers
Keep code abstracted (files/code)
Slide 28
Slide 28 text
QUESTIONS?