AngularJS routeparams example Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 30 of angularjs tutorial in
this video we'll discuss how to pass and
retrieve parameters from URL in angular
this is continuation to part 29 so
please watch part 29 before proceeding
we will be continuing with the same
example that we worked with in part when
t9 at the moment when we go to this
route localhost / students the partial
template at that route displays the list
of student names so when we go to that
route notice we see the list of student
names at the moment these names are not
clickable hyperlink so what we want to
do is when we navigate to that route
first we want to display the list of
student names as clickable hyperlink and
then when we click on any student name
for example when we click on student
named John since John student ID is 2 it
should take us to a different route
localhost for slash students slash the
ID of the student since in this case
John student ID is 2 we pass a value of
2 there and then at this route the page
should retrieve the parameter value from
the URL and display that specific
student details so we want to see
student ID name gender and city in
addition to that we also want this link
back to students list when we click on
that link it should take us back to
slash students which is going to display
the list of student names as clickable
hyperlinks to achieve this the first
thing that we have to do is add a web
method to our asp.net web service which
is going to retrieve student details by
ID so we give this ID to a web method
and that is going to return that
specific student details so let's add
that web method to our asp.net web
service let's flip to visual studio so
here within our student service at the
moment we only have one web method get
all students this method is going to
return us all the students from the
database table so let's make a copy of
that and let's change its name to get
student instead of get all students
because this method is going to return
just one specific student DT
and the student details that we want we
are going to specify that student ID as
a parameter since this method is going
to return a just one student object we
don't require list of students so we
just need one student object here most
of the code within this method is going
to stay the same as before so we are
still going to read the connection
string from web.config file using that
connection string we are creating a
sequel connection object and then we are
creating a sequel command object but the
command itself is going to change
instead of retrieving all the students
from the table we are going to retrieve
their student ID equals at ID so this is
a parameterised sequel query and for the
sequel parameter we have to supply a
value so let's create a sequel parameter
object let's call it Graham and we need
to specify values for the parameter name
and its value so parameter name is at ID
and the value for this parameter is
going to come from this method parameter
so when we call this webb method will
pass the ID of the student whose details
we need so the value for this sequel
parameter @ ID is going to come from
this method parameter ID and then
finally we need to associate the
parameter object with the command object
itself so let's use the parameters
property of the command object all right
and then we open the connection execute
the command as we are looping through
the student row that we have retrieved
we no longer have to create the student
object because we have already created
that so we can get rid of this line from
here and then we populate student ID
name gender and city properties we don't
have to add it to the list of students
object in fact we don't have that object
anymore we have already deleted that and
then we pass this student object to the
serialized method of the JavaScript
serialize a class which is going to
serialize the student object to JSON
format
now let's quickly test our web method so
the web service should now have two
methods get all students which is going
to retrieve all the students from the
database table get student which is
going to ask for the student ID so for
example if we pass student IDs one it
should return as that specific student
details so our web method is now working
as expected the next step is to make the
list of student names at this route to
clickable hyperlinks at the moment we're
not able to click on any of the student
name and nothing happens when we click
on them so let's turn them into
hyperlinks and that's very easy to do so
the partial template that is displaying
student names is this students dot HTML
now I'm going to wrap this binding
expression inside an anchor tag so
anchor href equals so when we click on
any of the student names what is the
route that we want to go to we want to
go to students slash that specific
student ID so what I'm going to do here
is the hyperlink reference that we want
to go to is students four slash and then
the ID of the student how are we going
to get the student ID we are going to
use the student object right here we are
looking through each student object and
then displaying the student name so we
can use that student object there and
the student object has caught the ID
property which is going to give us the
ID of the student okay and then let's
close the anchor tag all right so that's
the code that is required in students
dot HTML partial template let's save the
changes and when we reload this page now
notice we have student names as
clickable hyperlinks for example when I
right-click on marks name and then copy
the link address and paste that in the
notepad look at the URL that we have
slash students / 1 / 1 here is the ID of
you know the first student which is mark
all right similarly when I right-click
on John look at that student IDs
- now look at what's going to happen
when I click on mark
for example we expect it to navigate to
slash
students / the idea of the student but
then it's actually redirecting us back
to /home why is that that's because if
you remember in one of our previous
videos we have configured a default
route right so if the route that we are
trying to navigate is not any of these
routes then it will automatically
redirect us to /home now we don't have a
route in our configured for slash
students slash 1 or 2 or whatever is the
student ID that's the reason why angular
is automatically redirecting us to /home
so the next step obviously is to
configure that route within our config
function so let's do that so when the
route is slash students slash the ID of
the student and they specify that using
: so that's a parameter and you can give
any meaningful name to that parameter so
let's give the name as ID you can give
any name that you want here but then you
will have to use the same name to
retrieve that parameter value from the
URL we'll see how to do that later in
just a bit but basically this is telling
when you go to slash students slash ID
value you know ID value can be anything
1 2 3 depending on the student name that
you have clicked ok so when we go to
that route now what is the template URL
what is the partial template that we
want to display we don't want students
dot HTML we want a different partial
template and that is going to be student
details dot HTML and the controller is
also going to be different student
details controller both we have to
implement so that's our next step so now
let's go ahead and implement student
details dot HTML that partial template
so I'm going to copy that name and let's
go back to solution Explorer so all over
partial templates are in this templates
folder so I'm going to right click on
that add a new HTML page and I'm going
to name it student details dot HTML now
since this is going to be a partial
template we don't need all this
surrounding HTML so I'm going to get rid
of that
and what do we want to display within
student details we want to display
you know this header here student
details and then we want student ID name
gender and city in the interest of time
I have already typed the required HTML
so I'm going to copy that from our
notepad and paste it right here so we
have an h1 element there student details
and then we have a table with four TRS
and with an HDR we've got two TDs so
we're displaying ID and then a binding
expression to display student ID
similarly named gender and city now the
question that comes to your mind is
where is the student object coming from
now that's the job of the controller the
controller is going to set student
property on dollar scope object so we
are going to implement student
controller in just a bit and the
students student details controller
which is going to set that student
property on the dollar scope object now
another thing that we have to do here is
at the bottom of the page we want to
display this hyperlink back to students
list which should take us back to
students slash students route so let's
include that hyperlink right here so
anchor hyperlink reference so where do
we want to go we want to go to students
and the text will say back to students
list alright so we have a partial
template ready now the next step is to
obviously create our students details
controller and we'll do that within our
script or J's file so we already have
our home courses and student controllers
in addition to that I'm going to have
student details controller so the name
is going to be student details
controller and to that function in
addition to dollar scope and dollar HTTP
I'm going to inject another parameter
and this is going to be dollar route
params in a bit you'll understand the
purpose of this object okay and I'm not
going to use the get
that here instead I'm actually going to
pass an object to this method dollar
HTTP so dollar HTTP we are going to have
an object here and here we will
configure you know what web service we
want to call and what are the parameter
values and what method do we want to use
whether we want to use HTTP cater post
so basically the URL that we want to
call is going to be this one student
service dot ASM X forward slash get all
students that's the URL that we want to
call and that method you know let's not
get all students if you remember the
name of the method is get student and
this method expects student ID to be
passed as a parameter value right so I'm
going to specify that using params
property and the name of the parameter
is ID and where is the value for this
parameter is going to come from remember
we have injected this dollar route
params here so we can use this to
retrieve the parameter value from the
URL now remember within our config
function right here we specified the
name of the parameter is ID so we can
use that name to retrieve the parameter
value so what I can do here is use
dollar route params and then dot the
name of the parameter dot ID so this is
going to read the ID value from the URL
and pass it as the value for the ID
parameter of this get student web method
okay and then we want to use a get
request so method is going to be get
okay and then so once the once we get a
promise object in a we are going to set
this property on the dollar scope object
and this property student is going to
contain that specific student details
and remember within our partial template
it's looking for the student object from
which it's retrieving ID name gender and
city property values
all right so let's get it off this piece
of code right here all right so that's
all the code that is required so let's
save all these changes and let's reload
our page and now when we go to slash
students notice all the student names
are displayed as clickable hyperlinks
and we click on a student name look at
that it is taking us to student slash
one and we see student details that
specific student details and when we
click on back to students list we go
back to slash students then we go to Pam
student ID is five we see that student
details when we click on back to
students list we go back to slash
students thank you for listening and
have a great day