$route: This is used for deep-linking URLs to controllers and views (HTML partials) and watches $location.url() in order to map the path from an existing definition of route.
When we use ngRoute, the route is configured with $routeProvider and when we use ui-router, the route is configured with $stateProvider and $urlRouterProvider.
ngRoute - It is a part of AngularJs and was developed by Angular.js team.
Syntax:
<div ng-view></div>
$routeProvider
.when('/contact/', {
templateUrl: 'app/views/core/contact/contact.html',
controller: 'ContactCtrl'
});
ui-router - It is used to enhance and to improve the capabilities of routing, It is basically a framework.
Syntax:
<div ui-view>
<div ui-view='abc'></div>
<div ui-view='abc'></div>
</div>
$stateProvider
.state("contact", {
url: "/contact/",
templateUrl: '/app/Aisel/Contact/views/contact.html',
controller: 'ContactCtrl'
});
ui-router supports everything the normal ngRoute has as well as many extra functions.
There are some powerful reasons to use ui-router over ngRoute:
- It is used for large application
where the user have many pages and
that are inheriting from different
section. So ui-router is used for
the nesting views.
- It allows the user to have a strong
linking between the state. So on
changing the url in a particular
place, it will update every link to
that state.
- User can also pass information
between states with the help of
$stateParams.
1 Comment(s)