AngularJS optional url parameters Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 4 T of angularjs tutorial
in this video we'll discuss angular
optional URL parameters let's understand
these with an example so here is what we
want to do at the moment we are on list
of students page on this page we want an
interface to search students for example
within the search text box if I type
letters ma and then when I click the
search button we want to search students
and display the list of all student
names that start with letters ma as you
can see here in case if we don't enter
anything within the search text box and
then when I click the search button then
we want to display all student names so
here we are making student name optional
so let's see how to achieve this let's
flip to visual studio the first change
is going to be within our asp.net web
service so to the student web service we
want to add another web method which is
going to retrieve students by name so
let's make a copy of this get all
students web method that we already have
and then modify it as required so the
first change that I am going to do is to
the name of this method let's call this
get students by name since we want to
get students by name let's include a
parameter name the next change is for
the sequence of a query itself select
star from TBL students where name like @
name so add name here is the sequence of
a parameter let's create that sequence
of a parameter object so sequel
parameter let's call it Ram equals new
sequel parameter the name of the
parameter is add name and where is the
value for this parameter coming from the
value is going to come from the method
parameter itself so value equals name
and notice here we are using sequence of
a like operator so let's use the
percentage symbol so for example if we
you know in the text box type ma like
this and then when we click the search
button this verb method will be
call and ma will be passed into the web
method and that should be passed to the
sequence of a query so here we are
appending the percentage that means our
secrets of a query will be select star
from TBL students where name like MA
and then the percentage symbol so the
final thing that we need to do is
associate the parameter with the command
object and now let's test our web method
so the web survey should expose a new
method get students by name let's click
on that and for example when I type
letters MA and then click invoke the web
method should return all these student
names that start with letter image so we
have mark and we have Mary okay so a web
method is working as expected that's the
first change the next change is within
students controller so we want a method
that is capable of searching student
names so let's go ahead and do the
required change within our students
controller so we are in our script or JS
file and here we have our students
control a function so on the view model
object I am going to expose a search
method so I'm going to call this search
student and this is going to be a
function so into the students controller
function I am going to inject another
built-in service and that is going to be
the location service and how are we
going to use this location service will
we'll see that in just a bit
so we have our view model object so I'm
checking if there is a name property on
the view model object if there is a name
property then what we want to do is use
the location service and this location
service has got this URL method so what
we want to do is if a user has type ma
and then click the search button
we want to redirect the user to a
different URL and that URL is going to
be slash
students search / and then to that we
want to append whatever the user has
typed in the text box and that's going
to come from the view model okay
else if the user did not type anything
within the search text box we still want
the user to be redirected to slash
student search but we don't want to
append anything in the URL because
there's nothing in the search text box
meaning we want to display all the
students okay so that's our search
student function now the next change is
within students dot HTML so to the view
itself so on this page we want to
display the search text box and the
search button so let's go to students
dot HTML so just before list of students
I'm going to include this little text
name and then we want a text box so
input type equals tags and the model for
this text box is going to be name of the
student that's what we are going to type
within the text box since we are using
controller as syntax
let's prefix that with student
controller dot name and then we want to
button as well so button and when we
click this button what we want to do we
want to call our search student function
which we have just created so student
controller and the name of the function
is within our script file and that is
search student so that is the function
that we want to call when we click the
search button so the text on the button
is going to be searched okay so those
are the changes required within students
partial template and students controller
the next change is to add a controller
for searching itself so what I'm going
to do is make a copy of the students
details controller and modify it as
required
so let's paste it right there
and first of all let's format this code
so the name of our controller is going
to be students search controller that's
the name of a function and we still want
HTTP service and route params service
and what we are going to do here is the
first thing we are going to create a
view model object initialize that with
an instance of this controller and then
we are going to check if dollar route
params we have the road params service
here so if route params dot name so we
have the name parameter then what we
want to do is call a different web
method so if there is a name parameter
that means the user has typed something
in the search text box and in that case
we want to call this web method get
students by name so get students by name
we want to issue a get request to that
and that web method has got name
parameter to which we have to supply a
value and that's going to come from the
URL and we are retrieving it from the
URL using the name of the parameter name
we haven't defined that URL parameter it
will do that in just a bit okay and then
we get a promise and whatever data that
we get back we are going to populate
that in the students property of the
view model okay so this is what we want
to do in case if there is name parameter
in case it's that is not there in the
sense if the user didn't type anything
within the textbox then we want to get
all the students so what I'm going to do
in that case is call get all students of
our web method so let's actually copy
this piece of code and paste it within
our else block so if the user has typed
something in the search text box then
call get students by name if the user
didn't type anything within the search
text box then call get all students and
then you know whatever response we get
we are initializing the
same property on the view model students
okay so that's our students search
controller function the next step is to
define a new route for searching
students so whenever we click the search
button we want the user to be redirected
to a new route and we are going to
define that route right now so here we
are defining the route so I'm going to
make a copy of this route and then
modify it as required so when we click
the search button we want the user to be
redirected to a different route and that
is students search and we want to
include a parameter in the URL as well
and the name of that parameter is going
to be named and we want this parameter
to be optional to make a URL parameter
optional all we do is include a question
mark like that
okay and when we navigate to that route
we want a different template and that's
going to be students search template
which we have not created we'll create
that in just a bit and then the
controller is going to be students
search controller and we want to use the
controller a syntax as well so it's
going to be students search ctrl all
right so that's our new route and the
final step is to create this student
search template so let's do that now so
let's right click on the templates
folder add and we want to add a new HTML
file and the name of the file is going
to be student search let's click OK and
in the interest of time I have already
typed some HTML so let's copy and paste
it here so notice they have an h1
element and then we have a table here
where we set border to 1 and we have
collapsed the border and within the
table head we display the column headers
ID name gender and city and then look at
what we are doing here on the PR element
we are using ng-repeat
and looping through each search result
and then we are retrieving and
displaying student ID name gender
three so straightforward HTML so let's
save all our changes and let's reload
our web page and now let's go to
students page so notice now we've got an
interface to search students now if I
type letters ma and then click search
button look at that for some reason it's
not doing anything
let's see ways that let's look let's
launch browse the developer tools by
pressing f12 K and let's click the
search button so at the moment it's not
displaying anything no errors whatsoever
let's see why is that let's go to
students dot HTML so here they're using
students controller dot search student
that's a function so a function should
have opening and closing parentheses
that's the reason why it's not being
called so let's include them and now
let's reload our app and at this point
let's type ma and let's click the search
button look at that we are redirected to
a new URL slash student search slash MA
and then look at the search results we
see the list of all student names that
starts with letter ma now let's go back
to students and let's not type anything
within the search text box and then when
I click the search button look at this
we are still redirected to slash student
search but this time we don't have name
parameter value in the URL and we see
all the students so this is an example
that explains how to use optional URL
parameters in angular thank you for
listening and have a great day