Angularjs partial templates Video Lecture - Learn and Understand AngularJS

this is part 25 of Angela J's tutorial
in this video well disk is creating the
partial templates that is home dot HTML
courses dot HTML and students dot HTML
this is continuation to part 24 so
please watch part 24 before proceeding
one important thing to keep in mind when
creating partial templates is that
within our layout template which is this
index dot HTML we already have the
surrounding HTML when I say surrounding
HTML we are talking about this root HTML
element this head element and all these
elements within this head section and
this body element so all this
surrounding HTML is already present in
this layout template so there is no need
for the same surrounding HTML to be
present in the partial templates that we
are going to create now all over partial
templates are going to be in a different
folder so let's add a new folder to a
project I'm going to name this templates
now the first template that we want to
add is this home dot HTML template so
this is going to be a partial template
so let's right-click on the folder add a
new item and we want to add an HTML file
and let's call this home dot HTML and
this is how we want the home partial
template to be like ok so we want this
title here and then the static content
in the interest of time I have already
typed all this static content so let's
copy it from the notepad and let's paste
it within this home dot HTML partial
template so I'm going to get rid of all
that surrounding HTML and paste the
static content that we have just copied
now we want this title as well this
title is going to come from the dollar
scope object so we are going to have a
home controller which is responsible for
this view and this home controller is
going to set up a property on the dollar
scope object let's say the property name
is nice
and from that message property we are
going to get this page title so just
about the static content I'm going to
include h1 element and here we will have
message property in our next video we'll
discuss how to create the home
controller so that's our home partial
template now the next template that we
want to create is this courses template
so let's go ahead and add another HTML
file to a templates folder and let's
call it courses dot HTML and again I'm
going to get rid of all this surrounding
HTML from courses dot HTML and this is
how we want our partial template to be
so that's going to be the title so I'm
going to include h1 and we want this
text courses we offer and then we want
you know and are not a list of the
courses that we offer these courses are
actually going to come from a property
on the dollar scope object and who is
going to set that property on the dollar
sculpt object the courses controller is
going to do that we'll discuss creating
the courses controller in our next video
so we are going to have an unordered
list and we are going to have a list
item and we are going to use ng - repeat
directive so for each course in courses
so this courses property is going to be
set by the courses controller on the
dollar scope object so what do we want
to do with each course we just want to
display that so that is our courses dot
HTML partial template finally we want
our students partial template so let's
add another HTML file to the templates
folder and I'm going to call this
students dot HTML let's get rid of the
surrounding HTML so the list of students
are actually going to come from a
database table so the first step here is
to create that database table which I
have already done so here is the table
and here is the sequel script to create
and populate it with test data
I'll have the script available on my
blog in case you need it the next step
is to include a connection string to our
database which I have already done so
here to the project I have added web
config file and we have a connection
string that points to the database we
need to have another setting here and
that setting is to basically enable HTTP
GET protocol for the asp.net web service
and I have already typed the required
setting in the interest of time so let's
copy that and paste it with another web
config file so basically this setting is
going to tell to enable HTTP GET for our
a SMX web service the next step is to
create a class a student class now if
you look at the students table it has
got these columns ID name gender and
city we are going to have a student
class with corresponding properties ID
name gender and city so let's go ahead
and add a class file to a project and
let's call this student dot C s and this
class is going to have these properties
so let's copy them and paste it within
our class ID name gender and city now
the next step is to add or asp.net web
service which is going to retrieve data
from the database so let's right click
on our project add a new item and the
item that we want to add is an ASM X web
service and let's call this student
service dot ASM X in the interest of
time I have already typed the required
code for this web service this is
nothing related to angular so let me
quickly copy and paste this within our
web service and let's quickly test our
web service just to make sure it's
retrieving the data that we want
so we have our student service dot ASI
max and if you look at this student
service we have exposed a method here
get all students so let's quickly test
that so we have that method here get all
students when we invoke that look at
that we get all the students from the
database so our web service is working
now we want our students template to be
like this we want you know list of
students as the title and then an
unordered list of student names so the
templates we have already added students
dot HTML first of all to get the title
I'm going to use h1 list of students and
let's include M unordered list and a
list item and on this list item let's
use ng repeat and let's loop through
each student so for each student in
students so the students property will
be on the dollar scope object which will
be set by the students controller so the
students controller which we are going
to write in our next video is going to
call the web service retrieve the data
and then set up a property called
students on the dollar scope object we
are then looping through each student
within that collection and what do we
want to do we just want to display the
student name so let's use a data binding
expression student dot and if you look
at the name property it's actually named
with a small letter n so student dot
name so we have all of our partial
templates ready so in our next video
we'll discuss configuring angularjs
routes and creating the required
controllers that is home controller
courses controller and students
controller thank you for listening and
have a great day