AngularJS caseInsensitiveMatch and Inline Templates Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 35 of Angela J's tutorial
in this video we'll discuss two simple
but useful features in angular
case-insensitive match and inline
templates first let's look at case
insensitive match let's understand this
with an example let's flip to visual
studio by default the routes that are
configured using the config function are
case sensitive look at the route right
here slash courses it's all in lowercase
letters so if we try to navigate to
slash courses again all lowercase
letters the page works as expected now
let's see what's going to happen if we
try to navigate to slash courses with
all uppercase letters look at this the
moment I hit enter angular is
redirecting us back to slash home and
that's because by default routes are
case sensitive so in this case angular
is thinking that slash courses with all
uppercase letters is a route that is not
configured and the reason it's
redirecting to slash home is because we
have this otherwise section configured
let's comment this section and let's
reload our page and then now let's try
to navigate to slash courses again with
all uppercase letters this time it
didn't redirect us to slash home we're
on slash courses but we have a blank
layout page and again this is because by
default routes are case sensitive so
angular doesn't know about this route
slash courses with all uppercase letters
that's why we see a blank page now we
want all our routes to be case
insensitive to make a route case
insensitive all you have to do is set
case insensitive match property to true
so in this case we are setting that for
slash home but we want it for slash
courses so let's do that so within our
config function for this route slash
courses I am going to set case
insensitive
match to true all right so let's save
our changes and let's reload our app so
I'm pressing ctrl R to reload and look
at that slash courses with all uppercase
letters is working as expected
but then the other routes slash home
slash students they're still case
sensitive look at that and we go to
slash home with all lowercase letters it
works and we go to slash home with
uppercase letters we again have the same
problem okay if you want all the routes
to be case insensitive then instead of
setting case insensitive match property
to true like this on an individual route
set it on the dollar route provider
itself so on dollar route provider let's
set case insensitive match to true and
we can get rid of this from here because
we have already set it on dollar route
provider so let's save our changes and
let's reload our app look at that slash
home with all uppercase letters is
working slash students again with all
uppercase letters is working and slash
courses with lowercase letters and mix
of upper cases upper case and lower case
you know it's working so that's case
insensitive match inline templates now
if you look at all the rows that we have
here the view content for all these
routes is coming from a separate HTML
file for slash home it's coming from
home dot HTML for slash courses courses
dot HTML for slash students students dot
HTML so all these are separate HTML
files now the question is should the
view content be always coming from a
separate HTML file not necessarily the
view content can also be inline now to
specify the view content is coming from
a separate HTML file we use template URL
property if you want to use inline
templates then you can use template
eight property instead of template URL
so we use template property and then we
specify our inline template content
right here so let's say we want an h1
element and within that we want to
display this message inline template in
action let's close the h1 element let's
save our changes so we have specified an
inline template for slash home so at the
moment we are on slash courses let's
reload our app by pressing ctrl R and
look at this when I go to slash home
look at what we see now we see the
inline template in action string there
so you can either use an inline template
or an external template you know a
separate HTML file if you want to use
you know a separate HTML file then you
use template URL property if you want to
use an inline template then you use
template property thank you for
listening and have a great day