AngularJS Tutorial - Part 8 - Creating/Updating in an End-to-End Application. Video Lecture - IT & Software

welcome back to part three of this
tutorial on creating a crud application
in college is in parts 1 & 2
we created a application which is able
to display a list of to do this which is
taken from the database and also gives
us the ability to search them to sort
them and also to paginate them the data
is coming out of a sequel server
database goes through a REST API built
with c-sharp using the web API framework
and is then displayed using angularjs
templates and controllers and directives
we also showed how to do this with a -
and sequel Lite back-end today we're
going to add the ability to create
delete and update to Do's
after that we will have a basic working
crud application today's tutorial is
written up on my blog as per usual and
we'll be looking at part three to get
started let's add the ability to delete
in order to delete how to do we're going
to have to have some button that we can
click in our interface to delete a
particular to do so we'd like an icon
next to each of arrows that we'll be
able to click on to delete so in order
to add an extra cell to our table I need
to add a to D and then we want to put an
icon in there
and let's see what we have there's no
delete by the looks of it is there
removed there is a remove okay so we'll
add an icon called remove so that's
going to add an icon to every row now we
need that to be clickable so we're going
to have to surround that with an a tag
so that's going to make it clickable and
when you click it what's going to happen
well we're going to need ng click that's
the thing that lets us call a method in
dollar scope and we put the method name
here so let's call it delete so that
should be enough to get us a clickable
icon although it won't do anything yet
let's just make sure that's working
there we go so we now have a little X at
the end of each row and we click on it
it's going to delete something now
what's it going to delete well we're
going to delete my ID that's the way our
Web API works our REST API now one
approach to this would be to actually
pass in that ID here so we could
actually say delete and pass in our ID
here but that sounds said of course
that's going to have to be like so but
actually what put its little code in the
template as possible and really have
that working on the backend so let's see
if we can figure that out in there
controller so to start with let's add
this delete method to our controller so
here's our controller here
it's had a new function called delete
and as we discuss it's not going to take
any parameters so somehow we need to get
the ID of the current to do now how are
we going to do that well as we go
through this ng-repeat
each of the items ends up in this object
called to do
and interestingly this is actually going
to be inside its own scope so ng-repeat
actually creates a whole separate scope
for every single role and inside that
scope there will be something called to
do however that scope is not accessible
normally in the controller just by
typing dollar scope because that scope
actually refers to this list controllers
dollar scope so somehow we have to get
access to the particular ng-repeat
dollar scope how do we do that well the
trick is to use the JavaScript keyword
this if you've used javascript much
you'll know that this is a bit of a
mysterious beast in some ways until you
understand exactly how it works so let
me explain first exactly what this means
when you are inside an object this
actually refers to whatever is before
the period sign before the full stop in
the thing that's calling you now in this
case the thing that's calling us is
delete and delete actually because it's
inside an angular directive actually
refers to dollar stroke dot delete and
in fact because we're inside a repeater
here inside ng-repeat it's actually
referring to the repeat scope so it's
not referring to the list controller
scope it's actually variant to the
repeater scope so that means that since
this is dollar scope dot delete inside a
repeat that means that inside that
method this will be referring to the
ng-repeat scope that means that we can
actually type this dot to do inside here
and get access to this particular object
so if that all sounds a bit confusing in
terms of why it's the case then you can
just take away the main message which is
when you're working with a ng-repeat you
can get the
object that you're currently working
with by simply using this inside any
method that you call from that repeat so
we want to grab hold of the ID from
there so let's do so now so now that
we've got the ID we need to actually do
the deletion so to do that we use our to
do object as per usual that thing that
comes out of dolly resource and in that
we can then call delete and we need to
tell it that we want to delete a
particular ID and the one that we want
is the one we just stuck inside ID so
that should be enough to actually get
the deletion to happen let's test it
shall we so let's try to leting the one
from April 22nd now when I click on it
nothing appeared to happen but let's try
refreshing that nothing did happen
oh here's probably the problem my ID is
capitalized incorrectly we could have
checked that in the debugger easily
enough otherwise but let's see if this
now works so click here ok that's good
so I didn't get any console error we
still actually see it here but if I f5
to refresh you can see it's now gone so
in other words what happened is we have
successfully deleted it from the
database but I had to do a refresh to
get that deletion to actually appear now
that's of course not ideal we would
actually like it to disappear from this
view as soon as I click it and ideally
I'd quite like it to actually fade out I
think that's a good user experience to
actually observe that deleting in front
of us now in order to get something to
fade out we're going to have to do some
animation and the best way to do that
probably is with jQuery in general it's
considered a bad idea to you
things like jQuery inside your
controller because your controller
really shouldn't be working with the Dom
shouldn't be working with your HTML
that's really for directives but in this
case I only have a single line of code
and I think it's really the easiest way
to do it so why don't we try that here
so to do that we're going to need to
have a unsuccess callback so function
just like we've had before and out on
success callbacks in this case we're
going to go we're going to use jQuery
and there's going to be something that
we're going to fade out so all we need
to do now is figure out what that
something is so that something is going
to have to be the ID we use a hash here
of the particular rule that we want to
get rid of so that means that we need to
add an ID to each row so in this case
I've just added an ID which is to do
underscore and then the ID so now that
we have an ID on its row we can now
refer to that here it's going to be to
do an underscore and then our ID so
let's try that shall we refresh let's
try getting rid of the one from this tip
September the 8th 2012 click here and
you can see it has in fact as appeared
now let's try pressing f5 to refresh and
make sure it's still gone yep it's still
gone June the 11th
let's try refreshing still no June the
11th ok great
so that is working as we expected so now
that we have delete working let's try
get out working so in order to add
addition or to do we're actually going
to have to create another template for
that because we want a whole nother
screen where you can add that
information now in to get to that
template to get that additional template
we're going to have to have another
route which we can go to there's going
to need another controller and it's
going to be need another template so
these are all the things that we're
going to have to add in order to get
this new functionality working and we're
going to have to then be able to
actually call that from our index from
our list of HTML so why don't we start
as usual with creating the button that
people are going to have to click so one
nice easy way to do that would be to
simply add it to the top of our remove
items list will have a add item button
sounds pretty straightforward so we add
a table header and again we're going to
have to add a icon and let's see if
there's a plus sign yes there is a plus
and a plus sign I don't know what the
difference is and so as before we're
going to have to pop an a around this
now this time we don't want an ng-click
entry click is to like call a method to
make something happen not to go
somewhere else to go somewhere else
you have to use href where do you want
to go well all angular href Saar going
to start with your hash because hash as
far as your browser is concerned means
that you're staying on the same page and
when you're building a single page
application such as with angular
effectively as far as the server's
concerned it's all coming from the same
page it's all coming from indexed at
HTML so that's why we always start with
hash and then after the hash we have the
route that you want to go through so we
can create whatever we like so let's
call it you
okay so now that we've created this
hyperlink here to go to new we can see
what that looks like and you can see
here in the bottom left that it's going
to go to index dot HTML hash slash new
so we now need to add that route to
angular we know how to do that because
we've done it before
it's slash so we're now going to add
slash new so we need both a controller
and a template so we could create a
create controller and a details template
so first of all we're going to have to
create the create controller create
controller let's just leave it empty for
now and try and get to a point where at
least we have a basic basic
functionality working that we can
actually at least go to that template
and see it so the next thing we need to
do is create our details HTML template
so this is going to be a form the form
will have a standard bootstrap form set
of classes and kind of layout that's
since that's pretty standard I have a a
template for that so I'll just create a
new form and we're going to have an add
button on the form so this is a standard
bootstrap form now if you go to the
bootstrap documentation you can see what
each of these classes does and in my
bootstrap form I need to create a label
and a field for each of my text due date
and priority so once again we're going
to use standard standard kind of
bootstrap set of classes and elements to
do that so let's use
the template I've created for that so
we're going to first of all do the text
so here we have the label for that let's
just say to do let's create another one
then
which will be due date and with that
let's change the label just to be Jew
and then finally we're going to have
priority priority now one thing to point
out with priority is that we don't need
to use just input type equals text
there's actually all kinds of other
types we can use here as defined by
html5 and for example there's one which
is input type equals number that's going
to ensure that we actually put in some
more appropriate data in here so that
somebody doesn't insert something that
will not be a valid priority as you'll
see when we run it it also gives us some
nice numbers specific functionality so
let's have a look at what else is going
on here so as well as our standard
bootstrap classes and the usual labels
and so forth we have a couple of extra
things the first is interesting its ng -
class we haven't seen this before and
this is really neat ng cache class takes
a JavaScript object where the keys are
the classes that you want to add and the
values are things that return true or
false where if it's true then that class
will be added so in this case error will
be added if form priority dollar invalid
is true we'll look more at validation in
a future tutorial but for now just
recognize that in your form the field
the field the the field name dot invalid
property will be set to true if your if
your input does not validate correctly
so for example in this case if you
didn't have a number in it it won't
validate correctly which is going to
cause the class error to be added so
let's try this out that's looking pretty
good at this stage so we'll refresh this
and we'll try clicking this plus sign
and that should take us to our new
template and yes indeed it did and you
can see here that the special type
equals number has added up and down
arrows I can type a two into here and if
I type something that's not a number you
can see it goes red that's that error
class being added to it and I can also
increase and decrease that's all the
functionality we have so far one other
thing I might do for looks is to just
add a header on top
like so there we go
so the next thing we need to do is make
it so that the add button actually does
something and we know how to make that
happen we do that by using ng click so
let's use that to save this new item
okay so let's go and create and save
inside our create controller so save
doesn't take any parameters and what we
want to do is we want to call to do
that's in dollar that's our dollar
resource object remember and that's
going to have a safe method now what do
we want to save well here's where
something pretty amazing just happened
look here at the ng model for each of
our fields it's item text item dot due
date item top priority what is item when
we first load this up item is not
anything we never set it to anything but
as soon as I put anything into one of
these text boxes it then tries to set
item dot text and angular is smart
enough that if item doesn't exist it
will just create it for us as an empty
object and then immediately set dot text
so the neat thing is that once this form
starts getting filled out dollar scope
item is automatically created for us we
know it's in dollar scope because
everything inside an angular directive
value is always considered to be inside
dollar scope dollar scopes the way that
we share information between our
template and our controller so actually
all we need to do is save our item so
after we save it successfully then
obviously we want to go back to our list
in order that we can see it there so we
need to now add our on success callback
and although this is a single page
application there are different routes
or different templates that we need to
be able to navigate and angular handles
all of
that complex history management and
everything for us and it's all
obstructed away inside this special
service called dialog location so you
can look in the angle of documentation
to see exactly how that works in this
case we're just going to use the path
method and tell it what route we want to
go to we're just going to go to slash so
once we've saved it successfully we're
going to go back to slash so let's see
if that works shall we to add a new to
do we're not going to worry about the
due date for now because that really
needs a date picker in a future tutorial
we'll learn about how to add a date
picker to this it's actually as simple
as using a pre-existing directive and
adding a single attribute to our import
will see that in practice later we'll
give it a proud of zero we'll press add
and nothing happened let's try it again
add nothing continued to happen ok let's
find out why not so create control has a
dollar scope let's save oh here's the
problem details to HTML has not been
saved
silly me so let's refresh and track it
alright I assume is not defined at
object dollar scope dot save and I think
I know exactly what the problem is here
it's not called item of course it is
dollar scope dot item because it was
created inside our template let's
refresh that try again there we go
so that is successfully added this with
a party we requested and then we can
donate it again so now we have to leet
and add working correctly
in order to create the ability to edit
these two dues we first of all of course
need a icon that we can click next to
each one
so let's simply copy the delete one and
replace it with there's no update is
there an edit there is an editor let's
replace it with an edit now of course in
this case we actually have to go to a
whole new screen to do this editing so
we're going to need href for that and
before it starts with a hash and this is
where we can now put in any route we
want to so call it edit and of course
that means that inside app j/s we need
that route to be added in here so edit
so in this case we're going to have our
new controller editor controller and we
can use the same template whoever
details to HTML should be fine it's got
basically the same structure as what we
want so let's now create our edit
controller so there we've got our edit
controller and in this case the template
actually the template actually needs to
be prefilled in with the item we clicked
on so what that actually means is we
need to do more than just say href
equals edit we actually need to say
which idea we editing and let's put that
into the actual route or the actual URL
so of course the ID we're editing is
simply to do to ID so let's put it there
so that means that if we have a look at
how that looks on the page now
we can see now in the bottom left that
there's now the ID is being appended to
each one so what we now need to do is we
need to tell angular that we actually
want to save the value of that to use it
later so to tell it that we want to put
something from the URL into a location
to use later we can start with colon and
then we give it the name of the
parameter so this is going to now say
okay there's going to be an extra thing
in the URL and I want you to save it as
something called edit ID so we now need
something that allows us to find
information from those root parameters
and in fact angular has a service for
that it's called dollar route params so
remember this is really neat thing about
dependency injection which is this idea
that anytime you want access to some
service which angular provides you can
simply add it to your parameter list of
your controller give it the appropriate
name and it will automatically be
created and passed to you and in order
to find out exactly how any of these
services work you can pop into the
documentation and look it up here is
route params and there's a nice example
here of how to use it and as you can see
it's just simply going to create a
standard JavaScript object with the key
value pairs of whatever we named each
parameter along with the value that it
was given so in this case our ID is
going to be equal to route params dot
and we call it edit ID so that's going
to be our ID so we now need to set our
dollar scope dot item to be that object
and that's really easy to do isn't it
you just go to scope dot item
equals and this is where we can use our
to do
upsie-daisy how to do Plus this dollar
resource object and we can call get and
pass in an ID to be set to the ID
parameter and it should be as easy as
that so that should be enough at this
point to be able to display whatever we
want to inside our details page so let's
try it shall we so we'll click on let's
say to do number nine and we can confirm
here here is to do number nine the date
does not look very nicely formatted
we're going to leave that for another
time both in terms of time zone issues
formatting issues end date using a date
picker to be able to edit this nicely
and we're going to look at using
directives for that but for now observe
that we're at least able to display all
of these something I notice here is for
this add text here and here is not
appropriate for what we're now doing
which is updating so let's change it so
in our details to HTML rather than
saying add let's add a parameter
remember it's going to be dollar scope
dot something and let's call this action
so dollar scope dot action is going to
be where we're going to stick the name
add or update and we're going to change
it in the button text as well so now
that we've done that we can go back and
say alright I want you to set scope dot
action for here to be update and you now
create a controller
oopsy-daisy
let's copy that and paste it and in our
create controller we'll use add
let's see how that looks now there we go
update to do and update button
so finally we need our what's the button
going to actually do when we click on it
it's going to call something called save
in our controller which means in our
edit controller we need a save function
now previously our save function called
to do dot save what is to do that save
do well because to do is just the return
of a dollar resource function we can see
in dollar resource what that does dollar
resource if we scroll down tells us that
save is going to call the post method in
our web api and if we go and have a look
at our web api so you can see what's
going on in our api host is the thing
that actually creates say you to do but
in this case we want to use port because
port is the thing which saves an
existing to do and we get passed in the
ID and the to do to save so how do we
call port interestingly enough there is
no put in the default list of stuff that
dollar resource provides and that's why
we've actually added an additional thing
here which we've passed to our on a
resource call and this is a list of any
additional methods we want to add and
what HTTP reverb they correspond to so
we now have added something called
update so that means that we can call to
do update
and so first of all we need the ID that
we want to update and then we need the
item that we want to update it with so
that should be enough to get that
working the only other thing we want to
do is that if it's successful we want to
go back to our list of - dues where we
can see the new one being added to that
list so we know how to do that already
remember it was just dollar location dot
path and where do you want to go we want
to go to the route the list controller
and the list template so let's see how
we're going now
so we'll refresh this and let's update
this priority one for a to do number
nine and change it to 30 zero update and
we can see yes indeed there is to do
nine is now priority zero and you can
say it see that it's automatically
sorted this appropriately for us this is
one of the nice things about using an
MVC framework is you don't have to worry
too much about the particular order that
things happen you can just describe how
you want things bound what data you want
bound to what HTML elements and it
handles all this kind of dependency
stuff automatically for you you can see
here how easy it was for us to add our
create update and delete functionality
to our application in general when
you're writing a angular application if
you find yourself using kind of an
unloaded method or manually updating the
view from the controller or vice versa
that generally suggests that you're
doing something in a way that's not the
way angle is designed when you're using
angular is designed really you should be
doing everything pretty declaratively as
we have been here
angular attempts to make it easy for you
to do everything in that way however in
order to do so it does require become
familiar with all of the stuff that
angular provides for you and it is quite
a substantial API as you can see but all
of these things are there to make your
life easier so as you learn more and
more of the system it becomes easier and
easier so now that we have a complete
working crud application where we can
sort search paginate create delete
update and view we're now at a point I
think where we should be thinking about
getting this into a version control
system so that we can keep track of the
changes that we make and we should be
trying to get it up on the web so other
people can use it so those are the two
things that we'll be looking at in our
next tutorial
thanks very much for keeping with me
this far