Handling events in AngularJS Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 7 of angularjs tutorial in
this video we'll discuss how to handle
events in angularjs let us understand
this with an example we want to display
the list of technologies in a table as
you can see here we want to display the
name of the technology the likes and
dislikes it has got and we also want to
provide the ability to like and dislike
a technology depending on whichever
button the user has clicked we want to
increment likes and dislikes so in this
video we're going to see how to handle
click event of a button so the first
step here is to design in our web page
that looks like this for that we'll have
to create our model first so let's flip
to visual studio within our controller
function I'm going to create an array
I'm going to call this technologies this
array is going to contain the list of
technologies so every technology object
is going to have a name property let's
say the first technology is c-sharp
along with the name every technology is
also going to have likes and dislikes
properties likes and dislikes will be 0
to start with now let's make a copy of
this JavaScript object and let's say
this second technology is asp.net and
the third one is sequel server and let's
say finally we have angular JS all right
so we have technologies array here which
is going to be your model so I'm going
to attach this to the scope object so
dollar scope dot technologies equals
technologies ok we have our model ready
now to the scope object I'm going to
attach two more functions one function
to increment the likes and the other
function to increment the dislikes so
dollar scope dot increment likes so this
is going to be a function and to this
function we are going to pass a
technology object in a bit we'll
understand how we are going to get the
technology object into this function
and then on that object I am going to so
every technology object has got likes
property so I am going to increment
likes by one so technology dot likes
plus plus so we are incrementing the
likes of you know the given technology
object similarly let's come out with
another function and I'm going to call
that increment dislikes so this is going
to increment the dislikes so every
technology object also has got this
likes property which we want to
increment when this function is called
all right so let's save the changes now
let's go to our HTML page so within the
page we want to display the list of
technologies like this so we want a
table so let's create a table element
and this is going to have tea head and
within tea head we are going to have TR
and let's include th elements so how
many th elements we need we need one two
three and four so let's make a copy of
this so within the first one we want to
display the name of the technology and
then likes and in this we want to
display the dislikes and finally you
know we want to display those patterns
like and dislike buttons okay so that's
our table had let's include a tea body
section and within tea body we want a
row for every technologies and this is
where we are going to use ng-repeat we
discussed ng-repeat in detail in our one
of our previous video session so
ng-repeat
I am going to use for each technology
and what is your model or model is
technologies so we are going to loop
through each technology in technology so
for every technology in our technologies
array we are going to get a table drawer
and within each table row we wanted TD
so within the TD we want to display
first the name of
the technology so we are going to use
this technology object so technology dot
name similarly we want to display the
likes it has got dislikes it has got and
finally two buttons to provide the
ability to like and dislike that
specific technology so to display the
likes we use the likes property and to
display dislikes let's use the dislikes
property and within the final TD we want
two buttons the first button to like the
technology so input type equals button
let's say the value on that is going to
be like and I'm going to use ng - click
directive okay so when we click the
button we want to call you know this
function right here increment likes okay
so we have now within a model the state
the state is nothing but the data the
model contains and behavior you know the
behavior is these two functions so this
function is going to provide increment
likes and this function is going to
increment dislikes so when we click this
button you know like button we want to
call increment likes function and to
that we want to pass the technology
object for which we want to increment
the likes and look at this I am passing
the technology object now where is this
technology object coming from it's
nothing but this technology object that
we have here you know the current
technology object that is present within
that TD ok so we have a like button
there and when we click that button we
call that increment likes function which
is going to increment the likes for that
technology object similarly let's
include another button and the value on
this is going to be dislike and when we
click this button we want to call
increment this likes function and then
pass the respect to technology object
all right so let's save these changes
and let's go ahead and reload our page
now the form doesn't look that pretty
here and to make it look pretty
I have done is created the style sheet
style style CSS and here we have some
type styles for the table so we have set
the border to collapse and font family
to area on the table and we have set you
know one pixel of solid black border for
P D and a padding of five pixels and
this and for the edge we have again one
pixel solid black border tiling of five
pixels and text alignment of left so we
have these styles here we want to use
those styles on our page so what I'm
going to do is drag and drop that style
sheet into the head section of our page
all right so let's save those changes
and let's reload this page and now look
at the display so when we click the
likes but and look at that the likes
increases and similarly when I click on
dislikes and or dislikes increases look
at this you know depending on which
button we are clicking that aspect of
technology objects likes and dislikes
are increased it is the controller code
here is the code within the view and
finally the styles thank you for
listening and have a great day