This document provides an overview of AngularJS, a client-side framework that brings structure and organization to JavaScript code. It discusses how AngularJS uses MVVM (Model-View-ViewModel) to separate code into logical components. Key features that AngularJS provides like dependency injection, data binding, form validation and services are highlighted.

1. AngularJS
SUPER
AWESOME
client
side
framework

2. Where
is
the
structure?
• Client
side
code
is
o@en
a
haphazard
mess
of
raw
Javascript,
JQuery,
and
HTML
that
is
thrown
together
to
work,
but
is
o@en
not
organized
to
be
reused
in
the
future
or
readable
by
other
programmers.
• Javascript
does
not
include
your
convenLonal
classes,
but
it
does
have
objects.
• Everything
in
Javascript
is
an
object!!
(almost)

3. MVVM,
MVC,
MVP,
MV*,
MV
WHATEVER
• The
above
names
are
all
different
methods
of
code
separaLon
in
different
web
frameworks.
• Don’t
get
stuck
on
trying
to
remember
“Oh
this
one
is
MVVM,
this
one
is
MVC,
this
one
is
actually
MV&^$$!”
• They
are
all
fundamentally
the
same
thing.
Ways
to
separate
out
logical
processing,
data
processing,
and
user
interface
code.

4. Get
that
Client
Side
Under
Control!
• AngularJS
is
an
MVVM
(Model-­‐View-­‐
ViewModel)
framework
for
client
side
code.
• It
is
extremely
awesome!
• Your
client
side
code
will
never
look
like
a
bowl
of
random
funcLons
with
random
funcLons
and
variable
conflicts
sprinkled
on
top
again!

5. The
Coolest
Tools
it
Provides
• Dependency
InjecLon
• Two-­‐Way
data
binding
(three-­‐way
data
binding
with
certain
libraries)
• Form
validaLon
• Handlers
for
tasks
such
as
HTTP
requests
• Single
Page
ApplicaLon
Architecture
(SPA)
• Shared
services
• “Promises”:
great
for
handling
asynchronous
returns.
• Not
dependent
on
server
technology.
Can
totally
be
run
locally
if
needed.