►
From YouTube: SPFx JavaScript SIG 3rd of August, 2017
Description
No description was provided for this meeting.
If this is YOUR meeting, an easy way to fix this is to add a description to your video, wherever mtngs.io found it (probably YouTube).
A
Hello
and
welcome
to
the
SharePoint
framework
and
JavaScript
special
interest
group
bi-weekly
meeting.
It
is
August
3rd
2017
got
a
good
meeting
today.
A
couple
of
cool
demos,
we'll
talk
about
those
in
a
second
but
real
quick
for
those
that
might
be
new
to
the
call
or
new
to
listening
to
these
recordings.
I
did
want
to
give
you
a
quick
rundown
of
what
this
meeting
is
all
about.
A
What
this
reoccurrence,
you
know,
sort
of
community
gathering
is
really
all
about,
and
so
this
is
a
place
for
folks
who
are
interested
in
SharePoint
development
and,
more
specifically,
SharePoint
client-side
development
to
come
together
and
talk
about
the
new
SharePoint
framework
and
implications
there.
The
updates
around
that,
as
well
as
building
the
JavaScript
core
component,
which
we've
been
working
on
here
in
the
patterns
and
practices
group.
A
So
we
are
part
of
the
larger
SharePoint
patterns
and
practices
program,
and
we
started
out
over
a
year
ago
now,
which
is
kind
of
crazy,
with
these
special
interest
groups
to
allow
folks
to
have
a
little
bit
better
focus
on
topic
areas.
So
this
one
is
about
client-side
JavaScript
development
type,
script,
development
we
have
ones
for
PowerShell
and
we
have
ones
for
the
core
component
as
well.
You're,
of
course,
welcome
to.
Please
join
as
many
of
these
special
interest
groups
as
you
would
like
that's
a
great
way
to
get
a
little
bit
more
focused
information.
A
The
monthly
calls
are
a
lot
broader
in
scope,
so
it's
good
to
get
into
these
de
special
interest
groups.
If
you
do
have
you
know
some
interest
in
those
particular
categories,
so
two
links
down
there
at
the
bottom,
the
AKMs,
SP,
P
and
P
dash
community
is
the
shortcut
to
the
Microsoft
tech
community,
and
that
is
a
great
place
to
ask
general
questions
not
just
about
client-side
development,
but
about
SharePoint
development.
All
up,
so
that's
a
really
great
place
and
that's
community,
so
you'll
get
answers
from
Microsoft
folks
answers
from
other
folks
in
the
community.
A
It's
a
really
great
resource,
encourage
you
to
check
that
out.
The
second
link
there
dev
office,
comm,
slash
SharePoint,
is
your
one-stop
shop
for
all
things:
SharePoint
development,
so
you're
ready
to
get
started
on
a
SharePoint
framework
and
start
learning
about
that.
We've
got
tutorials
and
walkthroughs
on
SharePoint
framework.
If
you
need
resources
on
a
DIN
development
or
the
WSP
package
development
solution,
development,
all
of
that
is
at
or
moving
to
dev
dot
office,
comm,
slash
SharePoint,
so
check
that
out
it's
a
great
resource
and,
of
course,
we're
always
looking
to
update
that.
A
So
if
you
see
big
gaps
and
documentation
and
things
like
that,
always
great
feedback
for
us
to
hear
so
just
a
reminder.
Obviously
the
folks
on
the
call
have
have
updated
their
invite
because
you're
here,
but
this
is
more
for
the
folks
that
might
be
watching
this
on
the
recording.
Do
please
update
your
invite
to
a
kms
is
sick.
All
is
actually
the
same
link.
We've
updated
the
calendar.
Invite
behind
this
link
so
do
download
the
new
calendar
update.
This
is
Microsoft's.
Fiscal
year
ends
in
June,
and
so
we
have
a
new
calendar
up.
A
Calendar
invite
starts
in
July
and
so
I
know
it's
the
summer.
So
folks
are
coming
and
going
so
we're
going
to
try
advertise
this
out
as
much
as
we
can
if
you're
talking
to
your
friends
or
you
see
out
in
the
world
somebody's
saying
well
what
happened
to
that
meeting?
Why
is
that
meeting
not
happening
anymore?
It
definitely
is,
and
please
just
point
them
to
this
link
and
ask
them
to
update
their
calendar
entry.
A
So
just
a
reminder,
we'll
probably
do
this
one
more
time,
and
that
will
you
know
hopefully
folks
will
will
get
this
update.
I
know
lots
of
folks
are
out
on
vacation
summer
is
always
kind
of
a
downtime.
The
monthly
invite
link
should
be
there
on
the
patterns
and
practices.
Homepage
Tim.
If
it's
not
updated,
it
will
be.
A
What's
the
month
after
August,
September
so
September
for
sure
all
the
normal
meetings
will
be
picking
up
things
during
the
summer
kind
of
go
a
little
bit
on
hiatus
as
folks
are
on
vacation
and
and
things
like
that
so
agenda
for
today,
we've
got
a
short
update
on
the
JavaScript
core
component.
We've
got
two
great
demos.
Sergei
is
going
to
talk
about
so
last
time.
I
thought
he
was
going
to
talk
about
this,
but
this
time
for
sure
he's
going
to
talk
about
this
I
finally
got
my
dates
correct.
He
did
this
really
awesome.
A
Pull
request
for
this
new
configure
method
in
the
JavaScript
core
library.
So
he's
going
to
talk
through
that
and
do
some
cool
demos
there
and
then
Sebastian
has
I
called
it
just
angular,
4
and
SPF
X
I
hope,
that's
a
good
enough
title,
but
he's
going
to
show
us
some
really
cool
work,
he's
been
doing
around
angular
4
in
SPF,
X
and
sort
of
bootstrapping
that
and
getting
that
going.
A
So
really
cool
stuff
excited
to
see
both
of
those
coming
up,
and
then
we
should
have
a
little
bit
of
time
at
the
end
for
an
open
discussion,
real
quick
I
did
want
to
do
a
Patrick
update.
So
this
is
me:
I
am
actually
out
on
family
leave
right
now,
so
we
have
just
had
our
first
child,
so
my
wife
and
I
are
very
excited
and
very
tired.
A
I
am
trying
to
be
somewhat
active,
I'm
trying
to
respond
to
issues
and
answer
questions
as
best
I
can,
but
that's
going
to
be
slower
than
it
has
been
in
the
past,
the
monthly
releases.
However,
we
are
going
to
continue
those
the
next
one
I
think
is
targeted
for
August
15th
I
want
to
say,
but
we
will
continue
the
month
releases
of
the
JavaScript
core
library
sort
of
a
note
there.
A
If
you've
got
something
that
you
really
need
to
see
fixed
or
enhancement,
you
really
want
to
see
added
the
quickest
way,
at
least
for
the
next
few
months,
to
get
that
in
there
would
be
to
do
a
pull
request
and
get
that
submitted,
and
we
can
take
a
look
and
get
that
merged
and
I
say
that
not
because
I
don't
want
to
do
the
things,
but
because
I've
got
some
other
stuff
going
on
right
now
and
don't
want
to
neglect
this.
So
we
will
be
doing
the
monthly
releases.
A
I
will
try
and
be
sort
of
active,
but
it
will
be
in
a
reduced
rate.
So
just
ask
that
you
folks
are
sort
of
a
little
understanding
on
that
and
I
promise
to
get
back
to
it.
Full
speed
once
I'm
back
from
leave.
So
just
a
quick
update
for
me
wanted
to
share
some
stuff.
That's
been
going
on
and
again
thanks
to
everybody
for
the
Congrats
and
yep
till
I'm,
mostly
asleep.
A
Most
of
the
time
now
so
still
want
to
remind
everybody
the
great
opportunity
to
participate
in
this
this
this
sink
as
well
as
these
are
kind
of
just
good
opportunity
to
participate
in
the
patterns
and
practices
program
overall,
so
you
can
demo
a
SharePoint
framework
webpart.
So
if
you're
doing
some
cool
work
or
got
a
cool
project
going
on,
let
us
know
get
on
this
call
demo
it
for
the
community.
A
It's
a
great
way,
one
to
show
off
your
work
and
to
pardon
me
for
all
of
us
to
learn
from
what
you've
done
in
the
work
you're
doing
like
I,
constantly
see
folks
doing
stuff
with
SharePoint
framework
and
client-side
development
that
you
know
I
would
maybe
never
have
thought
of.
So
it's
really
neat
to
learn
from
every,
but
I
think
that's
are
one
of
the
more
valuable
aspects
of
these
meetings:
demos,
something
around
the
JavaScript
core
library.
Maybe
that's
something
too
node,
maybe
that's
something
in
SharePoint
framework,
maybe
it's
something
just
in
general.
A
Client-Side
development
contribute
on
github.
So
this
would
be
issues
this
submitting
issues.
This
would
be
submitting
pull
requests.
This
would
be
just
answering
other
folks.
Questions
on
github
questions
come
up,
folks,
jump
in
and
answer
and
thanks
everybody
that's
been
doing.
Some
of
that
really
appreciate
a
little
bit
of
help
there
on
the
coverage
and
then,
of
course,
providing
feedback.
So
whether
that's
issues
in
the
issues
list
or
just
general
feedback
on
the
SharePoint
framework,
the
JavaScript
core
library,
these
calls
etc.
So
feedback
kind
of
on
everything
we're
doing
is
always
welcome.
A
A
Something
like
that
do
encourage
you
to
put
together
a
pull
request
and
get
that
submitted,
will
definitely
review
that
and
take
a
look
as
always.
If
your
idea
is,
is
large
in
scope
and
is
going
to
encompass
kind
of
a
lot
of
change.
The
library
would
just
ask
reach
out.
First
would
love
to
have
a
chat
with
you
about
it
before?
Maybe
you
put
in
all
that
work
because
either
it
might
be
something
we
won't
be
able
to
merge
or
something
other
folks
might
be
working
on
something
like
that.
B
B
B
B
It
goes
in
the
web
app
running
on
address.
There
is
only
one
single
thread:
there
is
no
thread
pool
or
multi
process
or
something
simply
one
single
thread,
and
that
means
that
all
global
variables
are
shared
between
requests
and
it's
one
thing,
and
another
thing
is
how
model
import
works
in
colleges,
for
example,
when
you
are
requiring
any
model
in
node.js,
for
example,
requiring
or
importing
like
in
Portage's,
you
always
receive
exactly
in
the
same
instance
or
another
word.
You
receive
exactly
the
same
reference,
and
this
also
very
important.
B
Now,
let's
take
a
look
at
the
code
I'm
not
going
to
dive
into
Express
reload
internals
just
want
to
show
you
some
some
of
the
routes,
for
example.
This
is
a
list
route.
It
is
very
similar
to
NGC
controller.
Actually,
so
there
are
two
routes,
one
for
get
request
and
one
for
post
request.
You
get
requests
in
player
turns
a
view
and
post
request
creates
in
just
that
small
item
in
a
list
wait
around
now.
Let
me
make
it
a
little
bit:
legal,
okay,
so
I'm
hitting
a
5.
Okay,
please!
B
B
And
item
created
by
Express,
just
then
on
behalf
of
me,
so
the
code
echoed
is
pretty
simple.
Also
it
is,
is
similar
to
dotnet
SharePoint
context.
This
line,
I
am
creating
a
context
and
then
I
am
generating
access.
Token
user
access
token
for
SB
host,
then
I'm
using
global
identity,
tab
function
here
and
setting
an
authorization
header
as
well
as
where's
URL
for,
is
be
host
and
then
I'm,
just
using
a
regular
integer
score
code
for
creating
a
new
item,
so
in
general
nothing
special
and
you
see
that
it
works.
B
But
actually
there
is
there
is
an
issue
here
and
if
it
becomes
clear
in
multi-user
scenario,
because
it
is
great
before
there
is
only
one
thread
and
for
all
users
please
guilty
variable,
which
is
imported
right.
Here
is
the
same
activity
same
reference
and,
for
example,
imagine
a
situation
and
have
ten
or
twenty
for
even
more
users
simultaneously
trying
to
access
your
root
and
run
in
multiple
asynchronous
trackers
against
SharePoint
as
the
guy.
In
this
case
the
business.
There
is
a
big
chance
that
one
user
will
change
this
global
optimization
hinder.
B
We
argue
about
the
empty
set
up
function
and
another
one.
We
will
pick
up
this
young
hitter
and
we
will
use
it
please
if
you
use
this
user
for
his
request
and
for
sure
this
is
not
something
we
expecting
from
our
up,
because
this
is
wrong.
Every
user
should
should
use
his
own
realization,
header
and
accessed
again,
and
that
is
why,
ideally,
it
is
much
better
to
have
some
kind
of
local
tinta
variable
for
every
user.
It
is
appropriate
of
realization
header,
and
this
is
the
case
when
configure
method
can
help
us.
B
Pp
dot,
speed,
configure,
consider
tips,
two
parameters,
one
is
options,
options
of
it.
You
can
pass
them
headers
credentials
and
mod
purposes,
so
I
am
interested
in
hitters
and
I
actually
need
to
set
optimization
hinder
and
the
second
carbonyl
is
my
base
URL.
So
I
am
just
going
to
cut
it
host
URL
here.
B
B
Of
course,
you
will
never
see
this
issue
will
using
10
PGS
core
from,
for
example,
from
client
or
from
browser
right,
but
there
are
some
cases
when
you
still
can
use
configure
method
and
configure
here.
That
might
be
helpful
for
you,
for
example,
sharepoint
rest
with
the
I
support
JSON
light,
and
you
can
configure
your
application
to
use
no
metadata
header
for
some
requests
in
order
to
reduce
traffic
and
use
full
metadata
for
ads.
For
example,
I
have
also
index
wrote
here
and
just
for
demonstration
purposes.
B
Interred
items-
and
you
see
that
consider
also
available
on
items
level,
actually
an
config
related
edit
to
base
a
credible,
credible
class.
That
is
why
consider
method
is
also
available
on
almost
on
every
object
in
computer
score
like
web
lists
items,
field,
etc,
and
also
some
collections
so
I'm
using
configure
I
want
to
set
heaters
and
I
want
to
set.
B
B
A
Thanks,
it's
I
think
it's
a
really
great
addition
to
the
library
Sebastian.
If
you
want
to
jump
on
there,
it's
going
to
provide
a
lot
of
flexibility
to
folks
and
it's
composable
as
well.
So
if
you
do
a
configure,
you
can
kind
of
create
your
own
route
object
and
then
later
you
could
do
subsequent
configures
to
to
modify
even
that
object
slightly.
So
it
provides
a
lot
of
additional
flexibility.
A
C
So,
let's
started
off
so
been
a
couple
of
crazy
week
for
me
in
the
last
month,
or
so,
where
we've
been
working
paintings
a
lot
on
making
anger
and
just
SharePoint
framework
work
together.
It's
been
a
an
inker
developer
for
a
long
time
now,
and
I
was
kind
of
sad
that
I
could
not
make
his
work
using
angular
for
or
angular
2
or
whatever
their
version
of
angular
you're
using.
C
So
I
really
wanted
to
go
through
this
entire
process
and
start
understanding
what
what
is
required
required
by
the
SharePoint
framework
to
make
work
angular
inside
any
modern
pages
or
any
classic
pages
in
SharePoint,
so
I've
been
working
with
a
kind
of
a
startup
project
and
in
Microsoft
really
the
SharePoint.
Where
we're
there.
We
go
inside
of
SharePoint
XP
dev
effects
web
parts.
That
was
one
thing
that's
hard
to
use,
which
was
that
angular
angular
2
prototype
that
was
actually
done,
I
think
about
if
I
use
your
give.
C
If
I
can
I
think
that's
it
and
it
was
like
that
is
a
very,
very
good
start.
It
kind
of
worked
but
didn't
allow
everything
to
be
included
in
there.
So,
for
example,
routing
and
providers
and
all
the
different
concepts
and
components
that
angular
provides
so
I
kind
of
started
with
that
project
and
use
that
as
a
starting
point
for
understanding
better
how
we
can
make
things
work
with
angular,
and
the
thing
that
was
extremely
important
for
me
was
two
different
things.
C
Fix
some
of
those
challenges
and
I
came
up
with
something
called
the
SPF
x,
angular
boilerplate
I'll
work
with
this
ax
to
try
to
make
that
happen
inside
the
PNP
FX
samples
web
part
where
we
actually
cover
all
the
different
aspects.
I
just
talked
about
so
multiple
web
parts,
multiple
angular
versions,
multiple
projects
and
everything.
So
before
we
go
any
further
I'd
like
to
show
you
actually
what
is
happening
so,
let's
go
here.
Let's
go
just
do
a
gulp
serve
and
let's
wait
for
our
local
workspace
to
pop
up.
C
In
that
scenario,
we've
been
working
hard
to
make
sure
that
we're
using
the
best
concepts
and
also
best
practices
in
web
dev,
so
using
simple,
simple
components.
Also,
the
code
right
after
using
simple
components,
mock
objects
for
local
development,
real
data
using
a
PNP
GS
core
for
for
hosted
development
and
everything.
So
let
me
show
you
what
is
what
this
is
all
about.
Actually,
pretty
simple,
so
I'm,
adding
in
your
web
part,
go
here,
click
on
that
basic
angular
and
then
I
have
a
weapon.
C
It
is
a
boring
weapon,
there's
nothing
sexy
in
there,
but
still
it
all
supports
anything.
You
would
expect
so
if
you
want
to
loop
in,
for
example,
angular
material
to
it.
Also
it
works
extremely
well,
so
it
all
supports
all
the
kind
of
angular
stuff.
That's
where
it's
native
and
here
as
you
can
see,
can
go
in
edit
your
web
part
until
the
basic
angular
is
pretty
awesome.
C
You
can
see
them
have
that
reactive
property
pane
that
communicates
back
to
your
angular
application,
updates
your
properties
and
then
sends
all
those
properties
to
a
service
inside
your
angular
app.
So
that's
pretty
cool.
Here's
I
do
whatever,
because
I'm
a
local
workbench.
It
is
going
to
pop
up
a
list
of
blocked
data
right
here,
because
I'm
in
the
a
local
workbench
that
also
works.
If
I
do
add,
multiple
webparts
I
can
go
here
and
actually
add
multiple
Webber.
So
now,
I
have
two
different
set
of
configurations.
So
I
can
come
here.
C
We
went
there
and
say
hello
and
I
have
another
list,
name
which
will
be
whatever
and
then
I
will
see
the
content
coming
up,
so
both
of
my
webparts
have
actually
different
settings
different
configurations.
That
was
one
of
my
goal
to
make
sure
that
this
happens
in
that
the
speed
and
performance
of
those
webpart
is
actually
not
altered
by
anything
around
the
sharepoint
framework.
Same
thing
will
also
happen.
If
we're
going
here,
just
reload
or
hosted
workbench
can
go
here.
Add
the
basic
angular
apart.
That's
funny.
C
C
So
let's
go
back
and
see
what
the
code
is
all
about,
so
I
had
to
do
a
bunch
of
that
changes,
but
ways
of
working
that
will
permit
the
SPF
X
to
work
on
any
type
of
angular
angular
version.
So
first
thing
you
have
to
do.
That
is
a
classic.
It
could
go
in
in
to
add
all
of
your
angular
references,
so
all
your
packages
that
you
want
to
use
in
that
case
we're
using
angular
for
point
three
point:
one:
it's
actually
now
updated
to
four
point
three
point:
two!
C
So,
depending
on
your
scenarios,
that
would
that
would
work.
You
also
need
to
import
the
core.
Yes,
it
will
probably
fill
some
of
the
es6
elements
in
there
and
you
also
need
the
reflect
metadata,
which
is
a
angular
dependency
rxjs.
If
you
want
to
use
the
reactive
extensions
for
javascript
inside
your
angular
stuff,
it's
kind
of
built
in
now
since
MGS
end
zone
GS.
So
all
of
those
different
aspects
needs
to
be
loaded
and
PM,
install
that
and
that's
pretty
much
it
so
you
want
to
have
everything
loaded
inside
your
SharePoint
framework
web
part.
C
Nothing
will
be
hosted
by
Microsoft.
You
will
be
hosting
all
of
those
different
files
or
different
packages
within
your
own
web
pack.
Bundle
the
thing
one
of
the
hacks
or
one
of
the
ways
we
fixed
one
of
our
problems
with
that
anger
is
supposed
or
is
meant
to
be
a
single
page
application
framework.
So
it's
not
made
initially
to
work
as
a
web
part
or
component
base
and
our
all
makes
on
inside
the
same
page.
C
C
My
package
I
don't
really
care,
but
if
I
have
to
then
there's
some
conflict
that
will
happen
so
what
I'm
doing
I'm
in
the
config
can
go
here
and
it
config
that
JSON
I
can
go
and
as
the
externals,
so
I
will
externalize
my
zone
J's
using
a
CDN,
so
everyone
that
will
be
using
some
GS
will
actually
be
pointing
to
the
same
CDN.
The
way
webpack
works.
If
the
CDN
resource
is
already
loaded,
it
will
not
load
it
again.
C
That
means
that
you
will
always
only
have
one
zone
GS
loaded,
only
a
single
instance
of
it,
and
that
single
instance
will
be
able
to
manage
multiple
angular
modules.
That
means
that,
if
you
put
on
a
screen,
any
types
of
web
parts
that
are
using
angular
you'll
be
in
a
good
position
using
that
approach.
So
that's
the
first
thing
you
need
is
you
need
to
externalize
your
zone
J
s,
then
afterwards
in
terms
of
packaging.
C
You'll,
ask
some
challenges
where
sharepoint
framework
will
complain
that
some
of
the
references
not
being
set
or
some
collision
between
anger
and
some
of
the
internals
of
the
sharepoint
framework.
So
what
you
need
to
do
is
that
in
the
TS
config
need
to
make
sure
that
you're
skipping
your
library,
so
you
don't
need
to
check
your
pre
bundle.
Library,
so
type
script
will
not
try
to
bundle
them
again.
It
will
just
assume
that
all
those
libraries
are
actually
working
and
it
will
just
bundle
everything
together.
C
That
will
fix
some
of
those
challenges,
and
the
second
challenge
is
that
angular
4,
currently
as
a
bug,
depending
on
the
structure
of
your
your
files
when
you're
developing
and
because
everything
is
in
the
source,
file,
Azure
or
web
part,
you
need
inside
the
golf
file
that
GS
need
to
instruct
what
what's
the
actual
source
repository
for
the
angular
core.
So
where's,
it's
going
to
be.
C
Those
are
the
only
structural
changes
that
needs
to
happen
before
you
can
run
any
of
your
angular
web
part
afterwards.
The
only
thing
you
need
to
do
is
to
actually
code
code.
Your
web
part,
this
the
exact
same
way
that
you
would
do
it
so
I
will
show
you
our
our
components
but
we're
using
so,
for
example,
avid
basic
angular
when
we're
I
have
an
app
I
have
an
own
component
in
the
list
component
in
my
own
component
is,
as
you
can
see,
that
type
of
code
is
a
hundred
person
angular
compatible.
C
That
is
angular
code.
There's
no
SharePoint
framework
code
in
there
there's
absolutely
nothing
that
are
actually
talking
with
the
SharePoint
framework.
It's
just
a
component
that
will
be
bundled
through
an
angular
module
or
an
angular
application.
So
you
can
use
everything
you
would
expect
from
angular.
So
you
can
inject
your
services,
you
can
use
metadata
to
declare
your
components
and
everything,
so
nothing
too
fancy
same
thing
for
the
list,
so
I
will
just
show
you
the
template.
C
So,
for
example,
the
template
is
a
fairly
simple
template
where
I
just
show
the
component
in
the
title,
the
title
is
what
is
being
sent
out
by
the
property
pain
of
our
angular
web
part,
and
here
I
have
a
list
element
that
refers
to
the
list
component,
as
are
already
registered
my
list
to
use
that
selector
right
here.
C
And
here,
for
example,
I
can
still
use
everything
that
you
would
expect
from
angular,
so
I
can
use
all
the
events
I
can
implement
on
init
and
override
the
ng
on
in
it.
So
when
the
web
part
is
actually
loaded
and
ready
to
render
I
can
invoke
a
service
call.
Those
services
call
our
angular
services,
but
I
can
get
so
I
get
the
the
instance
of
the
service.
I
get
the
items
based
on
the
configuration
service,
which
is
a
service
that
is
shared
amongst
all
my
different
components.
That
is
actually
pretty
much
a.
C
Set
of
data
that
is
coming
from
that
property
pain
from
SharePoint
framework,
so
the
list
name
that
I've
put
in
will
be
use
here,
so
I'll
use
that
method
and
when
there's
something
that
comes
up,
I
will
just
assign
my
items
to
the
items.
Then
I
will
be
able
to
go
in
my
list
template
into
a
ng4
for
all
the
items
are
available,
just
display
the
ID
and
the
title.
So
those
are
really
really
angular
concepts.
Nothing
too
fancy
here,
out-of-the-box
angular
stuff.
Now
we
need
to
be
able
to
use
those.
C
Two
components
are
tightly
coupled
that
tightly
coupled
but
are
including
one
inside
each
other.
So
you
have
the
own
component,
that
is
the
top
component
and
inside
that
I'm
using
the
list
component.
Well,
I
need
to
use
my
in
my
web
part
I'll,
just
close
that
app
I
have
my
basic
angular
web
part,
the
TS,
so
that
doesn't
change
I'm
still
using
the
exact
same,
the
exact
same
set
of
files,
but
here
the
big
difference
is
that
and
actually
not
integrate
in
rating
from
the
base.
C
Client
web
part,
but
I'm
in
rating
from
the
base,
angular
web
part
and
a
base
angular
web
part
is
the
way,
is
a
a
specialized
version
of
the
clients
web
part
that
I
built.
That
is
what
is
coming
from
well.
The
base
is
coming
from
that
Microsoft
Project
that
we
use
as
our
base
that
we
enhanced
it
to
build
it
to
be
a
more
performance
and
a
that
works
better
with
all
the
different
components
of
angular.
C
So
you
enter
it
from
it,
and
the
only
thing
you
have
to
instruct
your
your
abstract
class
is
what
is
going
to
be
your
root
component.
So
you're
going
to
add
a
map
component,
that's
going
to
wrap
everything
afterwards,
what
are
going
to
be
your
different
sub
components?
So
what
are
you
going
to
use?
So
it's
going
to
make
sure
that
it
bundles
everything
together
inside
your
your
SharePoint
Raymond
project.
What's
are
your
different
troops,
so
you
can
everything
is
based
out
of
routes
instead
of
direct
components.
C
That
way,
we
can
really
really
decouple
our
components
from
our
SharePoint
framework
code.
So
it's
extremely
important
to
add
that
then
I'll
come
back
to
the
providers
as
I
want
to
show
you
the
routes
or
the
routes
right
here.
So
I
can
go
here
and
I
can
see
that
when
I'm
at
the
slash
and
when
there's
nothing
I
just
load
the
component.
That
also
means
that
you
will
be
able
to
use
different
routes
and
sub
routes
to
be
able
to
navigate
from
one
component
to
the
other.
C
So
the
same
way,
you
would
go
from
a
slash
user,
slash
ID
of
the
user
or
slash
user,
slash,
ID,
/
details,
for
example,
where
you
want
to
navigate
through
your
different
components
like
you
would
do
in
any
angular
application.
That
is
absolutely
possible
to
do
it.
That
way.
Keep
in
mind
that
if
you're
doing
that
and
you're
using
the
URL,
all
over
your
different
components
will
be
kind
of
mixed
up,
because
everyone
will
still
look
at
the
URL,
so
that
will
not
be
a
great
way
to
navigate
through
the
URL.
C
But
in
angular
you
can
also
actually
use
the
exact
same
strategy,
but
the
state
or
the
navigation,
States
or
navigation
routes
are
kept
in
a
local
state.
So
you
can
navigate
from
one
state
to
the
other
using
the
slash,
but
it's
not
going
to
be
replicated
to
the
URL,
so
at
least
you'll
be
able
to
use
multiple
web
parts
at
the
same
time
with
multiple
sub
routing
systems,
without
any
problems,
and
here
I
just
export
that
app
as
using
that
in
my
in
my
real
in
my
own
route
here
and
the
last
one.
C
Is
this
one?
So
the
providers?
This
is
where
that's
kind
of
our
ng
start
or
our
app
start
in
angular,
where
we
do
some
kind
of
a
pre
initialization
before
we
can
go
and
deploy
and
run
our
code.
So
what
we're
doing
here?
We're
building
two
sets
of
provider
based
on
the
environment.
So
if
you're
local
we're
actually
providing
a
mocked
version
of
the
item
service
and
if
we
roasted
in
the
classic
SharePoint
experience
or
in
the
rigor
of
SharePoint
we're
doing
that
right
here.
C
So,
for
example,
if
I'm
local
I
need
to
have
a
configuration
service,
that
I
will
configure
using
those
different
types.
So,
if
I'm
using
the
item
service,
just
replace
that
by
using
the
mock
item
service
here,
I
can
actually
initialize
some
of
those
values.
So
I
can
use
the
properties
passed
by
my
you,
my
my
property
pane
and
automatically
put
that
right
inside
my
configuration
service
that
will
hold
all
that
data
and
because
that
service
will
be
shared
amongst
all
of
my
different
components.
C
If
I
inject
the
the
service
inside
any
of
the
components,
I'll
be
able
to
use
the
configuration
elements,
that's
where
I
set
up
using
the
property
pane.
So
that's
pretty
cool
same
thing
here,
I'm
doing
the
exact
same
thing.
The
only
difference
is
this
one
as
I
want
to
use
the
item
service
when
I'm
using
the
item
service,
so
I
can
just
use
the
out-of-the-box
item
service
that
uses
real
SharePoint
data
using
PM
PGs.
C
So
we'll
just
show
you
right
now,
so
in
my
shared
components,
I
will
have
a
service,
including
that
item
service,
so
extremely
simple.
Nothing!
Nothing!
Fancy
here,
just
a
simple
wait
on
APN
PSP
web
list
get
by
title
based
on
the
title.
The
list
name
that
is
provided
through
the
pain
I
can
get
as
the
automatically
to
map
to
my
custom
object,
returns
that
same
things,
I'm
showing
you
the
mock
version
of
it
I'm
doing
the
exact
same
thing
just
that
I'm
creating
the
data
instead
of
just
using
a
a
real
connected
data.
C
So
those
two
are
doing
as
we
can't
pass
the
data
and
that's
it
as
you
can
see,
you
don't
see
any
render
method
or
any
magic
happening,
so
how
the
magic
is
actually
happening
is
through
that
base
glass
that
happens
in
our
core.
So
you
have
a
base
angular
web
part,
and
this
is
where
pretty
much
everything
happens.
So
you,
as
the
Basinger
web
part
that
extends
the
base
client-side
web
parts
and
there's
really
three
different
methods
that
are
important
in
here.
C
First
one,
this
one,
the
render
so
I'm,
actually
a
signle
in
the
inner
HTML
of
that
element
to
be
a
dynamic,
angular
instanceid
of
the
web
part.
So
any
new
web
part
will
have
a
separate
instance
ID.
That
means
that
all
my
web
parts
will
be
able
to
be
rendered
dynamically.
Based
on
that,
no
one
will
collide,
each
one
will
have
its
own
set
of
properties
configuration
and
all
of
that
then
I'm
boots,
trapping
the
module.
So
here
is
where
we
do
that
dynamic
bootstrapping
using
the
platform
browser
dynamic.
C
So
that
is
one
of
the
module
that
is
provided
by
angular,
and
here
I
can
just
bootstrapper
module
and
then
assign
what
will
be
the
reference
to
the
entry
module
ref.
This
is
where
this
is
what
we
use
the
most
from
that
angular
to
prototype
from
Microsoft.
So
this
is
really
what
they
came
up
with
for
that
prototype.
So
we
use
that
as
a
fairly
simple
way
to
bootstrap
the
entire
app
based
on
that
dynamic,
bootstrapping
and
I
also
add
that
get
module
that
get
module
is
where
we
actually
create
our
app
module.
C
So
here
you
can
see
we're
creating
an
NG
module
with
a
bunch
of
imports,
a
curation
bootstrap
exports
provider
and
those
are
all
different
properties
and
variables
that
are
or
created
through
that
base
angular
web
part
or
that
are
being
specified
by
our
specific
webparts.
We're
creating
and
then
I
can
use,
for
example,
the
rails
from
this.
The
declarations,
the
component
in
the
provider
that
were
use
as
a
property
on
my
instance
web
parts
that
case
my
basic
angular
weapon.
C
Then
there's
one
last
piece
where
we
need
to
bootstrap
everything
inside
an
app
and
that
app
component
is
actually
a
very,
very,
very
simple
component,
where
there's
only
online
in
our
template
and
the
one
line
is
a
router
outlet
that
router
office
would
allow
us
to
put
in
any
other
component.
That's
going
to
automatically
decouple
the
specific
angular
code
attached
to
the
SharePoint
frameworks
to
regular
angular
code.
So
you
can
see
here
in
my
app
I,
have
my
abject
component
and
that's
it
as
you
can
see.
C
I
have
my
angular
selector
IV,
so
I
can
create
that
same
instance
ID.
So
it's
going
to
attach
to
that
element
and
I
will
only
output
a
router
outfit
and
then
all
of
the
other
components
will
be
positioned
in
that
router
all
set
based
on
this
state
and
based
on
the
different
set
of
routes
that
we're
using
and
then
afterwards,
when
I
run
everything
just
logically
gets
there.
Now,
let's
try
to
make
it
happen
again
and
see
if
there's
not
something
that
breaks
otherwise
breaking.
C
Let
me
just
I,
don't
know
reload
that
paper
just
go
back
in,
though
something
I
want
go
back
here.
We
know
that
I
know
why
it's
actually
working
here
and
not
working
in
the
hosted
word
bench,
that's
kind
of
very,
very
weird,
so
I,
don't
know
why
anyway,
I'll
make
sure
that
this
is
not
breaking
for.
Anyone
who
usually
not
so
here
I
would
just
connect
to
my
data
when
I
specify
the
list,
the
list
name
and
afterwards
were
actually
good
to
go,
and
it
just
connects
to
everything.
C
So
if
I
can
show
it
right
here,
we'll
have
one
app
component
in
where
you
will
add
a
component
that
actually
only
adds
the
own
component
and
the
title
in
where
you
ask
the
list
component.
So
it's
rendering
the
list
name
content
Plus
this
set
of
data
is
being
fetched
by
a
SharePoint
or
by
that
macht
object.
The
cool
thing
is
that
this
would
work
with
any
type
of
components,
any
type
of
angular
applications.
C
You
already
did
I
see
a
question
now
in
the
window,
does
it
work
with
angular,
CLI
and
generated
components
and
services?
This
is
something
I
need
to
work
on.
I
would
say
yes,
but
I
haven't
tested
it
enough
to
assure
that
it
will
work,
it
would
work,
it
will
not
work
using
empty
sirs,
though
so
we'll
need
a,
and
unless
we
can
override
what
ng
serve
does
so
and
you
see,
I
could
work
as
we're
just
setting
up
stuff
and
just
creates
everything
together
and
put
the
files
in
there.
C
So
as
we're
only
using
out-of-the-box,
angular
application
code,
I
would
say
yes,
but
it
needs
to
be
tested
out
before
we
can
move
on
to
say
our
really.
Yes
on
that.
So
that's
one
of
my
next
steps
to
make
sure
that
we
can
use
the
angular
CLI
as
I
think
it's
a
good,
a
great
approach
and
it's
gonna
streamline
the
process
a
lot
instead
of
copying
and
just
creating
a
components
all
the
time.
It
will
just
work
pretty
nicely.
So
that's
pretty
much
what
I
add
to
to
show
today.
This
is
still
work
in
progress.
C
We're
still
working
on
that
I
think
now
we
should
have
a
fairly
good
version:
1v
1.0,
that
works
on
a
lot
of
scenarios.
It's
now
I
said
it
actually
doesn't
work
on
the
ocean.
Workbench,
but
that
is
that's
a
first
for
me,
so
that's
kind
of
very
weird
why
it's
I
don't
know
why
itself
working
I'll
make
sure
that
the
code
is
working
and
I'll.
Let
you
know
if
not
there's
a
all
documentation
is
available
directly
on
the
under
github
repo,
so
you
can
actually
go
in
and
start
playing
with
that.
That's
it.
B
A
A
So
thanks
to
Sergey
thanks
to
Sebastien,
those
are
some
really
cool.
Demos
hope
folks
found
that
interesting.
If
you
haven't
checked
out
the
configure
method,
please
do
that
and
if
you
haven't
checked
out
the
angular
4
stuff,
they're,
really
cool
capabilities,
so
very
cool
work
from
both
guys
and
great
to
see
that
and
of
course,
I
know,
all
of
you
are
also
doing
very
cool
stuff.
So,
if
you'd
like
to
demo
it
please
do
get
in
touch
and
let
us
know-
and
we
do
have
a
little
bit
of
time
left
for
some
open
discussion.
A
A
So
if
those
haven't
been
updated,
they
will
be
and
we
will
get
the
monthly
calls
and
the
other.
The
other
special
interest
group
calls
invite
updated
and
those
will
be
continuing
on.
Of
course,
thank
you,
Chris
really
Congrats,
and
thank
you
everybody
for
joining
us
today.
It
was
a
really
great
call.
As
always,
our
next
meeting
will
be
August
17th,
that's
going
to
coincide,
probably
about
with
the
target
I've
got
on
my
head
for
the
August
monthly
release.