AngularJS ui router parameters Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 44 of angularjs tutorial in
this video we'll discuss how to use URL
parameters with UI router in angular
here is what we want to do at the moment
we are on students page where we see the
list of student names when I click on a
student name notice that specific
student ID in this case 1 is passed in
the URL but then on the destination page
we don't see that specific student
details the application is broken at the
moment let's see how to fix this using
URL parameters with UI router to use URL
parameters with UI router there are
three simple steps the first step is to
define the state with URL parameter so
here we are defining a new state and the
name of the state is student details
when this state is activated this is the
URL that we want to navigate to slash
students slash : ID URL parameters are
prefixed with a colon symbol so in this
case ID is the URL parameter so this
state has got a URL parameter that's our
first step define the state with URL
parameter let's do that now let's flip
to visual studio notice at the moment we
using when function to create this route
slash students slash colon ID when
method is present in ng route module
which we are not using anymore at the
moment we are using UI router module so
let's use state function to define our
state with a URL parameter with state
function the first parameter is the name
of the state that we want to define the
name of the state is going to be student
details and the second parameter is the
state configuration object so when this
state is active this is the URL that we
want to navigate to slash students slash
: ID ID in this case is the URL
parameter that's our first step the
second step is to link to the state
which has got that URL parameter if you
look at these student names they are
present
in student dot html' partial template so
let's go to students dot HTML notice at
the moment we are using H ref attribute
to build these links that we have here
instead of using HF I am going to use UI
s ref attribute s F stands for state
reference when we use s ref attribute
we'll have to specify the name of the
state that we want to activate not the
URL so the name of the state that we
want to activate is student details so
when we click on a student name we want
to see that specific student details and
to do that we will have to activate the
student details which is going to take
us to this URL slash students slash ID
so the value is going to be the name of
the state that you want to activate and
if you look at this state that we have
defined here it has got a parameter so
we have to supply a value for that
parameter to supply a value for that URL
parameter which this state has got I am
going to use that state as a method here
and then to that I'm going to pass a
JavaScript object and this JavaScript
object is going to have a single
property and the name of that property
is going to be ID and the value for that
is going to come from the student object
so where is the student object coming
from if we look at this ng-repeat
directly right here notice what we are
doing we are looping through the
students list that the students
controller is returning so we have the
student object so from that student
object we are using the ID property to
retrieve the ID value of that specific
student and then we are assigning that
value to this ID property of the
JavaScript object that we are passing to
the student details state and if you
look at the URL parameter name it's also
ID so that's how we are passing a value
for the URL parameter to that state
that's our second step to link to the
state features called the URL parameters
and the final step is to read that
specific parameter value from the
controller function call the web service
method pass the ID value and then
retrieve that specific student details
now if you look at the state that we
have configured the student details
state when this state is active this is
the controller that will be responsible
for that state student details
controller we already have that
controller function but it's commented
so first let's uncomment this and notice
that the momentary using route params
service this route params service is
present in ng wrote module which we are
not using anymore
at the moment we using your router
module to read parameter values
ui-router module has provided state
prams service so let's inject that
service and then I'm going to use this
service and on that I am going to use ID
property so to retrieve the ID parameter
value by using the parameter name as a
property on the state pram service so if
you look at our state notice the
parameter name is ID now
this parameter will be available within
the state params service and it's
available in the form of a property we
use it you know with the same name dot
ID which is going to retrieve the ID
parameter value and then we are passing
it to this get student web service
method which is going to retrieve that
specific student details from the
database and return that so let's save
all these changes and I am going to
reload this app and now look at this
when I click on a student name that
specific student ID is passed and now we
get to see that specific student details
but then this link you know we need to
rebuild this as well so let's go to
student details
HTML partial template again here we're
using H ref attribute instead of that I
am going to use UI s ref attribute and
where do we want to go we want to when I
click on this link right here
you want to go back to a different state
and the state that we want to go back to
is this state right here
students state so the value is the name
of the state that we want to activate in
this case students so let's save these
changes reload this once again and when
I click on this we are back on the
students list thank you for listening
and have a great day