Angularjs ui router configuring states Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 43 of angularjs tutorial in
this video we'll discuss configuring
States in an angular application the
first question that comes to our mind is
what is a state according to angular
documentation a state corresponds to a
place in the application if this does
not make sense at the moment don't worry
it will be clear in our upcoming videos
for now you can think of it being
analogous to route in ng route so how to
configure a state to configure a state
use state method of state provider
service this method has two parameters
state name and state config state name
is a unique state name for example it
can be home courses students etc State
config is a state configuration object
this object has several properties some
of them are template template URL
controller controller as resolved URL
etc there are many other properties as
well which we will discuss as we
progress along in this course
let's now configure States for the
sample application that we have been
working with we will configure home
courses and student States
let's first configure the home state
let's navigate to the app that we have
been working with this app is broken at
the moment and that's because of the
changes that we have done in our
previous video notice when I click on
these links on the Left nothing happens
let's fix these broken links by
configuring States so let's flip to
visual studio if you notice at the
moment we are using Road provide a
service Venn method to configure routes
this route provider service is provided
by ng route module since we have removed
ng route module from our application
that's the reason why those links are
not working so instead of using road
provider service I'm going to use state
provider service so let's delete these
two services from here and instead use
state provider service
I'm going to comment this line and I'm
also going to call my
this other routes that we have here and
I'm also going to comment this line
right here
well discuss how to fix these in our
upcoming videos for now let's keep them
commented and I'm also going to comment
their respective controllers that is
student details controller and student
search controller so now let's use state
provide a service state method to
configure a state so with statement that
the first parameter is the name of the
state the name of the state is going to
be home and the second parameter is the
state configuration object notice at the
moment we are using template URL
controller and controller as properties
of the state configuration object in
addition to those properties I am also
going to use URL property and the URL is
going to be slash home so when this home
state is activated this is the URL to
navigate to that's the template to use
that's the controller and we are using
controller as syntax similarly let's
configure courses and students state so
with courses the name of the state is
going to be courses the URL is going to
be slash courses and for students the
name of the state is going to be
students and the URL is going to be
slash students so we have configured
home courses and students now with the
student state we are also using resolve
property of the state configuration
object so that's our first step
configuring States the next step is to
modify students control a function now
if you look at the students controller
function notice we are using route
service reload method to reload just the
current route instead of the entire
application but remember this route
service is provided by ng route module
we have removed the ng Road module from
the application so this reload
functionality is not going to work
anymore so to provide this reload
functionality we are going to use a
different service and that is state
service and the state service is
provided by UI router module so instead
of injecting route service I'm going to
inject state service and this state
service also has got reload method which
is going to reload just the current
state instead of the entire app so
that's our second step the final step is
to modify the length in index dot HTML
which is our layout view notice at the
moment to create these links they are
using H ref attribute instead of using
HTF attribute I'm going to use UI - s
ref attribute let's do the same thing
with the other links that we have with
you is our F attribute the value is
going to be the name of the state not
the URL so this is going to activate
home state when home state is activated
we want to use this URL this is the
template and this is the controller to
instantiate now angular is going to use
the URL in that respective state to
generate the HTF attribute so let's save
all these changes now instead of using
UI as left we can also use H ref to
create these links and activate States
we'll discuss you know all these
different ways of activating States in a
later video at another option to
activate a state is by using go method
of the state service so we'll discuss
all these options in a later video for
now we are using UIs ref attribute and
the value for this is going to be the
name of the state and you know depending
on the URL that we have in the state in
our angular is going to use that to
generate href attribute for us
all right so let's save all these
changes and let's go to our application
let's navigate to the root of the site
and then I'm going to reload this app
and look at this when I click home look
at the URL we are navigating to slash
home we see the home page
similarly courses page is working
students page should also work but it's
taking a bit of time and that's
basically because if you recollect from
our previous videos we have included
this thread dot sleep statement that's
why it's taking two seconds to load
let's comment that line let's build our
solution let's reload the app now if we
navigate to home and then back to
students look at that the data loads
instantly now let's test this reload
functionality just to make sure it works
as expected
now at the moment we have got those
records there let insert it this new
record so Jane is the new record that we
have inserted when we click this reload
button we should see that new record
there Jane now let's see what's going to
happen if we remove some of these
properties now for the state
configuration object all these
properties are optional now let's see
what's going to happen if we remove the
URL let's comment URL property of all
the states let's save the changes let's
reload the app let's actually navigate
to the root and let's reload the app now
look at this first of all the links on
the Left they are not blended as
hyperlinks and that's basically because
that respective States does not have URL
property and that's why you know it
didn't generate the href attribute and
that's why they're not generated as
hyperlinks but you can still click on
them when you click on this right here
home the home state will be activated
when home State is activated you know it
doesn't have a URL to navigate to but
it's going to instantiate this
controller and it's going to use this
template so we should see
home template injected into the layout
view let's look at that in action look
at that when I click on the home text
there the home page loads but look at
what happens to you or nothing happens
the URL does not change and that's
basically because the state's now does
not have URL property and similarly if I
click courses you see the courses when I
click students we see students let's put
those URLs back and let's reload our app
and now when we click you know we have
the URL also changing in our next video
we'll discuss fixing the other routes
that we have here so here you know this
is the code required to make that reload
functionality work and finally the code
change to activate States so here we are
using UI s ref attribute to activate a
state thank you for listening and have a
great day