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

this is part 42 of angularjs tutorial in
this video I will provide an
introduction to UI router way to get you
a router module from and including it in
an angular application so what is why
router the UI router is a third-party
routing framework for angularjs it
provides everything that the ng Road
module provides plus many additional
features these additional features are
very useful for larger applications will
discuss these additional features with
examples in our upcoming videos you a
router implements routing based on the
state of the application whereas ng
route implements routing based on the
route URL this means with ng route views
and routes are tied to the application
URL whereas with UI router views and
routes are not tied to the application
URL which means parts of the site can be
changed even if the URL does not change
if this does not make sense at the
moment don't worry it will be clear in
our upcoming videos in this series
working with UI router is similar to
working with ng route here you see the
CDN link for UI router at this link you
can find both minified and non minified
versions of the UI router module file so
let's navigate to that URL so we are on
that page and here we have the non
minified version and here the minified
version let's copy the CDN link of the
non minified version now there are three
simple steps to include UI router in
your angular application the first step
is to reference the UI router CDN length
the second step is to add UI dot router
as a module dependency and the final
step is to add UI view directive in the
layout page that is in our index dot
HTML page let's look at these steps in
action
let's flip to visual studio so the first
step is to reference the UI router CDN
link so let's go to index dot HTML which
is our layout page at the moment notice
we are referencing endler route file you
know the ng route module instead of that
I am actually going to use the CDN link
that we have just copied for
ey rota that's our first step the second
step is to add a weight or router as a
module dependency and we do that in our
script or JS file so here at the moment
we have a module dependency on ng route
module instead now we are going to make
use of UI router so the module
dependency is going to be on you i dot
router that's our second step and the
final step is to add UI view directive
in our layout page which is index dot
HTML so at the moment on this page we
have ng view this is the location where
of a partial templates will be injected
is refusing ng view with UI router we
use UI view so those are the three
simple steps required to include UI rota
in our angular application in our next
video we'll discuss configuring States
thank you for listening and have a great
day