Slide 1
Slide 1 text
ANGULARJS
CLIENT-SIDE MVC/MVVM JAVASCRIPT FRAMEWORK
by @toddmotto
Slide 2
Slide 2 text
KEY CONCEPTS
Model
View
Controller
Two way data-binding
Slide 3
Slide 3 text
MODEL
APPLICATION DATA STRUCTURE, ANY ABSTRACTIONS
Slide 4
Slide 4 text
VIEW
RENDERED HTML/COMPONENTS/TEMPLATES
Slide 5
Slide 5 text
CONTROLLER
COMMS WITH THE SERVER AND CLIENT
Slide 6
Slide 6 text
TWO WAY DATA-BINDING
KEEPING DATA IN SYNC, MODEL SPEAKS TO THE VIEW, VICE VERSA
Slide 7
Slide 7 text
SETUP ESSENTIALS (HTML)
<
d
i
v n
g
-
a
p
p
=
"
m
y
A
p
p
"
>
<
d
i
v n
g
-
c
o
n
t
r
o
l
l
e
r
=
"
M
a
i
n
C
t
r
l
"
>
<
!
-
- c
o
n
t
r
o
l
l
e
r l
o
g
i
c -
-
>
<
/
d
i
v
>
<
/
d
i
v
>
Slide 8
Slide 8 text
SETUP ESSENTIALS (JAVASCRIPT)
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
) {
/
/ C
o
n
t
r
o
l
l
e
r l
o
g
i
c
}
]
)
;
Slide 9
Slide 9 text
CONTROLLERS: PUSHING TO THE $SCOPE (HTML)
<
d
i
v n
g
-
a
p
p
=
"
m
y
A
p
p
"
>
<
d
i
v n
g
-
c
o
n
t
r
o
l
l
e
r
=
"
M
a
i
n
C
t
r
l
"
>
{
{ t
e
x
t }
}
<
/
d
i
v
>
<
/
d
i
v
>
Slide 10
Slide 10 text
CONTROLLERS: PUSHING TO THE $SCOPE (JAVASCRIPT)
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
) {
$
s
c
o
p
e
.
t
e
x
t = '
H
e
l
l
o
, A
n
g
u
l
a
r f
a
n
a
t
i
c
.
'
;
}
]
)
;
Slide 11
Slide 11 text
CONTROLLERS: PUSHING TO THE $SCOPE (OUTPUT)
<
d
i
v n
g
-
a
p
p
=
"
m
y
A
p
p
"
>
<
d
i
v n
g
-
c
o
n
t
r
o
l
l
e
r
=
"
M
a
i
n
C
t
r
l
"
>
H
e
l
l
o
, A
n
g
u
l
a
r f
a
n
a
t
i
c
.
<
/
d
i
v
>
<
/
d
i
v
>
Slide 12
Slide 12 text
DIRECTIVES: MANIPULATING THE DOM
Reusable chunks of code injected
Packaged and managed individually
Custom buttons, forms, tooltips (components)
Slide 13
Slide 13 text
DIRECTIVES: DOM DECLARATIONS
<
!
-
- 1
: a
s a
n a
t
t
r
i
b
u
t
e d
e
c
l
a
r
a
t
i
o
n -
-
>
<
a c
u
s
t
o
m
-
b
u
t
t
o
n
>
C
l
i
c
k m
e
<
/
a
>
<
!
-
- 2
: a
s a c
u
s
t
o
m e
l
e
m
e
n
t -
-
>
<
c
u
s
t
o
m
-
b
u
t
t
o
n
>
C
l
i
c
k m
e
<
/
c
u
s
t
o
m
-
b
u
t
t
o
n
>
<
!
-
- 3
: a
s a c
l
a
s
s (
u
s
e
d f
o
r o
l
d I
E c
o
m
p
a
t
) -
-
>
<
a c
l
a
s
s
=
"
c
u
s
t
o
m
-
b
u
t
t
o
n
"
>
C
l
i
c
k m
e
<
/
a
>
<
!
-
- 4
: a
s a c
o
m
m
e
n
t -
-
>
<
!
-
- d
i
r
e
c
t
i
v
e
: c
u
s
t
o
m
-
b
u
t
t
o
n -
-
>
Slide 14
Slide 14 text
DIRECTIVES: JAVASCRIPT SETUP
m
y
A
p
p
.
d
i
r
e
c
t
i
v
e
(
'
c
u
s
t
o
m
B
u
t
t
o
n
'
, f
u
n
c
t
i
o
n (
) {
r
e
t
u
r
n {
r
e
s
t
r
i
c
t
: '
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
: '
<
a h
r
e
f
=
"
" c
l
a
s
s
=
"
c
-
b
u
t
t
o
n
" n
g
-
t
r
a
n
s
c
l
u
d
e
>
' +
'
<
i c
l
a
s
s
=
"
i
c
o
n
-
o
k
-
s
i
g
n
"
>
<
/
i
>
' +
'
<
/
a
>
'
,
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 15
Slide 15 text
DIRECTIVES: DEFINITIONS
restrict: usage, Attribute/Element/etc.
replace: replaces declarative node
transclude: Inject existing DOM (text) inside
template: Markup, either or ext .html file
link: Events, custom manipulation
Slide 16
Slide 16 text
SERVICES
Singleton functions, more 'static'
Slide 17
Slide 17 text
SERVICES: STATIC USE CASE
m
y
A
p
p
.
s
e
r
v
i
c
e
(
'
M
a
t
h
'
, f
u
n
c
t
i
o
n (
) {
t
h
i
s
.
m
u
l
t
i
p
l
y = f
u
n
c
t
i
o
n (
x
, y
) {
r
e
t
u
r
n x * y
;
}
;
}
)
;
Slide 18
Slide 18 text
FACTORY
Model abstractions, application toolkits
Slide 19
Slide 19 text
FACTORY: MODEL ABSTRACTION
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
;
}
]
)
;
Slide 20
Slide 20 text
FACTORY: DRY USAGE (EVERYWHERE!)
/
/ d
e
p
e
n
d
e
n
c
y i
n
j
e
c
t
m
y
A
p
p
.
c
o
n
t
r
o
l
l
e
r
(
'
M
a
i
n
C
t
r
l
'
, f
u
n
c
t
i
o
n (
$
s
c
o
p
e
, 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
; /
/ o
b
j
}
)
;
}
]
)
;
Slide 21
Slide 21 text
FILTERS
Managing your data
Single filtering (non-loop)
Repeat filtering (loop)
Multiple ways to create
Slide 22
Slide 22 text
FILTERS: MANAGING YOUR DATA
m
y
A
p
p
.
f
i
l
t
e
r
(
'
r
e
v
e
r
s
e
'
, f
u
n
c
t
i
o
n (
) {
r
e
t
u
r
n f
u
n
c
t
i
o
n (
i
n
p
u
t
) {
v
a
r o
u
t = '
'
;
f
o
r (
v
a
r i = 0
; i < i
n
p
u
t
.
l
e
n
g
t
h
; i
+
+
) {
o
u
t = i
n
p
u
t
.
c
h
a
r
A
t
(
i
) + o
u
t
;
}
r
e
t
u
r
n o
u
t
;
}
}
)
;
Slide 23
Slide 23 text
FILTERS: $SCOPE AS USUAL
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
) {
$
s
c
o
p
e
.
g
r
e
e
t
i
n
g = '
T
o
d
d M
o
t
t
o
'
;
}
]
)
;
Slide 24
Slide 24 text
FILTERS: DECLARE (SINGLE, NO LOOP)
<
d
i
v n
g
-
a
p
p
=
"
m
y
A
p
p
"
>
<
d
i
v n
g
-
c
o
n
t
r
o
l
l
e
r
=
"
M
a
i
n
C
t
r
l
"
>
<
p
>
N
o f
i
l
t
e
r
: {
{ g
r
e
e
t
i
n
g }
}
<
/
p
>
<
p
>
R
e
v
e
r
s
e
: {
{ g
r
e
e
t
i
n
g | r
e
v
e
r
s
e }
}
<
/
p
>
<
/
d
i
v
>
<
/
d
i
v
>
Slide 25
Slide 25 text
FILTERS: DECLARE (REPEAT, LOOP)
<
d
i
v n
g
-
a
p
p
=
"
m
y
A
p
p
"
>
<
u
l n
g
-
c
o
n
t
r
o
l
l
e
r
=
"
M
a
i
n
C
t
r
l
"
>
<
l
i n
g
-
r
e
p
e
a
t
=
"
g
r
e
e
t i
n g
r
e
e
t
i
n
g
s
"
>
{
{ g
r
e
e
t | r
e
v
e
r
s
e }
}
<
/
l
i
>
<
/
u
l
>
<
/
d
i
v
>
Slide 26
Slide 26 text
CREATING YOUR FIRST APP
Design: JSON design for best response
Distribute: Integrate data w/Factory + Controllers
Declare: Push to the $scope
Slide 27
Slide 27 text
APP: DESIGN
Design w/static data then replicate with backend
endpoints
/
/ i
d
e
a
l j
s
o
n r
e
s
p
o
n
s
e f
r
o
m $
h
t
t
p
.
g
e
t
(
)
[
{
"
f
r
o
m
"
: "
S
t
e
v
e J
o
b
s
"
,
"
s
u
b
j
e
c
t
"
: "
I t
h
i
n
k I
'
m h
o
l
d
i
n
g m
y p
h
o
n
e w
r
o
n
g :
/
"
,
"
s
e
n
t
"
: "
2
0
1
3
-
1
0
-
0
1
T
0
8
:
0
5
:
5
9
Z
"
}
,
{
"
f
r
o
m
"
: "
E
l
l
i
e G
o
u
l
d
i
n
g
"
,
"
s
u
b
j
e
c
t
"
: "
I
'
v
e g
o
t S
t
a
r
r
y E
y
e
s
, l
u
l
z
"
,
"
s
e
n
t
"
: "
2
0
1
3
-
0
9
-
2
1
T
1
9
:
4
5
:
0
0
Z
"
}
,
{
"
f
r
o
m
"
: "
M
i
c
h
a
e
l S
t
i
p
e
"
,
"
s
u
b
j
e
c
t
"
: "
E
v
e
r
y
b
o
d
y h
u
r
t
s
, s
o
m
e
t
i
m
e
s
.
"
,
"
s
e
n
t
"
: "
2
0
1
3
-
0
9
-
1
2
T
1
1
:
3
8
:
3
0
Z
"
}
,
{
"
f
r
o
m
"
: "
J
e
r
e
m
y C
l
a
r
k
s
o
n
"
,
"
s
u
b
j
e
c
t
"
: "
T
h
i
n
k I
'
v
e f
o
u
n
d t
h
e b
e
s
t c
a
r
.
.
. I
n t
h
e w
o
r
l
d
"
,
"
s
e
n
t
"
: "
2
0
1
3
-
0
9
-
0
3
T
1
3
:
1
5
:
1
1
Z
"
Slide 28
Slide 28 text
APP: DISTRIBUTE (FACTORY CREATION)
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
E
m
a
i
l
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
E
m
a
i
l
C
h
a
n
g
e
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
(
'
/
e
m
a
i
l
U
p
d
a
t
e
s
'
)
.
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
;
}
]
)
;
Slide 29
Slide 29 text
APP: DISTRIBUTE (CONTROLLER INJECTION)
m
y
A
p
p
.
c
o
n
t
r
o
l
l
e
r
(
'
E
m
a
i
l
C
t
r
l
'
, f
u
n
c
t
i
o
n (
$
s
c
o
p
e
, J
S
O
N
F
a
c
t
o
r
y
) {
$
s
c
o
p
e
.
e
m
a
i
l
s = {
}
; /
/ n
a
m
e
s
p
a
c
e f
o
r d
o
m c
l
a
r
i
t
y
J
S
O
N
F
a
c
t
o
r
y
.
g
e
t
E
m
a
i
l
s
(
f
u
n
c
t
i
o
n (
d
a
t
a
) {
$
s
c
o
p
e
.
e
m
a
i
l
s
.
m
e
s
s
a
g
e
s = d
a
t
a
; /
/ r
i
d
e o
f
f n
/
s
}
)
;
}
]
)
;
Slide 30
Slide 30 text
APP: DECLARE
<
d
i
v n
g
-
a
p
p
=
"
m
y
A
p
p
"
>
<
u
l n
g
-
c
o
n
t
r
o
l
l
e
r
=
"
M
a
i
n
C
t
r
l
"
>
<
l
i n
g
-
r
e
p
e
a
t
=
"
m
e
s
s
a
g
e i
n e
m
a
i
l
s
.
m
e
s
s
a
g
e
"
>
F
r
o
m
: {
{ m
e
s
s
a
g
e
.
f
r
o
m }
}
S
u
b
j
e
c
t
: {
{ m
e
s
s
a
g
e
.
s
u
b
j
e
c
t }
}
{
{ m
e
s
s
a
g
e
.
s
e
n
t | d
a
t
e
:
'
M
M
M d
, y h
:
m
m
:
s
s a
' }
}
<
/
l
i
>
<
/
u
l
>
<
/
d
i
v
>
Slide 31
Slide 31 text
CORE FUNCTIONS
ng-* attrs (internal directives)
Slide 32
Slide 32 text
CORE: NG-CLICK
Scoped inline functions with access to elems, index, more
<
a n
g
-
c
l
i
c
k
=
"
d
e
l
e
t
e
E
m
a
i
l
(
$
i
n
d
e
x
)
"
>
D
e
l
e
t
e e
m
a
i
l
<
/
a
>
Slide 33
Slide 33 text
CORE: NG-MODEL
Instantly reflected in the View + Model
<
i
n
p
u
t n
g
-
m
o
d
e
l
=
"
s
e
a
r
c
h
T
e
x
t
"
>
Slide 34
Slide 34 text
CORE: NG-VIEW
Injecting dynamic views
<
d
i
v n
g
-
v
i
e
w
>
<
/
d
i
v
>
Slide 35
Slide 35 text
CORE: NG-SUBMIT
Ajax form handling
<
f
o
r
m n
g
-
s
u
b
m
i
t
=
"
d
o
A
w
e
s
o
m
e
A
j
a
x
(
)
;
"
>
<
/
f
o
r
m
>
Slide 36
Slide 36 text
CORE: NG-DISABLED
Form elements validation
<
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
=
"
!
c
o
n
d
i
t
i
o
n
"
>
<
/
b
u
t
t
o
n
>
Slide 37
Slide 37 text
CORE: NG-SHOW
Also an ng-hide, both used depending on conditional state
<
a h
r
e
f
=
"
" n
g
-
c
l
i
c
k
=
"
t
o
g
g
l
e = !
t
o
g
g
l
e
"
>
T
o
g
g
l
e n
a
v
<
/
a
>
<
u
l n
g
-
s
h
o
w
=
"
t
o
g
g
l
e
"
>
<
l
i
>
L
i
n
k 1
<
/
l
i
>
<
l
i
>
L
i
n
k 2
<
/
l
i
>
<
l
i
>
L
i
n
k 3
<
/
l
i
>
<
/
u
l
>
Slide 38
Slide 38 text
EXPRESSIONS
Inline JavaScript expression operators
Slide 39
Slide 39 text
EXPRESSIONS: 'LENGTH' COMPARISONS, 'AND', 'OR'
<
h
3
>
{
{ e
m
a
i
l
s
.
m
e
s
s
a
g
e
s &
& '
E
m
a
i
l
s
' |
| '
N
o e
m
a
i
l
s
' }
}
<
p n
g
-
s
h
o
w
=
"
e
m
a
i
l
s
.
m
e
s
s
a
g
e
s
.
l
e
n
g
t
h > 0
"
>
{
{ e
m
a
i
l
s
.
m
e
s
s
a
g
e
s
.
l
e
n
g
t
h }
}
<
/
p
>
<
/
h
3
>
<
u
l
>
<
l
i n
g
-
r
e
p
e
a
t
=
"
m
e
s
s
a
g
e i
n e
m
a
i
l
s
.
m
e
s
s
a
g
e
s
"
>
<
/
l
i
>
<
/
u
l
>
Slide 40
Slide 40 text
ROUTING
Dynamic views, used with ng-view
Slide 41
Slide 41 text
ROUTING: DYNAMIC VIEW CONFIG
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
(
'
/
'
, {
t
e
m
p
l
a
t
e
U
r
l
: '
v
i
e
w
s
/
m
a
i
n
.
h
t
m
l
'
}
)
.
w
h
e
n
(
'
/
c
a
r
t
/
i
t
e
m
:
i
d
'
, {
t
e
m
p
l
a
t
e
U
r
l
: '
v
i
e
w
s
/
c
a
r
t
-
i
t
e
m
.
h
t
m
l
'
}
)
.
o
t
h
e
r
w
i
s
e
(
{
r
e
d
i
r
e
c
t
T
o
: '
/
'
}
)
;
}
]
)
;
Slide 42
Slide 42 text
SERVER-SIDE RENDER DATA
Hooking data sent down on page load into Angular
Slide 43
Slide 43 text
SERVER-SIDE: INSTANT JSON
Perf benefits, no $http onload
<
!
-
- i
n
s
i
d
e i
n
d
e
x
.
h
t
m
l (
b
o
t
t
o
m o
f p
a
g
e o
f
c
) -
-
>
<
s
c
r
i
p
t
>
<
/
s
c
r
i
p
t
>
w
i
n
d
o
w
.
g
l
o
b
a
l
D
a
t
a = {
}
;
g
l
o
b
a
l
D
a
t
a
.
e
m
a
i
l
s = <
j
a
v
a
T
a
g
H
e
r
e
T
o
G
e
n
e
r
a
t
e
M
e
s
s
a
g
e
s
>
;
Slide 44
Slide 44 text
SERVER-SIDE: ANGULAR REFERENCE
m
y
A
p
p
.
c
o
n
t
r
o
l
l
e
r
(
'
E
m
a
i
l
s
C
t
r
l
'
, f
u
n
c
t
i
o
n (
$
s
c
o
p
e
) {
$
s
c
o
p
e
.
e
m
a
i
l
s = {
}
;
$
s
c
o
p
e
.
e
m
a
i
l
s
.
m
e
s
s
a
g
e
s = g
l
o
b
a
l
D
a
t
a
.
e
m
a
i
l
s
;
}
]
)
;
Slide 45
Slide 45 text
DEPENDENCY INJECTION
Tell the app what APIs you want, Angular only grabs
things it needs
Minification
Slide 46
Slide 46 text
DI: BEFORE MINIFICATION
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
'
, '
D
e
p
e
n
d
e
n
c
y
'
, '
S
e
r
v
i
c
e
'
, '
F
a
c
t
o
r
y
'
, /
/ a
r
r
a
y
f
u
n
c
t
i
o
n (
$
s
c
o
p
e
, D
e
p
e
n
d
e
n
c
y
, S
e
r
v
i
c
e
, F
a
c
t
o
r
y
) {
/
/ c
o
d
e
}
]
)
;
Slide 47
Slide 47 text
DI: AFTER MINIFICATION
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
'
, '
D
e
p
e
n
d
e
n
c
y
'
, '
S
e
r
v
i
c
e
'
, '
F
a
c
t
o
r
y
'
, /
/ k
e
e
p
s r
e
f
e
r
e
n
c
e
f
u
n
c
t
i
o
n (
a
, b
, c
, d
) {
/
/ a = $
s
c
o
p
e
/
/ b = D
e
p
e
n
d
e
n
c
y
/
/ c = S
e
r
v
i
c
e
/
/ d = F
a
c
t
o
r
y
}
]
)
;
Slide 48
Slide 48 text
THINKING ANGULAR (NG-THINKING)
Scopes and data, not DOM, no add/remove/toggle
classes, ever. Angular does this all for you based on data
Let the data do the work, keep code as minimal as
possible
Abstract, abstract, abstract. Keep abstracting into
different files for better management and copying
individual files into new projects, premade working code