AngularJS Tutorial - Part 7 - Creating End-to-End Web Application Video Lecture - IT & Software

welcome back to our series on creating a
complete end-to-end web application
using angularjs on the front end and a
back end written in c-sharp we've also
looked at a Python version of the back
end remember the back end is very simple
all it does is take some data out of a
database and serve it up using JSON to
our front-end it's in that client side
where angularjs does all the heavy
lifting in terms of the logic display
and so forth and that's where the focus
of these tutorials has been and will
continue to be so far all we've managed
to do is display a list of our to Do's
this is where we got to last time this
list of to dues is coming out of a
sequel server database or if you're
following through the Python version it
was a sequel like database has been
served up over JSON and displayed we can
see exactly how this is happening by
looking at the network timeline if i
refresh it gives us a really good sense
of what exactly is happening here we
asked for indexed at HTML in index dot
HTML remember consists of just a very
small amount of code all it does is a
bring in some JavaScript our own
JavaScript is amongst those it brings in
the bootstrap CSS and it contains a
couple of attributes that tell angular
to display our templates within this so
you can see that from index dot HTML
that is bringing in jquery angular
bootstrap i wrote an application
javascript and the template we've
requested and then our controller has
requested the list of to do is from our
api
said get slash API slash to do and that
brought back all of these to dues that
was then displayed in the template it
was displayed in the template showing
for each item the fields that we
requested in a table yet the last
tutorial we talked a bit about scope
which I said is one of author perhaps
the most important part of angular I say
perhaps because maybe even more
important than that is the concept of
directives so before we go into more
detail around building the application
today let's discuss a little bit about
exactly what directives are and why
they're so important you'll remember
from our last tutorial that in Doc's
index dot HTML which brings in angular
and our application causes two things to
be attached to each root both some code
which is in these controllers and the
actual HTML pages which are in these
templates but what really is happening
here in particular how is it that
angular can see things like ng - repeat
in our template or ng - app or ng - view
and make things happen these are not
attributes which are actually defined in
HTML how is angular causing them to make
stuff happen either by displaying things
in a different way by changing the HTML
or by adding behaviors through
JavaScript
well what's actually going on is that
angular puts an event handler which gets
called as soon as the Dom is completely
loaded and that event handler goes
through all of our HTML and in fact it
goes through the Dom and it looks for
special tags or attributes or classes
and special meaning that those tags or
attribute or classes or things which
have been registered with registered
with angular as being special as being
things that we want angular to handle
and things which are registered in that
way are called directives let's take a
look at the angular documentation you
can see at the very top of the angular
documentation is a list of directives
and you'll see there's basically two
kinds some which are the same as
existing HTML attributes or elements and
some which start with ng you'll notice
that the ng ones is camelcase and if you
look at ng app for example you can see
that the way that these camelcase
names get used is by taking where any is
taking wherever there's a capital letter
and lower casing it and putting a dash
between us so ng capital a P P becomes
ng - app like this so these directives
are perhaps the most important
foundational thing you need to
understand to actually understand what
angular is doing and how it's working
and these ng versions are elements and
attributes and classes which angular has
effectively added to HTML and they each
have their own behaviors so for example
ng click is something that allows you to
specify custom behavior when an element
is clicked
well we've looked at mg repeat already
so his ng-repeat
in the documentation instantiates a
template once per item from a collection
so we've seen that used before what
about these ones which overlap with
existing HTML well what happens here is
that the angular directive causes the
existing HTML behavior to slightly
change so in this case the angular
compiler goes through the Dom finds all
the a tags and modifies them in some way
and in this case it ensures that the
default action is prevented when H ref
is empty
anybody who's programmed in JavaScript
before will recognize that as being a
pretty handy default behavior that is
created
well actually default behavior that it's
removed in this case what's really
interesting I think about angular is
that you are not limited to the
directives that they've provided the
angular authors in fact you can add your
own let's say I very commonly had a a
header which looks something like this
maybe those greetings from somebody to
somebody
and maybe we want to now create
something in HTML that can automatically
build that using something like a greet
tag this is obviously a very silly
example but it's a very simple one to
get the idea so it could be greetings
from Jeremy to audience so how would we
create that well interestingly it really
couldn't be more straightforward there
is something called dot directive in in
angular and you can see I've got a
template for it which basically includes
all the bits I might want so we create a
directive called greet and literally
this is now registered with angular and
tells at any time it sees this we would
like to attach some special behavior to
it maybe let's make this a bit simpler
and use it div so we'll use it here
okay let's try that so there's a whole
bunch of things that we can do but the
very simplest one let's get rid of
everything except the template in the
controller because the very simplest one
basically lets us insert our own
behavior and HTML by having a template
in a controller which is reusable so in
this case our template would be the
contents of this and we're going to
replace these with these things in
handlebars so we'll go from and
something called from and we'll call
something to
so now that we've done that is as simple
as remember these things we're going to
come out of Dallas cope so let's put
them into dollar scope let's go talk
from equals and we can just grab the
attributes and find the one caught from
and dollar scope type two and we'll look
at the attributes and we'll find dollar
attributes dot I think we've got it
Greek so we've now got a controller
we've got a template and let's see if
that now has the behavior that we
requested so we'll get rid of our h2 and
so now all we've got here is a div in
which we've got our own new directive
let's try that and you can see it's done
exactly what we hoped it would do now
that's that's obviously a very simple
example but you get the idea which is
using nothing but this template and
controller we can insert her own code in
our own HTML by searching for our own
special directives and with the other
directive options that you can see here
you can actually put all kinds of other
functionality for example this link is
perhaps the one that's most commonly
used that calls the JavaScript on the
Dom element after it's being created and
that's where for example you could call
a jQuery UI method or something like
that and then we'll certainly come back
and create some of our own directives
that are more interesting than this
later in this series so for now now that
we've learned about really what's going
on with angular which is to go through
the Dom finding special elements special
classes and special attributes which
have been registered with angular and
giving them special behaviors are these
things been called directives and
understanding that angular comes with a
whole bunch of these which gives us lots
of really useful functionality out of
the box let's now try and use some of
this
to add some functionality to our
application and we're just going to use
pre-written directives for now rather
than creating our own so at this stage
all we have is something which can
display a list and we want to add some
additional functionality to it we would
like to get a sorted search it and if it
gets really long we'd like to be out of
paginate it so we don't pull everything
down from the web every single time we
look at this page so let's start
creating that functionality and let's
get rid of our greeting there we go so
the first functionality I'm going to
create is sorting now functionality like
that since it's working on stuff coming
out of the database needs to be handled
in two places it needs to be handled
both in our web application in c-sharp
and it also needs to be handled in
JavaScript so the JavaScript is going to
have to call a method to sort or search
or paginate and handle what comes back
and our web application is going to be
able to have to handle those parameters
appropriately now sorting searching and
paginating is so common that flask
restless actually does all of that out
of the box so we don't have to add any
code to the Python version
unfortunately however Microsoft although
they also had all of that functionality
out of the box in earlier versions of
Web API in pre-release versions they
actually took it out of the released
version for some strange reason so we
got to put it back in and the way we're
going to put it back in is we'll just go
to my blog to a part two and you'll see
here something called get to do items
we're just going to copy that and we're
going to paste it into our controller
replacing the existing get API slash to
do so here it is here and you can see
that this has now got the functionality
we've requested a consort in ascending
or descending order back to
filled it can have a search and it can
also paginate in other words it can
limit to a certain number of Records and
it can start at the end thread cord with
this offset parameter it's not very much
code it's just eight or ten lines
although it's slightly yeah it's not the
USDA looking looking code but it does
the job and it's it's nice that we can
do it in so little code so until
Microsoft gets around to adding that
back to Web API we're going to have to
modify Microsoft's code each time we
create a new controller just pasting in
this and of course you'll need to change
the class name to your class name so now
that we have that that's the only change
that we need to make in c-sharp we now
need to make some changes in the
JavaScript to actually get this to do
something so since we're doing sorting
we need to pass in a sort parameter and
the is descending primitive so let's try
and start as simply as possible and that
would be to add a default search order
so let's say to start with we're going
to what so we go vis you're going to
need two things in dollar scope one for
the order and one for the direction so
let's create order and let's by default
sort by priority and let's also do
direction so we could say sort
underscore Direction actually let's call
it is descending that's a bit easier
since it really it's a boolean isn't it
so it's ascending and let's use false
for that so it sorts by ascending so
lower numbers will be considered more
important I think that seems reasonable
so now that we've set those we're going
to need to make sure that we actually
pass in these things to our Web API so
at the moment we're not passing in
anything at all
so how do we pass things into our Web
API well let's check the angular
documentation and remember that the
actual API on the client side we're
using this thing dollar resource to call
it so let's find out how dollar resource
works so if we scroll down through the
dollar resource documentation we
eventually get to what it returns which
is something that we can call get save
query etc and here we can see that for
the get actions the first thing that we
can pass in is parameters and here's an
example of it here a parameter name and
a parameter value so in our case our
parameters are sort and desc
so let's pass in sort and that's going
to be dollar scope dot sort order and
then we've got desk which is going to be
dollar scope dot is descending so we've
set them we're calling them in the
controller we are doing something with
them you can see here if sort is not
null or empty then we order by with the
appropriate descending or ascending so
that should be everything that we need
so let's see if we now have that working
so we can see we've got a problem
desk equals undefined and sort equals
undefined so let's find out why it is
passing in these unhelpful things and
here's the problem we're calling search
before we've set them so let's move that
to the bottom and really we're always
going to want that at the bottom
that's great so here we've got it sorted
by priority so the next thing we want to
do is we want to make it possible to
click on a header and have that change
the sort order so let's think about what
that's going to do so we're going to
have a a function that the HTML template
will call and that means that that
function needs to be in sight dollar
scope so there's got to be a function
let's call it sort and it's going to
take in the parameter which is what
column do I want to sort by let's call
that column and I think what we want to
do is have it so if you click on it once
then it will sort ascending and if you
click on it again and again it will just
change the sort again and again for now
let's just get it so it's sorts
ascending every time so we're going to
now go dollar scope dot sort order
equals that column and now after we
thought we're going to have to recall
search
okay so we've set the sort order so the
thing we've been past so now we just
need to make sure that clicking on a
column will actually call this method so
since it's inside dollar scope that
means that we should be good to go all
we need to do is add a a tag we don't
need an href what we need is a ng click
and we need to call sort so in this case
we'll be sought by let's check what it's
called before I type that sort by text
okay so the first column is called text
well of course I could have seen that
down here easy enough couldn't no anyway
that's fine so sort by text so let's now
refresh this we can see this is now
hyperlinked let's try clicking it now
and we can now see that it's sorting
it's sorting in a slightly strange order
just because I filled it with numbers
but normally we would have text in here
not numbers this is actually meant to be
the description of the to do so each
time I click on it I wanted to change
order so let's do that so in other words
what I'm saying is if these two are
already exactly the same then what I
want to do is simply change the
direction
so to change the direction let's just
reverse is descending otherwise
let's set the sword order and set the
direction to being ascending let's try
that so the first time I click it yep
the second time yep that's great okay so
that's everything I want there so the
only other thing I might do is to make
it so that a little icon will appear
telling me which direction I am sorting
in so icons are rather conveniently
available inside bootstrap so let's
start by finding an icon that we like so
to show icons in bootstrap you simply
use the I tag and you give it a class of
icon and so we're going to have to have
a arrow down and we're also going to
have an arrow up now we need to display
these depending on whether or not
something happens so we're going to have
to wrap them in a span and we're going
to display them or not depending on
whether something is true or not inside
down the scope so to do that we use ng -
show and that simply takes an expression
that will evaluate to true or false so
in this case we will show this if let's
have a think about that so we'll show
that if sort order is to do and also
sort what is descending
and since this is down that would be
true and we have basically the same
thing for the other one except of course
this now becomes false so let's try that
so currently there's no icon shown
because we're not sorting by to do and
now that I've clicked on it no it's
still not showing let's try and figure
out why no because of course it's not
called to do with it it's called text
let's try it now okay so the first time
I click and then there we go the second
time I click that's great so we can now
use that for in fact we can basically
use that whole thing for each one of our
column headers so this one's going to be
priority
and then the last one is going to be due
date
there we go so hopefully what you're
thinking at this point is that seems
like a whole bunch of duplicate code and
you would be right so what I've actually
done in the written version of this
tutorial is I've shown a directive which
automates all of that we're not going to
write it now but let's just take a look
at it and then you can try this for
yourself so you can see we've done
basically what we had last time which is
we had a template which does all that
stuff and in this case I've also pulled
out the logic around whether to show or
not into a script method and then in the
controller we define do sort and do show
so it's really pretty straightforward to
turn that into a directive in order to
save us all some time I won't do that
now and have you watch me but I'd love
you to see you try it for yourself
so I'll just refreshed we can now see
this is showing correctly that's very
good and if we click it twice
so one of the nice things here is I love
the way even when i refresh so I haven't
flicked anything now my default sort
order is priority angular has
automatically figured out that it needs
to put this arrow here because this
ng-show directive it's automatically
figured out when it has to check that so
all this kind of dependency management
around when do you have to test for the
truth of things or when do you need to
run things it's all handled
automatically and that's certainly
something that I look for in an MVC
framework and angular does that really
nicely
okay so we have sorting working what
should we do next I think for our next
thing we might do pagination so
pagination we need to have an offset and
a limit and each time we get more we're
going to have to append it to our
previous list I should mention the kind
of pagination I'm doing here I'm not
going to do that old-fashioned style of
pagination where you get a whole list of
pages at the bottom from
one 100 and you click which page you
want now I much prefer the approach to
pagination which is you can basically
ask for more items to be shown this is
done for example in infinite scroll type
frameworks where as you get to the
bottom it automatically loads more or
else there could just be a hyperlink
which asks to show you more I'm going to
use the hyperlink approach for now just
because it's going to be a little bit
easier to explain so let's put a
hyperlink at the bottom and so again
we're going to have a ng click and
that's going to do a show more now we
need to write that of course and then
some text for it there's a equals sign
there of course okay so we've got a
something to click on that's basically
all you need to do on the template side
we need to now create this show more so
if you think about it logically what is
showing more going to do it is going to
be such that each time you click on it
it's going to load another however many
let's say 20 and other 20 things out of
JSON API and going to append them to
whatever is already displayed so
whatever is already displayed is called
dollar scope but items now again let's
put some some defaults here so the how
many things to load at a time
I'm pseudo Z let's call it limit let's
say 20 okay and then we have what's the
offset to start with now of course it's
going to be zero so we now need to
create our show more method and so let's
do that now because we're calling it
from the template that means it needs to
be inside dollar scope
so dollar scope type show more doesn't
have any parameters so what do we want
to do here basically we want to go the
offset should be equal to whatever it
was before plus another 20 and then
after we do that we now want to rerun
our query basically two queries or more
so that is called scraped let's search
at the moment there we go so the next
thing we need to do now is to use these
offset and limit parameters inside our
query now interestingly though what we
want to do now is not just go Dollar
scope dot items equals to do a query we
actually want to wait for the query to
finish running and add those items to
the end of what we already have so the
if you look at the dollar resource
documentation on angular you'll see that
actually you can have this optional
success callback so we don't have to say
in fact you can see it used right above
you don't have to say actually that's
just look here you don't have to say
left hand side equals the result of the
query instead you can say run the query
and when it's finished call some
function and that's where we write this
function so it's going to be passed the
actual data that it's received and
that's where we could do something with
it so they just continue to work as
before it just be like so dollar scope
Titans equals whatever data we'll give
them before and that will continue to
work just like it used to but we
actually want to do something else now
we actually want to say okay path in
our offset and pass in our limit
and so now we're going to be given an
extra whatever 20 items that we want to
add to the end of dollar scoped or items
so we now need to not replace it but
concatenate it with their new data so
this time we should only get 20 back
however we have a problem which is
currently we trying to call concat on
something that's empty so let's make
sure we started out not being empty
ok let's try it again that's better you
can see we just got 20 this time let's
try clicking show more that's great so
now we've got 40 and show more again now
that's actually I only have 50 in here
so one nasty thing with this UX that
still says show more when there's no
more to show so hopefully you can figure
out pretty easily how to get rid of that
all we need to do is add an ng-show and
let's create something called has more
so how do we know if there's more well
more or less we could basically say well
if we manage to pull back at least 20
last time so if we manage to pull back
exactly 20 last time then there's
probably more so let's say that to start
with it's got any more equals true let's
create the function
has more I mean maybe this is overkill
maybe we hardly even need a function but
nevermind so we'll just go return more
so I guess we probably could have done
without a function at all that's okay
that should be answered dole escape of
course and now we need to check to see
whether we got at least 20 items or not
and if so we will say that there's more
to get so we could say here or equals
data dot length equals 20 okay let's see
how that looks
so refresh all that so this is showing
that's good that's still showing that's
good that's great now it's disappeared
okay so that's going pretty well so we
now have pagination working nicely and
we now have sorting working nicely so
the only other thing we need to add is
search so if you look at the bootstrap
documentation they actually have a nice
little example of how to create a
reasonably nicely styled search form and
so I've actually turned that into a
template so I'm just going to use that
which is my bootstrap search template
I've also put some Spacek stuff in here
for my ng-click as well so your search
template can really look pretty much the
same every time until you want to get
more sophisticated with styling it let's
have a look at what's in the template so
it's a form with the appropriate
bootstrap classes to make it look decent
and the actual input box where you're
going to where you're going to type the
search it has an NG model of query so in
other words anything that we type into
this is going to end up inside dollar
scraped query and I think we put in $2
script or query is going to end up in
this text box and rather nicely
submit the sorry the reset button we
have set to be disabled if not query in
other words it's disabled if there is
nothing typed into the query box or more
precisely if there is nothing inside
dollar scope query so in fact I'm going
to show you that even without adding any
JavaScript we already have
Sonique behavior which is look that's
currently disabled and as soon as I type
here it's enabled and as soon as I
delete all the characters it's disabled
so you can see with the angular
directives you can actually do quite a
lot even without any code and have
everything work quite nicely and of
course you can add your own directives
to add your own functionality again so
that you your designers and so forth can
actually add functionality to your
applications without having to write any
code I think that's really cool so in
this case when we click on the search
button
we're going to call something called
reset and when we click on the reset
button we're going to call something
which is basically to empty out the
query and then call reset again
so let's write reset so what's reset is
going to do is it's going to it's going
to really start again in terms of what's
displayed so if I've pressed show more a
bunch of times and then I do a search
then I really probably only want to show
the first end of that search so I'm
going to grab all of this stuff here and
I'm going to move it into reset
there we go and when I've done all those
things I'm going to call search so
that's basically all I mean by reset and
so now rather than calling search here I
can call reset there we go I think as
you change searches we should probably
leave the sort order as it was so I'm
not going to move that inside reset
we're just going to set everything up
from scratch now we actually want of
course to make sure that we do a search
now you'll remember that inside our
control our controller we had this
parameter called queue and that is the
thing that if it's defined we're going
to call dot we're on it so we need to
stick something in to queue what is that
something it's data scope dot query so
let's try that shall we so here we're
going to add queue and we're going to
set it to dollar scope dot query I don't
know that we need to do anything else at
this point we've defined what dollar
Scott our query is from our template
we've passed it in the controller's
doing something with it so hopefully
we're going to be right to go at this
point so let's try it shall we let's
search for six nothing happened but
there was no error either let's find out
why not so if I go to the network tab
and click search again
okay so currently our search button is
not actually doing anything let's find
out why not first of all we'll check out
template and there is in fact an
ng-click connected to it so that's good
and then we do have a dollar scope dot
reset so that's good at the end of that
it calls a search so that's good so
let's try and figure out what's going on
by using the debugger in JavaScript
let's make sure we actually get to
dollar scope don't reset shall we so I'm
just doing a refresh first and then I'll
type something into search and click OK
so something's happening that's good
let's try it so we step step step step
step let's go into search
that's interesting this time it did work
perhaps I just forgot to refresh last
time so let's take the debugger out save
it do a refresh and let's try it search
oh there we go so just all that happened
last time was I forgot to refresh and
therefore I had my old version of the
JavaScript
let's try reset no that's great
let's try doing a sort and then do a
search that's great that's continued to
work as well and let's try doing a
search and then a sort that's
interesting so in this case when I
clicked on the sort header it's actually
added to this and that's a bug and if
you think about it the reason that's a
bug is because I am NOT doing my reset
after I did my sort so let's change that
so that it does a reset here so in other
words each time I'm doing something
that's not show more I actually need to
start again and not append each time
let's try that do a search and then a
sort great do a reset there's no show
more here because there's only five
things to show do a reset there is to
show more let's make sure it sure will
show more works looking good once more
and no more to show that's great
so we're now at a point where we have
successfully got a search and sort and
pagination working and we did that all
from scratch in I think well under an
hour
if I'm counting correctly and I think
that really shows that once we've got
the basic infrastructure in place it
just gets faster and faster to add
additional functionality to our
application I got to leave this tutorial
at this point because I think we've got
more than enough to keep us going for
now see if you can follow through with
this in Korea
at that functionality to your own
application of course don't forget that
you can follow through the written
tutorial and tutorial 2 in the written
tutorial goes through all of these steps
as this points out in the next part
we're going to look at creating deleting
and updating items and as you'll see
it's going to just keep getting easier
and easier and easier thanks very much
for listening and of course feel free to
leave comments either on my blog post or
on YouTube with this video and let me
know what you thought or if you have any
questions