Ng include directive in AngularJS Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 16 of angularjs tutorial in
this video we'll discuss ng-include
directive in angular the ng-include
directive is used to embed an HTML page
into another HTML page this technique is
extremely useful when you want to reuse
a specific view in multiple pages of
your application the value for NG
include directive can be the name of the
HTML page that you want to reuse so in
this example right here employee lists
dot HTML is the name of another HTML
page that you want to reuse within your
current HTML page the value for this
ng-include directive can also be a
property on the dollar scope object that
points to the V useable HTML page so in
this example employee list is a property
on the dollar scope object that points
to your reusable HTML page let's look at
an example so within the script or JS
file we have our controller function and
within the controller function we have
this employee's array which at the
moment contains five employee objects
and each employee object has got name
gender and salary properties we have
attached to the employees array to the
dollars coop object using this
employee's property which is going to be
the model for the view now what we want
to do is present this employee's data
using an HTML table so for that I'm
actually going to add to this project
another HTML page and I'm going to call
it employee table dot HTML now we want
to reuse this employee table HTML page
inside this HTML page 1 dot HTML now if
you look at this employee table dot HTML
it has called HTML head and body
sections we already have those sections
within this HTML page 1 dot HTML so what
I'm going to do is remove all those
sections from there and then simply use
the table element so within the table
element let's include a tee header
section and then PR and let's include 3
th elements to display the column
headers name gender and salary
so within the first th element name
within the second th element gender and
within the final th element cell
let's include the deep body section and
within that let's include the TR element
and on this TR element I am going to use
ng repeat directive and then loop
through each employee in employees RA
which is over model and then we want to
create a TD within this TD we want to
display employee name similarly let's go
ahead and display gender and salary
property values gender and then salary
so we want to use this employee table
dot html' within our HTML page one dot
HTML so with inside this div element I'm
going to include another development and
on this I'm going to use ng - include
directive and then the value now is
going to be the name of another HTML
page so I'm going to specify that name
within single quotes let's save all
these changes and when we reload this
page we should see the employee data
presented using an HTML table now at the
moment the value for ng - include is the
name of another HTML page now the value
can also be a property on the dollar
scope object let's look at that now so
what I'm going to do is attach another
property to this dollar scope object I'm
actually going to call it employee view
and then initialize that to the name of
the HTML page that we want to reuse and
the name of that HTML page is employee
table dot HTML so let's specify that as
the value for this property employee
view and then within our HTML page one
dot HTML I can use this property
employee view which is pointing to that
HTML page that we want to reuse so since
that is a property on the model you
shouldn't be using the single quotes so
I'm going to paste that property name
right here employee view so let's save
the changes and when we reload this page
it should work exactly as before now
let's look at another example so here is
what we want to do on our page we want a
drop down list which say select view and
within the drop down list we want
have two options table and list if the
user selects table as the view then we
want to present the same employee data
using a table if the user selects list
then present that employee data using
two unordered lists as you can see here
let's see how easy it is to achieve this
using ng-include directive so the first
thing that we want to do is add another
HTML page to a project and I'm going to
call this employee list dot HTML because
here we are using a list to present the
employee data again I'm going to remove
the HTML we already have and simply
going to use an unordered list and on
this unordered list element I'm going to
again use the ng-repeat directive and
use the same expression for each
employee in employees what do we want to
do we want to create a list item and
within that list item we want to display
the name of the employee and then we
also want another unordered list
basically to display the gender and
salary for that employee so I'm going to
copy that binding expression and paste
it right there and change the property
name to gender similarly let's include
another list item and change the
property to salary so we have two views
now employee table employee lists both
of the views presenting employee data
using different controls employee table
dot HTML presenting it using a table
employee lists presenting it using an
unordered list now the next step is to
include a drop-down list on our HTML
page one dot HTML so inside this
development just about this development
I'm going to include this literal text
which says select view and then let's
specify a select element on this select
element I'm going to use ng model
directive the value for this directive
is going to be this property right here
on the scope object employee view and
let's include two options
the first option value is going to be
employee table dot html' which presents
the employee data using an HTML table so
this is the value that we want our user
to say and let's include another option
and here the view is going to be
Employee List dot HTML and let's change
the display text to list so we have our
drop-down list there let's include
another break element all right so if
you look at this script look at this
employee view the initial value is
employee table dot HTML so when this web
page first loads you know two things
should happen within the drop-down list
this option should be selected employee
table dot HTML because the Select
element is using the same property as
the model and then the data should be
presented using a table let's look at
that in action
so let's reload this page and look at
that table is selected within the
drop-down list employee data is
presented using an HTML table if I
change the selection to list look at
that the data is present dead using two
unordered lists thank you for listening
and have a great day