Both do the same work as they are used for routing purposes in SPA(Single Page Application).
URLs to controllers and views (HTML partials). It watches
$location.url() and tries to map the path to an existing route
definition.
HTML
<div ng-view></div>
Above tag will render the template from the $routeProvider.when()
condition which you had mentioned in .config
(configuration phase) of angular
Limitations:-
- The page can only contain single
ng-view
on page
- If your SPA has multiple small components on the page that you wanted to render based on some conditions,
$routeProvider
fails. (to achieve that, we need to use directives like ng-include
, ng-switch
, ng-if
, ng-show
, which looks bad to have them in SPA)
- You can not relate between two routes like parent and child relationship.
- You cannot show and hide a part of the view based on url pattern.
AngularUI Router is a routing framework for AngularJS, which allows
you to organize the parts of your interface into a state machine.
UI-Router is organized around states, which may optionally have
routes, as well as other behavior, attached.
Multiple & Named Views
Another great feature is the ability to have multiple ui-views in a template.
While multiple parallel views are a powerful feature, you'll often be able to manage your interfaces more effectively by nesting your view
s, and pairing those views with nested states.
HTML
<div ui-view>
<div ui-view='header'></div>
<div ui-view='content'></div>
<div ui-view='footer'></div>
</div>
The majority of ui-router
's power is it can manage nested state & views.
Pros
- You can have multiple
ui-view
on single page
- Various views can be nested in each other and maintained by defining state in routing phase.
- We can have child & parent relationship here, simply like inheritance in state, also you could define sibling states.
- You could change the
ui-view="some"
of state just by using absolute routing using @
with state name.
- Another way you could do relative routing is by using only
@
to change ui-view="some"
. This will replace the ui-view
rather than checking if it is nested or not.
- Here you could use
ui-sref
to create a href
URL dynamically on the basis of URL
mentioned in a state, also you could give a state params in the json
format.
For more Information Angular ui-router
For better flexibility with various nested view with states, I'd prefer you to go for ui-router
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…