GIVE YOUR WEBSITE SUPERPOWERS
WITH ANGULARJS!
By ( )
Chris Schmitz @ccschmitz
Slide 2
Slide 2 text
WHAT IT IS, YO
A structural framework for dynamic web apps.
"What HTML would have been had it been designed for web applications."
Slide 3
Slide 3 text
WHAT'S WRONG WITH HTML?
It's great, but it was built for static documents, not applications.
What do I have to do to trick the browser into
doing what I want?
Slide 4
Slide 4 text
HOW DOES ANGULAR FIX HTML?
Angular extends HTML and teaches the browser new syntax
through directives.
Slide 5
Slide 5 text
TEMPLATES, COMPILERS AND VIEWS
Template: Anything with additional AngularJS markup
Compiler: Parses templates and instantiates directives and
expressions
View: The loaded, transformed and rendered DOM
Slide 6
Slide 6 text
DEMO APP
<
d
i
v n
g
-
a
p
p n
g
-
i
n
i
t
=
"
q
u
a
n
t
i
t
y
=
1
0
;
c
o
s
t
=
1
0
0
;
"
>
<
l
a
b
e
l f
o
r
=
"
q
u
a
n
t
i
t
y
"
>
Q
u
a
n
t
i
t
y
<
/
l
a
b
e
l
>
<
i
n
p
u
t t
y
p
e
=
"
n
u
m
b
e
r
" n
g
-
m
o
d
e
l
=
"
q
u
a
n
t
i
t
y
" r
e
q
u
i
r
e
d
>
<
l
a
b
e
l f
o
r
=
"
q
u
a
n
t
i
t
y
"
>
C
o
s
t
<
/
l
a
b
e
l
>
<
i
n
p
u
t t
y
p
e
=
"
n
u
m
b
e
r
" n
g
-
m
o
d
e
l
=
"
c
o
s
t
" r
e
q
u
i
r
e
d
>
<
p
>
T
o
t
a
l
: {
{ q
u
a
n
t
i
t
y * c
o
s
t | c
u
r
r
e
n
c
y }
}
<
/
p
>
<
/
d
i
v
>
<
s
c
r
i
p
t s
r
c
=
"
h
t
t
p
:
/
/
c
o
d
e
.
a
n
g
u
l
a
r
j
s
.
o
r
g
/
1
.
2
.
9
/
a
n
g
u
l
a
r
.
m
i
n
.
j
s
"
>
<
/
s
c
r
i
p
t
>
Slide 7
Slide 7 text
DEMO APP
Quantity: 10
Cost: 100
Total: $1,000.00
Slide 8
Slide 8 text
CONTROLLERS
Expose variables and functionality to expressions and directives.
Slide 9
Slide 9 text
DEMO APP (WITH CONTROLLERS!)
View the source, Luke →
Slide 10
Slide 10 text
SERVICES
View independent logic that can be reused throughout the app.
Slide 11
Slide 11 text
DEMO APP (WITH SERVICES!)
May the source be with you →
Slide 12
Slide 12 text
OTHER RESOURCES
: Great, short Angular screencasts
: In-depth articles on core Angular
concepts
: Official documentation (awesome!)
: That's where I learn everything!
egghead.io
ng-newsletter.com
angularjs.org
Zach Gohr
Slide 13
Slide 13 text
THE END
BY ( )
CHRIS SCHMITZ @CCSCHMITZ
Come to and join !
Startup Weekend Green Bay Digital Fertilizer