AngularJS routing tutorial Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 23 of angularjs tutorial in
this video and in the next few upcoming
videos we'll discus routing in angular
with an example let's say we want to
build a single page application for a
training institute the application that
we want to build is something like this
at the moment we are on the homepage
which is displaying general information
about the training institute on the
courses page we can see the list of
courses that this training institute
offers and on the students page we can
see the students who are enrolled to
different courses in this training
institute look at the URLs right here
when we are on the home page it is slash
home when we are on the courses page it
is slash courses and when we are on the
students page it is slash students
another important thing to notice about
these URLs is that we don't have any
file extension a dot HTML or dot aspx
these are clean URLs I have built this
application using the angularjs routing
feature so the idea is we are going to
have just four HTML files and this index
dot HTML this is the main layout view
which controls the layout for our single
page application that is the website
header this side panel here the website
footer and the main content area and
then depending on the URL that the
end-user has requested for example if
the end user request slash home then
this home dot HTML view is automatically
injected into this layout view which is
indexed or HTML similarly if someone
requests slash courses then courses dot
HTML will be injected into index dot
HTML
similarly if someone requests slash
students then students dot HTML will be
injected into this layout view we'll
discuss how to create this application
from scratch I've already completed this
application here is the completed
application I have another instance of
Visual Studio running here so here I
have another empty asp.net web
application project all I have done so
far is added scripts folder and to that
scripts folder I have added the core
angular
now one important thing to keep in mind
is that to use the routing feature we
have to include routing module the
routing module is present in a separate
JavaScript file it does not come with
the core angular JavaScript file so we
will have to download that separate
javascript file and reference that
within our application so let's do that
now
so I'm going to go to angularjs.org on
the home page I'm going to click this
button download angularjs 1 and on this
page you know if we click this download
button what we are actually downloading
is the core angular script which does
not contain the angular routing module
so click this browse additional modules
and on the next page we will actually
see the JavaScript file which contains
the routing module notice we have
angular outdoor J's and angular road
mint or J s so if you want the minified
version click on this and it actually
opens the script in a separate web page
so I'm going to copy this and save it in
a notepad and I'm going to save it with
this name angular - route there are dot
min dot j s so let's save it on the
desktop and I'm going to reference that
within our application so I'm going to
right click on our scripts folder ad and
we want to add that existing item the
JavaScript file which we have just
downloaded angular - wrote dot min dot J
s and then to our application I'm going
to add an HTML file and I'm going to
call this index dot HTML this is going
to be our layout view within the head
section I'm going to add our core
angular script and then our floating
module so here we have actually
downloaded the angular script and we are
referencing a local copy you can also
use the CDN link if you want so the
obvious question that comes to our mind
is what is the CDN link for angular
route the CDN link is if you go back to
the home page and when we play
you know this download button and look
at this this is the CDN link for the
core angular script so let's copy this
to a notepad now if you look at the URL
right here the version that we are
referencing is 1.5.0 and we are
referencing the core angular script now
if you want the angular route CDN link
all you have to do is angular - route
dot min dot J's that will be the CDN
link so if you want to use the CDN link
then use this URL so let's specify that
right here script source equals that's
the CDN link let's close that will
actually use another local copy version
so I'm just going to copy a comment this
right here so this is here for your
reference in our next video we'll
discuss how to build this layout view
and the other views that we have