►
From YouTube: PnP WebCast - Building multi-view Angular 1.x client-side web parts with SharePoint Framework
Description
In this PnP Webcast, we concentrated on covering the considerations around multi-view web parts, where the presentation layer is changed based on the status of the web part. Typically single-page application solutions are implemented in away that they store the view status within the URL. Since client-side web parts are however hosted in SharePoint pages, this is not possible and you'll need to use alternative approaches for maintaining the UI state in your customizations. Considerations are being also demonstrated with a client-side web part built with Angular 1.x.
Additional details from http://dev.office.com/blogs
A
Welcome
everybody:
this
is
sharepoint
patterns
and
practices.
Webcast
and
this
time
we're
going
to
talk
about.
How
can
you
build
a
multi-view
angular
one
point:
X
client-side
web
parts
with
SharePoint
framework
and
this
the
topic
actually
touches
regardless
are
using
angular
or
react
or
ember
or
whatever.
So
there's
a
kind
of
a
classic
challenge
on.
How
do
you
do
the
multi-view
transitions
and
how
do
you
track
the
u.s.
A
state
within
your
web
part,
and
we
wanted
to
kind
of
have
a
quick
talk
about
that
one
and
use
the
angular
one
point
X
as
a
simple
case.
How
to
make
this
happen,
there
will
be
samples
for
the
other
libraries
and
frameworks
in
our
key
top
as
well,
but
let's
use
the
angular
one
point
X
as
an
example
for
this
webcast.
My
name
is
Ruben
I'm,
a
senior
program
manager
in
SharePoint
engineering
and
with
me
today
from
a
SharePoint
BMP,
core
team
is
waldeck
so
Wallach
will
you
do
the
interest
yeah.
B
A
Indeed,
your
title
seems
to
be
changing
on
every
single
presentation,
but
let's
get
actually
on
going
on
the
on
the
presentation.
So
just
quickly
recap:
SharePoint
patterns
and
practices
is
owned
by
the
shipment
engineering
and
but
we
work
together
with
community
people
like
waldeck
who's,
part
of
the
core
team
or
the
community
who
I
want
to
contribute
their
knowledge
and
their
learnings
for
the
other,
for
the
others
to
benefit
the
BMP.
A
The
shipment
PMP
provides
code,
samples,
guidance
document,
ations
community
calls
and
the
themes
are
around
SharePoint
framework
shipment,
adding
model
which
is
the
introduction
technologies,
and
then
others
will
touch
much
of
graph
office,
365,
APs
and
so
on.
Aka
ms
sharepoint
PMP
one
location
to
find
all
of
the
different
links
related
on
sharepoint
pnp.
That
page
will
be
reformatted
so,
depending
on
when
you're
watching
the
video,
you
might
see
the
old
version
or
the
new
version
of
the
page.
But
anyway,
let's
actually
get
concentrate
on
today's
topic.
A
So
it's
really
a
run
to
you
I
estate
handling.
So
how
do
we
handle
the
state
within
the
client-side
web
parts?
And
welding
is
going
to
do
the
demo
with
angular
1
point
X
sample,
which
is
available
for
you
to
download
and
play
around
with
as
well.
But
technically.
What
we're
talking
is
that,
typically,
when
you're,
when
you're
implementing
a
classic-
let's
say
a
single
page
application
using
angular
or
react,
you
can
use
the
URL
the
track,
your
state.
A
So
if
you're
using
actual
react
routes
or
or
the
corresponding
technologists
in
angular,
you
would
actually
use
the
URL
to
actually
state
or
keep
the
state
of
your
presentation.
But
since
in
the
SharePoint
framework
or
the
client-side
web
parts
are
being
rendered
by
SharePoint.
You
do
not
have
a
control
on
the
URL,
and
that
means
that
we
need
to
come
up
with
a
a
alternative
solution
for
this
classic
challenge
and
kind
of
a
touch
that
one
already.
Obviously
the
technical
solution
for
this
one
depends
on
the
library
and
the
java
screen
work.
A
What
you're,
using
together
with
your
client-side
web
part,
and
we
and
we
will
use
an
angular
1
context
in
this
example.
But
obviously
react
has
its
own
way
of
doing
the
US
state
handling
as
well,
and
there
will
be
a
sample
and
run
that
one
in
a
key
top
or
it
probably
is
already
there
available
when
you're
watching
the
video.
So
anything
you
want
actually
on
the
challenge:
description,
public,
yeah,.
B
Sure
so
the
interesting
part
is
that
when
you
build
a
spa,
you
own
the
whole
page
as
a
def
right.
So
developing
the
spa
you
own
the
whole
page
and
your
application
is
the
only
thing
that
lives
at
this
URL,
so
you
can
track
actually
get
the
state
of
your
ad,
like
which
view
you
are
looking
at
using
the
hash
in
URL.
B
Now,
when
you
build
a
web
part,
you
have
to
take
into
account
that
the
web
part
is
edit
on
a
patient,
not
by
you,
but
by
a
user,
and
they
can
add
one
web
part
of
the
page.
They
can
add
two,
they
can
add
three
or
more,
and
the
thing
is
that
you
don't
know
when
you
build
a
web
part,
you
don't
know
what
else
is
on
the
page
and
if
you
were
to
use
the
URL
to
track
the
state
of
your
web
part,
you
could
actually
collide
with
other
elements
on
the
same
page.
B
A
That's
not
an
option
into
implementation,
so
we
kind
of
use
a
classic
pole
scenario
as
our
example
today
within
the
demo
which
valdakk
is
going
to
do,
and
this
is
available
in
a
ketone
blog
mention
and
it
kind
of
have
to
a
well.
It
has
three
different
stage
or
status
statuses
when
it's
for
sending
its
UI.
The
number
once
that
is,
is
the
one
where
it's
not
yet
configured.
So
the
information
is
not
there
and
were
you
and
we're
showing
that
classic
placeholder
component
on
the
on
the
page?
Is
it
placeholder
component
come
on
polish.
A
So
I'm
always
always
forgetting
that
the
right
terminology
on
that
one,
so
the
placeholder
a
placeholder
on
the
when
it's
not
yet
configured
and
then
the
second
stage
is
that
when
it
has
been
configured,
you
actually
filled
up
the
options.
It's
going
to
show
you
all
the
end-user
individual
options
which
are
available
for
answer
and
then
obviously,
if
the
person
has
already
answered
the
pole,
it
will
absolutely
show
that
and
the
results
related
on
the
poll
survey.
The
sample
itself
right
now
isn't
really
remaining
that
all
or
saving
this.
A
This
answers
or
the
case
and
that
this
particular
user
has
already
replied
on
this
poll,
because
we
wanted
to
really
concentrate
on
this
UI
transition
and
show
that
within
the
sample,
without
again
additional
complexity.
But
let's
actually
talk
about
the
sample.
Let's
see
it
in
practice,
because
I
think
that
always
helps
on
understanding.
What
are
we
actually
talking
about?
A
B
All
right
so
in
this
sample,
you
would
like
to
show
you
how
you
can
build
a
multi-view
webparts
with
angular
in
the
way
that
they
won't
collide
with
other
order
elements
on
a
page.
So
here,
let
me
add
the
web
part
that
was
built
which
shows
Paul
and
then,
when
you
first
edit
to
the
page,
you
could
imagine
that
there
are
some
things
that
you
have
to
set
first
right.
So
the
webpart
checks
that
and
says
that
you
have
to
set
some
things
up.
B
So
for
the
poll
title
on
for
the
poll
that
we
have,
let's
enter
a
favorite
framework
for
a
optional
description.
Let's
add
what
is
your
favorite
framework
framework
and
then,
as
the
name
of
the
list,
we
will
pick
the
framework
poll,
which
is
the
list
that
we
already
have
so
now
we
apply
it
and
now
we
can
see
another
state,
which
is
the
first
state
that
everybody
from
now
on
we'll
see
when
they
come
to
this
page,
which
is
the
pole
right.
B
So
these
are
the
answers
that
we
have
available
in
the
list
and
basically
the
only
thing
that
you
can
do
now
is
fold.
So
here
how
about
we
pick
of
emer
of
our
choice,
which
in
this
case
is
I
angular
we
vote,
and
when
we
do,
we
actually
move
over
to
another
state.
So
now
we
showed
the
results.
The
key
element
here
is
that
if
you
will
watch
the
recording
back
and
you
will
be
able
to
stop
and
pause,
you
will
see
that
the
whole
time
the
URL
of
this
page
didn't
change.
B
So
we
didn't
affect
the
URL.
We
change
states
from
config
state
to
Paul
state
to
result
state,
but
we
didn't
change
the
url.
So
if
we
had
multiple
elements,
web
parts,
even
multiple
poles
on
the
same
page,
one
poll
wouldn't
affect
another,
so
they
would
work
on
their
own
and
changing
the
state
in
one
wouldn't
change
the
state
in
any
other
elements
on
a
page.
B
So
how
this
is
done
in
angular
go
to
our
code
and
the
key
element
to
that
is
that
in
angular
you
have
the
earth
a
router,
but
the
router
works
basically
based
on
a
URL.
So
do
every
route
in
your
app
you,
you
can
assign
aside
a
path
and
based
on
that
path
and
get
our
moves
between
views.
Now
here
we
use
another
approach,
which
is
called
UI
router,
which
is
based
on
state.
So
here,
instead
of
routes
we
have
States
and
every
state
is
similar
to
around.
It
has
a
name:
it
has
a
template.
B
It
has
parameters,
controllers
controller
as
a
state
could
also
be
assigned
to
a
URL,
but
that's
exactly
the
one
thing
that
we
don't
want
to
do,
because
we
don't
know
what
we'll
end
up
on
on
this
page
and
with
that,
we
don't
want
to
have
the
risk
that
changing
the
URL
might
affect
the
state
of
some
other
element
on
the
page.
So
with
that,
we
just
use
names
which
is
which
are
here.
So
here
are
the
states
that
we
have
on
fig
all
vote,
poke
results
and
actually
for
the
Paul.
B
B
B
Basically
when
we
first
add
the
the
web
part
of
the
page,
we
check
if
we
have
the
name
of
the
list
polis
and
if
we
don't,
we
change
the
state
to
come
shake
state
and
if
we
do
have
the
list
name,
then
we
move
to
our
poll
vote
where
the
poll
dot
is
the
parent
state.
So
with
that,
we
apply
BIM.
Basically
everything.
That's
in
a
poll
plus
everything,
that's
in
a
vote,
so
our
app.
B
A
A
You
would
then
aunt
that
logic
of
seeing
has
that
particular
person
already
replied
or
answered
on
this
poll,
and
if
the
person
has
already
answered,
we
would
actually
show
the
results
and
that
way,
you're
able
to
adapt
this
to
be
more
production
ready,
but
we
don't
actually
by
intention.
We
don't
want
to
do
that,
because
we
want
to
keep
it
as
simple
as
possible.
So
we
don't
add
any
of
the
days.
You
know
logic
here.
Yes,.
B
A
B
So
here,
if
you
go
to
our
vote
here,
we
show
the
form.
So
here
we
have
all
the
choices
right
and
here
we
have
the
button
to
vote
that
has
assigned
and
an
action
of
vote
right
and
in
this
action.
If
we
go
to
our
controller
here
we
have
our
vote,
which
is
here
so
then
we
submit
a
new
vote
and
then
once
this
is
done,
then
we
switch
to
results.
Yeah.
A
A
Good
good
I
think
that
covers
quite
nicely
our
scenario
and
the
scenario
where:
how
do
we?
How
do
we
track
the
state
of
the
UI
for
individual
individual
clients,
our
report
instances
without
colliding
any
with
anything
else
on
the
page
and
anything
one
ad
on
top
of
of
the
demo
or
what
we
discussed
a
wall
becca.
B
Absolutely
so,
I
would
encourage
everyone
to
check
out
the
sample
arm
on
the
arm
on
your
own,
because
whenever
you
will
try
to
build
a
web
part
that
has
more
than
one
view
in
angular
or
another
framework,
you
will
have
to
deal
with
it
as
well.
So
sample
is
a
great
way
to
show
you
one
approach
that
you
can
use
typically
come
in
angular
and
we
will
have
another
samples
as
well.
B
A
Absolutely
and
the
easiest
way
by
the
way
and
just
to
repeat
on
kind
of
a
clarifying
that
as
well
easiest
way
to
reach
algis
is
also
using
github
issue
lists
where
the
samples
are
located
so
feel
free
to
open
up
an
issue
and
we'll
follow
up
on
the
on
the
question
or
use
the
tech
community
to
share
one
developer
section
and
we'll
follow
up
on
on
your
question.
But
thanks
for
watching
and
we'll
come
up
with
a
new
web
cast
sooner
or
later,
bye.