Angular layout template Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 24 of angularjs tutorial in
this video well disk is creating the
layout template this is continuation to
part 23 so please watch part 23 before
proceeding we want our layout template
to be like this we want a location for
the website header
website footer the left navigation menu
and the main content area to get this
layout I have already typed the required
HTML so let's copy this and navigate to
the demo application that we have been
working with in the previous video
session notice within the head section
we have references to the main angular
script file and the angular route script
file within the body section I'm going
to paste the HTML that we have copied
this will actually give us the layout
that we want now let's save the changes
and when we view this page in the
browser look at what we get we don't get
the layout that we see in this slide and
that's basically because we don't have
any Styles applied to this HTML so let's
add a style sheet to our project let's
call this Styles dot CSS again in the
interest of time I have already typed
the required styles so I'm going to copy
them from the notepad and paste them
within our style sheet now we need to
reference the style sheet within our
index dot HTML page so I'm going to drag
and drop this style sheet right here
into the head section so let's save
everything and let's reload this page
look at this we get what we went now I'm
not going to go into the details of this
HTML or these Styles because we have
already discussed them in part 147 of
asp.net tutorial so now within the left
navigation menu we want our links so
let's go ahead and get those links in
the left navigation menu so this is
where we want our links so let's include
an anchor tag
so anchor href equals hash for slash and
that's if you want to go to four slash
home you know that's the URL that we
want to navigate to and what we want to
display to the user is home so let's
make two more copies of this and here
the href is going to be courses and the
anchor text is going to be courses and
here the href is going to be students
and the anchor text is going to be
students notice within the links to our
partial templates that is home dot HTML
courses dot HTML and students dot HTML
by using this hash symbol this is
basically to tell the browser that we
don't want to navigate away from this
index dot HTML instead we want these
partial templates to be injected into a
location in this index dot HTML we'll
discuss how to get rid of these hash
symbols in a later video so let's save
these changes and let's reload this page
and see what we get notice we get our
links and when I hover the mouse you can
see the complete URL right here in the
status bar so for example if I am on the
home link look at what we get localhost
colon we have a port number there and
then for slash index dot HTML and then
we have our hash symbol for slash home
so we'll discuss how to get rid of that
hash symbol in a later video so we have
our links there now next thing is within
our content area this is where we want
our partial templates to be injected
depending on the URL that the user is
trying to navigate to and to tell that
we are going to use a different
directive so here is where we want the
partial templates to be injected and we
are going to use a different directory
here and that's going to be ng view
directive so this is where the partial
templates will be injected depending on
the URL the user is navigating to so
let's save these changes as well
and let's reload this page so in our
next video we'll discuss creating the
partial templates thank you for
listening and have a great day