►
Description
In this PnP Web Cast we concentrated on covering how to use Angular in your SharePoint Framework client side web part. We go throught the steps on adding Angular on the SP Fx web part project and build a simple task tracking solution. Actual tasks are not saved to SharePoint on this sample, since we wanted to concentrate on showing the Angular integration part, without additional complexity. We also cover how to use ngOfficeUIFabric to help on making your Angular based client side web part UI consistent with SharePoint. ngOfficeUIFabric is community driven initiative to have Angular 1.x directives for Office UI Fabric components.
Notice. When this webcast was released SharePoint Framework was in Developer Preview, which means that the client web parts should not yet use in production at SharePoint Online.
Presentation covers following topics:
- Steps to include Angular to your solution
- Steps to get started on the Angular development with SP Fx
Web cast demo shows following details:
- Walk-through of the sample todo web part
- Steps on creating your SP Fx project for the Angular implementation
- Adding Angular and ngOfficeUIFabric dependencies
- Creating controller and data service for your Angular app
- Using correct Office UI Fabric version in your app
- How to change your property pane to be reactive or non-reactive
- Broadcasting property pane updates from SP Fx to Angular app
Web cast presenters: Waldek Mastykarz, Vesa Juvonen
Presentation used in this web cast is available from http://docs.com/OfficeDevPnP.
Source code for used client side web part will be shared during upcoming days at http://github.com/sharePoint.
- SharePoint Framework tutorials for Developer Preview - https://github.com/SharePoint/sp-dev-docs/wiki
- Open and Connected Framework - The SharePoint Framework - YouTube - https://www.youtube.com/watch?v=T_bGyqKwT4g
- PnP Webcast - Building simple SharePoint Framework Client Web Part - http://dev.office.com/blogs/building-simple-sharepoint-framework-client-web-part
- PnP Webcast - Integrating Angular v1.x to SharePoint Framework client side web part - http://dev.office.com/blogs/integrating-angular-to-sharepoint-framework-client-side-web-part
- PnP Webcast - Getting started with web stack in SharePoint Development - http://dev.office.com/blogs/getting-started-with-web-stack-in-sharepoint-development
- PnP Webcast - Getting started with SharePoint Framework - http://dev.office.com/blogs/getting-started-with-sharepoint-framework
- PnP Webcast - Preparing for SharePoint Framework - What should I learn? - http://dev.office.com/blogs/preparing-for-sharepoint-framework-what-should-i-learn
- PnP Webcast - Converting existing JavaScript apps to SharePoint Framework - https://channel9.msdn.com/blogs/OfficeDevPnP/PnP-Web-Cast-Converting-existing-JS-apps-to-SharePoint-Framework
Thanks for your interest on the PnP initiative.
If you have any feedback or comments related on this web cast, please use the Office 365 network (SharePoint developer group) to provider your input. Thx for your interest advance.
A
Welcome
everybody:
this
is
the
SharePoint
patterns
and
practices
webcast,
also
known
as
the
office
365
developer
pregnant
webcast.
Today
we're
going
to
talk
about
how
you
can
build
angular,
SharePoint
framework
web
pots,
so
we've
kind
of
talked
about
how
you
can
integrate
angular
the
client-side
web
parts
of
SharePoint
framework
and
how
you
start
developing
them
using
the
typescript
and
the
typical
way
of
doing
development.
A
A
Indeed,
so
we're
gonna
do
the
same
stuff
as
we've
done
in
some
of
this
webcasts
before
and
go
and
check
them
out
from
our
YouTube
channel.
If
you
haven't
actually
watch
them
and
watch
those
webcast
before
as
well,
but
we're
going
to
do
some
slides,
we're
gonna
do
a
long
demo.
Well,
not
a
super
long
demo,
but
a
demo
around.
How
do
we
start
truly
using
the
angular
within
a
sharepoint
framework
webparts
before
we
go
there?
A
Let's
do
a
quick
intro
on
the
sharepoint
patterns
and
practices,
also
known
as
the
office
dev
patterns
and
practices,
so
the
shape
on
patterson
practices
is
something
what
the
shipment
engineering
owns,
and
what
we
want
to
do
is
that
we
want
to
provide
people
easy
to
use
code
samples,
guidance
documentation.
We
also
have
a
monthly
community
call
where
we
always
call
true
what
has
happened
within
the
previous
month,
including
a
lot
of
demos.
A
We
also
have
few
case
studies
around
the
PNP
usage
from
a
loop
blue
meteor,
who
is
an
ISV
who
transformed
to
use
the
cloud
compliant
way
of
doing
implementations,
while
back
and
of
all
of
our
cars
who's.
A
good
example
of
a
customer
who's
using
the
PNP
guidance.
The
themes
are
in
a
chevron
framework
shipment.
That
ins
will
so
that's
Microsoft,
Office,
365,
api's
and
so
on
so
and
over
us
a
remote
provisioning
and
clients
our
development.
It's
really
the
key
part
of
the
of
the
SharePoint
PNP
initiative.
A
Today
we
wanted
to
talk
about
angular
in
SharePoint
effects
or
framework
with
pods
and
really,
how
do
we
actually
get
started
on
doing
that?
Is
we
install
the
angular
by
using
the
NPM
directly
to
their
web
park
project?
So,
within
your
comment
line
you
you
run
that
install
command,
as
that
angular
will
be
added
to
your
to
your
project
files.
After
that
we
install
the
Taipings,
so
we
will
have
an
intelligence
within
a
type
script
when
you
start
writing
those
client-side
web
parts,
some
of
you
might
be
super
familiar
with
typescript.
A
Some
of
you
might
be
wondering
why
would
I
use
typescript
in
first
place,
but
that
really
comes
down
on
the
intellisense.
When
you
do
development
only
in
JavaScript
the
Taipings
order,
the
intelligence
and
the
development
time
checking
isn't
actually
there
and
that's
where
the
typescript
actually
shines.
A
Whenever
we
then
compile
the
typescript
in
quotes,
it
comes
to
be
a
native
JavaScript,
so
the
impact
of
using
typescript
is
only
in
the
development
time
in
the
in
the
actual
production
time
or
when
we
are
executing
that
in
the
in
the
you
is
it's
still
native
javascript,
and
then
we
import
the
angular
to
be
used
within
the
client-side
web
part.
So
we
essentially
in
the
client-side
web
part
file.
We
go
and
say
hey
within
this
file
and
TS
file,
we
start
using
the
angular,
and
then
you
get
the
intelligence
to
be
available.
A
Today
we
can
also
Kannamma
in
the
demo.
We
can
use
the
angular
office
UI
fabric,
and
this
is
an
awesome
community
effort
which
is
actually
showing
how
to
use
the
office
UI
fabric
within
in
the
context
of
angular.
So
when
you're
writing,
angular
based
implementations,
community
treatment
and
an
awesome
example
of
the
power
of
the
community
when
people
are
sharing
their
knowledge
and
sharing
their
skills
for
the
benefit
of
others,
but
let's
actually
jump
on
the
directly
to
the
demo.
So
that
was
a
really
quick
introduction
on
the
steps
and
we'll
go
to
the
day.
A
In
the
demo,
wallak
is
gonna
show
what
it
actually
means
within
the
context
of
creating
that
client-side
web
part,
which
is
using
angular
in
a
native
way.
So
we're
not
gonna
just
to
reference
a
javascript
file,
which
is
our
angular
application.
We're
gonna
use
the
angular
within
the
code
natively
using
the
Taipings
within
within
the
Miss
Austria
code
in
this
case,
but
let's
switch
to
the
demo
part
so
Baltic
I
can
take
it
away.
B
Alright,
thank
you.
So
today
we
will
show
you
how
you
can
use
angular
to
build
SharePoint
framework
client-side
web
parts.
As
an
example,
we
will
use
a
simplified
version
of
a
to
do
that
part
that
basically
allows
you
to
manage
tasks.
So
here
you
can
see
the
web
part
on
the
screen.
You
can
see
that
we
can
have
tasks
that
are
done.
We
can
have
tasks,
tasks
that
are
to
do
so.
We
can
click
them
as
done.
B
We
can
add
new
tasks,
new
tasks
and
we
can
add
them
to
the
list
and
we
can
also
choose
whether
we
want
to
show
tasks
that
are
done
are
not
in
the
list.
So
we
can
do
that
here
in
the
web
part,
and
now
we
click
apply
to
actually
apply
the
thing
that
we
change
in
the
problem
from
property
plain.
That's.
A
B
B
We
really
need
to
use
apply
button,
but
imagine
that
you
would
load
the
tasks
from
a
real
list
and
well,
and
one
of
the
things
that
you
would
be
able
to
choose
is,
for
example,
the
name
of
the
list
right,
so
you
would
be
able
to
type
the
name
of
the
list
in
reactive
mode
on
every
keystroke.
The
web
part
would
try
to
load
the
data
from
the
partial
name
of
the
list,
so
this
is
definitely
not
a
thing
that
you
want.
B
A
B
Yes-
and
you
can
choose
whatever
makes
sense
in
your
case
right,
so
you
don't
have
to
go
with
either
or
one.
You
can
just
pick
the
one
that
you
that
you
want
to
use.
That
makes
sense
in
your
case.
So
all
this
is
built
as
an
angular
app
and
it's
simple
app.
There
is
no
beckon
to
it.
There
is
no
data
store
that
all
of
it
does.
It
starts
that
in
memory
just
to
show
you
that
so
here's
our
app,
we
use
the
energy
of
this
UI
fabric
to
have
it
styled
using
office
UI
fabric.
B
We
have
one
controller
for
our
page
and
one
service
which
basically
uses
a
fixed
collection
of
items
initially
that
we
can
then
in
in
in
in
interact
with
so
we
can
have
tasks
and
have
them
set
as
done.
We
can
remove
them,
add
them,
and
all
of
that
so
that's
being
not
written
to
a
list,
but
that's
being
kept
as
an
object,
and
you
could
easily
extend
that
to
have
that
stored
in
a
list.
We
actually
have
that
code
already
available.
B
So
now
how
about
we
start
creating
that
webpart
is
exactly
the
same
step
by
step
from
scratch.
So
let
me
just
move
that
to
the
side,
because
we
want
type
ever
everything
ourselves,
but
we
will
just
grab
the
pieces
of
codes
that
we
already
have
reused
them
and
we
will
walk
through
them
step
by
step
like
what's
there
and
what
do
we
do
where?
So?
Here,
let's
go
back
to
our
console.
Let
me
stop
this
one.
You
won't
need
this.
B
That
may
increase
the
fun
of
this
one
so
that
you
can
more
easily
read
that
and
then,
let's
start
by
creating
new
a
part.
So
let's
create
new
project.
We
will
call
that
PMP
angular
to
do
and
let's
go
directly
into
it,
and
then
we
call
yo
Microsoft
share
and
based
on
that,
we
start
the
SharePoint
framework,
yeoman
generator.
That
allows
us
to
create
the
project.
So
we
just
stick
with
the
default
name.
B
We
want
to
use
the
current
folder
Weber
will
call
to
do
description,
simple
management
of
to
do
tasks
and
then,
as
you
can
see,
angular
is
not
in
this
list,
so
that
means
yes.
That
does
not
mean
that
you
cannot
use
that.
The
only
thing
that
it
means
is
that
the
default
Shepherd,
framer
and
yeoman
generator
does
not
have
angular
in
it.
B
It
has
reactant
or
or
a
cow,
but
if
you
want
to
use
at
angular
for
now,
you
just
have
to
stick
with
the
first
option
of
no
JavaScript
framework,
and
then
we
can
add
angular
to
it
ourselves.
So
we
do
that,
and
now
this
Shepherd
framework,
yeoman
generator,
is
creating
doubled-up
object
installing
dependencies
and
doing
everything
it
needs
to
do
for
us
to
be
able
to
use
the
web
part.
A
So
I
post
on
well
it
doesn't
technically
at
this
point
it
doesn't
pull
down
anything
from
the
internet.
It
encapsulate
sand,
creates
the
project,
the
project
structure,
with
the
default
settings
and
copies
them
to
the
to
the
solution.
Folder
well,
and
no
doubt
right
now
we're
running
the
0.065
version
of
the
generator
sharepoint.
So
there
will
be
just
a
lot
of
dependencies
currently
within
this
structure,
so
the
folder
structure
is
quite
big
but
we're
looking
into
reducing
that
within
the
future,
with
the
future
releases,
but
we're
still
in
the
Developer
Preview.
A
A
B
B
So
we
don't
want
the
script
to
start
another
one
and
the
web
server
is
on
so
now
that
we
can
go
back
to
our
workbench.
Remove
the
web
part
that
we
had
reload
workbench
and
now
it
complains
about
the
web
part.
That's
not
there
anymore,
that's
correct
because
we
removed
it.
Let
me
remove
all
of
that.
Let
me
reload
the
workbench
and
now
I
can
go
here,
add
new
web
part,
and
then
it's
here,
so
that's
the
web
part
that
we
get
out
of
the
box
right.
B
So
how
about
we
now
turn
that
step
by
step
into
the
web
part
that
you
have
seen
initially
so
that
we
can
manage
our
to
do
tasks.
Let
me
go
back
to
our
command
line.
Let
me
stop
that,
and
the
first
thing
that
that
we
will
do
is
to
install
angular.
So
we
do
that
by
calling
em
PMI
for
install
angular,
and
we
also
want
the
web
parts
to
look
a
bit
like
office
right.
B
So
for
that
we
install
the
office
UI
angular
directives
which
we
can
grab
from
ng
office,
the
UI
dot
fabric,
and
then
we
call
capital
S,
which
is
short
for
they're,
safe
meaning.
It
will
add
these
dependencies
to
our
package.json
so
that
every
time
someone
else
grabbed
the
project
from
from
source
control.
Now
they
will
also
get
these
two
extra
dependencies.
So
we
call
we
press
ENTER
and
with
that,
we
install
these
dependencies
to
our
project.
A
B
Alright,
so
now
we
installed
the
penalty's
to
our
project,
but
these
dependencies
don't
really
do
anything
because
we
don't
use
them
yet
so,
no
and
and
before
we
do.
We
also
need
one
more
thing.
Remember
that
we
work
with
I've
script
right.
So
in
order
to
use
I've
script
and
angular,
we
also
need
typing's
and
we
can
install
them
using
the
PSD,
install
angular,
they're
safe.
B
So
with
that
we'll
add
angular
type-ins
to
our
project
and
we'll
also
add
them
to
the
list
so
that
again,
whenever
someone
else
grabs
the
project
from
source
control,
though
there
they
will
get
typing's
as
well.
Alright.
So
with
that
we
have
the
baseline
in
place,
and
now
it's
actually
time
for
us
to
add
the
angular
app
to
our
what
what
park
so
right.
Let's
start
Visual
Studio
code,
which
is
the
the
editor
of
my
choice,
and
you
can
use
anything
you
want
right.
B
There
is
no
limit
which
edit
or
you
can
or
you
must
use
anything
works.
Let
me
increase
the
font
size
and
then,
let's
go
to
our
and,
as
you
can
see
here,
that
is
the
vanilla
web
part
that
we
get
without
anything
in
it.
So,
let's
first
start
with
adding
the
folder
that
we
have
here
the
app
1.
So
let
me
just
copy
paste
there,
but
our
let
me
just
create
it
here
and
we
will
go
step
by
step.
B
What's
where
so,
you
first
start
with
creating
the
beta's
service
that
allows
us
to
interact
with
the
items.
So
here
we
call
final
call
data
service,
yes,
and
for
that
alleges
grab
everything
that
we
have
here
copy
paste.
So
what
we
have
here
are
the
basic
functions
that
we
need
in
order
to
get
items,
add
new
one
delete
one
or
set
one
either
as
dawn
or
not
right,
and
since
these
these
items
are
just
here
in
the
list,
there
isn't
anything
else
that
we
need
right.
B
B
So
whenever
we
type
a
new
task
and
press
ENTER,
it
will
is
actually
equal
for
adding
new
item
to
a
list
and
again
for
that
we
call
our
data
service.
For
that
to
add
the
item
to
our
collection
and
then
refresh
the
list
of
all
items,
then
we
have
also
in
our
function
for
for
each
leading
items
and
another
one
to
set
items
as
as
done
or
not
it's
right,
and
we
use
all
of
these
functions
from
within
our
template,
which
will
set
in
a
moment.
B
B
So
what
we
do
here
is,
as
you
can
see,
we
import
angular.
We
import
our
home
controller
data
service.
We
also
import
the
ng
of
this
UI
fabric
here
right
because
we
don't
need
to
have
that
that
within
the
web
part,
we
need
this
here
so
that
we
can
pass
dependencies
to
our
angular
module
here.
So
here
we
say
that
from
the
end
of
his
life
of
fabric,
we
won't
use
its
core
and
then
we
want
to
use
all
of
its
components.
B
B
Let
me
remove
the
pain
and
then
we'll
just
go
step
by
step
by
adding
the
angular
application
here.
So
we
start
by
copying
these
two
parts
and
with
that
we
first
load
an
angular,
and
then
we
also
load
the
module
that
we
have
separate
into
this
panel
right.
So
with
that
we'll
be
able
to
to
load
our
angular
app
we'll
within
the
web
part,
then
let's
define
template
for
our
angular
app,
and
for
that
let
us
grab
this
block
of
code.
B
Let's
replace
the
template
that
we
get
out
of
the
box,
and
here
we
have
two
closed
if
block-
and
we
are
also
getting
some
comments
that
we
have
style.css
I-
hope
that
we
didn't
define
so
just
to
get
rid
of
them.
Let's
grab
all
of
this
copy
them
to
our
CSS,
so
that
we
won't
be
bothered
by
the
errors.
Now
we
can
go
here.
We
still
have
them
here,
but
they
will
be
gone.
The
moment
that
we
build
the
project.
B
There
are
a
few
things
that
are
important
to
see
now
I'm
here
so
first
is
that
we
wrap
actually
adding
template
into
the
if
this
recommended
ones
clause
right.
If
you
know
angular,
you
know
that
each
angular
app
should
be
bootstraps
only
once
the
thing
about
the
render
function
here
is
that
it
executes
every
single
time
or
it
executes.
Initially,
when
you
add
the
web
back
to
the
page,
but
it
also
executes
every
single
time
you
change
property
of
web
parts
through
the
property
pane.
B
So
that
means
imagine
that
for
for
scenario,
we
would
switch
whatever
want
to
show
Dom
tasks
or
not
that
would
actually,
or
that
will
re,
execute
the
rendering
part.
That
means
that
if
we
didn't
wrap
this
template
in
the
rendered,
what
what,
what
once
clock,
+
that
would
boost
up
our
angular
app
twice
or
more,
which
would
throw
an
error
right,
because
angular
does
not
allow
bootstrapping
the
same
app
multiple
times
so
for
that
we
used
the
rendered
ones
property
that
we
get
from
the
base.
B
Client-Side
web
part
that
we
can
choose
a
check,
then,
if
this
rendered
ones
is
false.
That
means
that
the
web
parts
the
web
part
renders
initially
and
then
we
set
template
and
we
strobe
the
app.
So
here,
if
we
scroll
down,
we
didn't
boost
up
yet
yes,
so
let's
do
that.
Let's
do
this!
So,
let's
at
this
part-
and
then
we
add
the
rest
later
on.
So
we
add
this
within
the
if
clause,
so
we
do
this
and
the
reason
we
can
use
angular
here
is
thanks
to
our
import
here
right.
B
Also,
what
we
want
to
use
is
we
want
to
have
the
ability
to
choose
where
we
want
to
show
tasks
that
are
done
or
not
right,
so
we
do
that
by
adding
property
to
our
web
part.
We
always
start
that
from
the
manifest.
So
we
go
here
and
here
within
the
manifest
we
replays
the
one
that
we
had
initially
with
high
finished
tasks,
which
is
here
next
we
go
back
to
our
web
part
code
and
we
have
to
define
the
same
property
there.
B
Now,
as
you
can
see
here,
initially
we
had
text
field,
but
for
this
one
it
doesn't,
it
doesn't
make
any
sense
to
type
anything
right.
So,
instead,
how
about
we
used
something
else
that
we
have
a
bit
available
so
here
we
can
use
a
hole
right,
so
that
will
be
that
switch,
that
you
have
seen
that
we
do
that
we
can
just
flip
and
with
that
choose
what
I
want
to
show
tasks
start
on
or
not
so.
B
B
So
basically
we
replace
the
property
by
text
field
with
our
property
painting
gone
now
we
say
that
it
will
be
the
hide
finish
tasks,
and
here
we
have
another
error,
saying
that
the
label
that
we
had
does
not
exist
that
that's
correct.
So
here
we
go
to
lock
en
dot
us
and
let
me
just
grab
all
of
that
and
we
will
need
to
replace
some
other
things
as
well.
So
let's
take
that
first
I,
just
replace
all
of
that.
The
my
string
is
defined
in
face,
so
we
need
that
as
well.
B
B
So
with
that
we
have
that
part
in
place
and
actually
at
this
point
that
should
work
so
either
way.
We
should
be
able
to
initially
see
our
list.
So
let's
try
and
run
that
disapp.
So
we
will
say:
gulp
serve
no
browser
because
we
already
have
workbench
and
we
will
build
that
and
if
we
didn't
forget
anything
yet
so
there's
an
unused
variable,
but
we
will
get
to
that.
So
that's
not
not
that
that's
only
due
to
the
fact
that
we
remove
some
code
that
we
will
add
soon.
B
So
with
that,
let's
go
to
our
browser,
which
is
here,
let's
refresh
the
page,
and
now
we
can
see
our
tasks
right
so
now
we
can
already
see
them.
We
can
click
them.
We
can
mark
them
as
done,
we
can
add
new
items
and
that
works.
We
can
remove
them,
and
so,
let's
mark
this
one,
but
there
are
a
few
things
that
are
not
totally
right.
B
Nothing
happens
right
because
the
one
thing
that
we
haven't
done
yet
is
to
pass
properties
of
the
web
part
into
our
angular
app.
So
now
the
fact
that
we
change
anything
here,
our
angular
app,
doesn't
know
about
it
right.
So
these
are
the
two
things
that
we
want
to
fix.
So
let's
go
back
to
our
code
and
the
first
thing
that
we
do
is
to
actually
fix
a
bullet
here.
The
reason
for
that
is-
and
that's
not
a
bug
with
our
head
part,
and
it's
also
not
about
in
ng
office-
do
I
have
a
break.
B
It
does
not
know
that
we
want
to
use
Li
with
that
and
with,
and
therefore
we
get
two
bullets.
So
what
we
need
to
do
here
is
to
load
a
new
error
version
of
Office.
You
I
have
fabric,
and
we
can
do
that
from
CDN.
So
for
that
the
first
thing
that
we
need
to
do
and
I
think
I
need
to
stop
the
leper
for
that
and
that's
caused
by
a
bug.
B
The
first
thing
that
we
want
to
do
is
go
back
to
our
web
part
here
and
add
the
module
order
that
we
will
use
to
love
office
UI
fabric
from
CDN.
So
we
do
that.
Next
thing
that
we're
gonna
do
is
into
our
constructor
load
office.
You
have
fabric
CSS
right
because
we
don't
need
any
scripts.
All
of
the
scripts
are
already
part
of
Energy
Office
UI
fabric.
We
only
need
CSS,
so
we
add
them
here
and
that
should
fix
our
issue.
Now,
when
we
try
to
build
the
project
now,
we
will
get
an
error.
B
B
So
with
that
we
will
add
piping's
to
it
and
now,
if
we'll
run
it
again
by
calling
and
gulp
serve
no
browser,
we
should
be
good
to
go.
We
should
be
back
into
an
error
that
we
already
had
and
we
should
be
able
to
go
back
to
our
prior
to
workbench,
refresh
it
and
the
bullets
are
gone.
If
all
is
good,
so
we
go
back
to
browser.
B
We
refresh
the
page
and
the
bullets
are
gone
so
now
that
that
it
looks
like
the
way
it's
supposed
to
be,
let's
go
into
the
next
part
where
we
will
push
the
properties
from
webpart
into
our
angular
app
challenging
part
about.
That
is
that,
if
you
see
here
here
is
the
part
where
we
create
our
angular
app
and
bootstrap,
it
and
properties
are
being
modified
within
the
web
part,
whereas
all
of
the
angular
app
is
in
a
way
separate
from
all
that
alright.
B
So
there
is
no
easy
way
and
actually
angular
app
doesn't
really
know
at
all
about
the
fact
that
is
it
that
it
runs
within
the
web
part
right.
So
with
that
there
is
no
easy
way
for
angular
app
to
react
to
web
part,
and
you
know
the
other
way
around.
A
one
trip
that
you
can
use
with
that
in
angular
is
to
use
injector
to
trigger
event
on
route
scope.
B
So
what
we
mean
with
that
is,
whenever
you
change
property
of
a
head
part,
you
will
trigger
an
event
and
the
angular
app
can
then
suit
subscribe
to
that
event
and
react
to
it.
So
the
way
this
works
is
that
we
first
define
a
private
variable
called
injector,
and
that
variable
is
a
type
ng
auto-injector
service
and
we
add
that
to
our
web
part.
So
we
we
added
here
next
when
we
booster
our
app.
B
We
need
instance
of
that
right
because
the
bootstrap
is
done
only
initially,
so
that's
being
done
only
when
we
add
the
web
part
to
the
page
first
time,
but
we
need
injector.
We
need
to
be
able
to
react
to
that
event
every
time
so
outside
of
our,
if
Clause,
to
render
one.
So
all
of
this
is
being
done
only
initially
when
you
add
the
web
part
to
the
page
everything
else.
B
What
we
add
here
is
going
to
run
every
single
time,
the
web
part
he
renders
and
what
we
do
here
is
we
say
we
add
cups,
new
event
that
has
the
value
of
the
is
task
and
actually
see
here
that
I
also
forgot
to
add
it
to
our
interface,
so
in
our
I
to
do
web
part,
props
I
need
to
change
that
to
let
me
go
back
here.
My
part
props,
and
let
me
change
all
of
that
to
this.
B
So
that
way
we
have
our
property
and
we
passed
the
value
into
our
event
that
we
odd
cast
in
angular
with
that.
The
last
part
left
for
us
and
here's
a
squiggly
line
to
do
web
part
props.
Oh
yeah,
I
change
the
name,
that's
I
paste
it
too
much.
Let
me
fix
that
by
doing
this,
yes,
that's
fixed,
so
with
that
the
last
part
left
for
us
to
do
is
to
go
to
our
angular
app
and
subscribe
it
to
Daddy
that
event.
B
The
event
that
we
create
here
called
configuration,
changed
and
actually
do
something
about
it
right.
So
we
go
here.
We
go
to
our
home
controller
and
here
from
home
controller.
We
actually
grabbed
a
piece
of
code
that
we
had
initially
in
which
we
were
removed,
which
is
here
and
that
we
basically
used
to
say
well
and
that
when
an
ever.
B
Configuration
has
changed,
the
web
part
should
called
the
init
function
or
the
angular
app
should
call
call
init.
As
in
as
argument,
the
value
of
the
height
finish
task
property,
which
would
pass
here
within
the
web
part.
So
here
we
say
this
property's
height
finished
task,
which
corresponds
to
the
real
value
of
the
height
finished
task
property,
and
we
passed
it
into
our
event.
Under
property,
called
height,
finished
tasks
which
we
get
then
get
from
here.
B
B
So
we
can
go
to
browser
reload
that
and
if
all
as
well,
if
we
go
here-
and
we
now
say
high-
finish,
tasks
on
the
tasks
that
are
done
are
gone
and
then,
if
we
uncheck
that,
then
we
will
see
tasks
that
are
gone
now,
see
that
currently
our
property
pain
is
in
reactive
mode
right.
So,
whatever
we
switch
that
we
can
see
changes
immediately.
B
B
Call
disabled
reactive
property
changes.
If
we
save
that
project
will
rebuild,
we
wait
a
moment
and
then
refresh
the
page.
And
now,
if
we
go
back
here,
we
can
see
apply
here
whenever
we
flip
that
we
won't
see
anything
changed.
But
then,
if
we
click
apply,
we
actually
will
so
with
that.
You
have
seen
how
you
can
use
angular
and
ng
office.
You
like
fabric
for
building
sharepoint
frame
on
client-side
web
parts
as.
A
B
A
You
thank
you
all
the
contacts.
I
think
it's
great
the
amount
on
getting
started
on
the
angular
implementation
or,
like
you
said
when
we
started
the
demo.
This
one
is,
is
takling
or
saving
those
items
within
the
memory,
so
it
doesn't
actually
save
them
to
the
SharePoint
site,
but
just
as
well.
We
could
actually
talk
to
the
SharePoint
under
the
operations
using
their
city
by
posts
and
gets
an
all
done
within
the
implementation,
but
that's
not
really
the
target
of
this
webcast.
A
A
Hopefully,
it
shows
the
power
of
using
the
angular
with
the
client-side
web
part
or
how
to
get
started
on
using
down,
and
we
wanted
to
again
keep
it
relatively
simple,
so
that
people
can
adapt
the
technology
and
adapt
how
how
to
get
started
and
will
absolutely
come
up
with
more
complex
scenarios
in
the
upcoming
webcasts
as
well,
but
just
kind
of
a
walk
through.
What
did
we
do
within
the
within
the
demo
part?
So
like
we
started
in
the
in
the
presentation
as
well.
A
We
exit
started
using
the
NPM
and
that's
the
the
package
manager
for
JavaScript
and
we
installed
angular
and
M
GUI
fabric
and
we'd
use
the
s
option.
So
we
actually
get
the
package
JSON
of
data
so
that
if
somebody,
if
you're,
sharing
your
project
and
so
you're
able
to
use
the
NPM
install
or
I
command
and
that
will
then
pull
down
the
native
dependencies
from
the
internet,
then
we
execute
at
the
TSD
install
angular
s,
which
is
for
the
Taipings.
A
A
B
A
Absolutely
and
some
people
might
be
kind
of
a
wondering,
what's
the
really
the
benefit
of
using
the
client-side
client-side
framework,
because
you
can
use
the
angular
already
without
the
client-side
framework
or
the
SharePoint
framework,
but
that
really
comes
down
on
having
a
standard
station
on
using
the
JavaScript
libraries
in
and,
let's
say,
standardized
way
as
part
of
the
development.
So
it
helps
on
on
having
more
context.
A
It
helps
on
having
a
more
structure
within
your
implementation
and
there's
a
lot
of
benefits
using
the
framework,
because
they're
related
getting
all
of
that
page
context
that
you're
getting
access
more
easily
to
the
SharePoint
SharePoint
elements
and
SharePoint
data,
but
I
think
that
sums
up
the
webcast.
So
thank
you.
Everybody
for
watching
and
we'll
come
up
with
a
new
one.
Sooner
or
later.