Angularjs route configuration Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 26 of handle JS tutorial in
our previous videos in this series we
discussed creating layout and partial
templates in this video we'll discuss
configuring routes and creating the
required controllers that is the home
controller courses controller and
students controller let's flip to your
studio the first thing that we want to
do here is add another JavaScript file
where we can write our angular code so
I'm going to right click on the scripts
folder add a JavaScript file and let's
call it script dot J's first let's
create a module angular dot module let's
name our module demo all routing
features are present in a different
module and that module is ng route so
let's specify that as a dependency here
now let's use angular's config function
to specify the configuration for our
application so to this config function
I'm going to inject dollar route
provider which we use to configure
routes so dollar route provider now
route provider has got dot ven function
so when the URL is slash home what do we
want to do we want to inject home dot
HTML into our layout view which is index
dot HTML so we have to specify that here
so when the URL is slash home template
URL is going to be now if you look at
home dot HTML all these partial
templates they were actually present in
this templates folder so templates for
slash and the name of the view is home
dot HTML and the controller that is
going to be responsible for this view we
specify that using controller so the
controller is going to be home
controller so basically this is telling
when the user is on slash
home if that's the URL then we want this
view to be injected into index dot HTML
and this is the controller that is
responsible for that view now when the
user navigates to slash courses then we
want this courses dot HTML to be
injected into index dot HTML so our
template URL is going to be courses dot
HTML and our controller is going to be
courses controller similarly when the
user navigate to four slash students
then the template URL is going to be
students dot HTML and the controller is
going to be students controller you can
have as many dot ven functions as you
want depending on the number of routes
that you are configuring so we are done
configuring our routes now let's go
ahead and create home controller courses
controller and students controller so
what I'm going to do now is chain dot
controller function so the name of the
controller here is going to be home
controller and to the home controller
function let's pass the dollar scope
object now if you remember from our
previous video if you look at our home
dot HTML the partial template here it is
expecting message property to be there
and what is this message probably going
to contain the page title home page so
what we are going to do within our
script is let's set the message property
and let's set that to home page okay so
that's all the home controller is doing
now let's go ahead and create the rest
of the controllers we want
courses controller and what is the
courses controller going to do it's
going to return an array of courses now
if you look at courses dot HTML the
course is partial template here we are
expecting a property called courses so
we want to loop through each course and
display the name of the course so what
we are going to do within our controller
is specify a property on the dollar
scope object courses and this is going
to be an array of courses so let's say
our courses are c-sharp vb.net you know
you can have as many courses as you want
sequel server asp.net etc so that's our
courses controller finally let's go
ahead and create our students controller
so let's change the name to students
controller and what do we want the
students controller to do if you look at
the students partial template it should
actually return you know a property
called students which is going to
contain all the student objects and from
each student object we want to retrieve
the name property and display that here
okay so and if you remember from our
previous video session we have a web
service here which is returning the list
of student objects so let's go ahead and
call that web service so first of all
the property on the scope object is
going to be students and to a controller
function we also want to inject dollar
HTTP service so we can call our asp.net
web service so dollar HTTP so we are
going to use the get function to call
the asp.net web service the asp.net web
service is student service dot SMX
and within that we have this web method
get all students which we want to call
so
student service dot s and x4 slash get
all students so that's the function that
we want to call so lets chain dot then
function and whatever response we get
let's pass that to this function so what
do we want to do with that response we
want to set that on the dollar scope
object so we are basically going to
retrieve the data and set it as the
value for the students property all
right so that's all the angular code
that is required we have configured our
routes and we have created the required
controllers now there are two more
things to do so within our index dot
HTML first of all look at the name of
our module here it's demo so let's go
back to index dot HTML and here at the
HTML element level notice we already
have ng app set to demo so that's all
looking good now the next thing that we
want to do is add a reference to our
script file within the layout template
which is our index dot HTML so let's do
that now if you look at this layout
template right here we have ng view
directive so this is where the partial
templates will be injected depending on
the URL that we are on so let's quickly
run this page so first look at the URL
we are on index dot HTML now when I
click home look at that the URL changes
to index dot HTML hash forward slash
home and look at what happened the home
partial template home dot HTML is
injected into the location where we have
this ng view directive within our index
dot HTML file similarly when we go to
courses look at the courses that we have
and when we go to students we should get
the list of students there was a bit of
a delay there because it was actually
calling that asp.net web service
okay notice the partial templates are
injected as expected but one problem
that we have here is we still have this
hash symbol in the URL we'll discuss how
to get rid of that hash symbol in our
next video thank you for listening and
have a great day