javascript - with - ui router angularjs
What is the difference between angular-route and angular-ui-router? (10)
I'm planning to use AngularJS in my big applications. So I'm in the process to find out the right modules to use.
What is the difference between ngRoute (angular-route.js) and ui-router (angular-ui-router.js) modules?
In many articles when ngRoute is used, route is configured with $routeProvider. However, when used with ui-router, route is configured with $stateProvider and $urlRouterProvider.
Which module should I use for better manageability and extensibility?
ngRoute is a angular core module which is good for basic scenarios. I believe that they will add more powerful features in upcoming releases.
URL: https://docs.angularjs.org/api/ngRoute
Ui-router is a contributed module which is overcome the problems of ngRoute. Mainly Nested/Complex views.
URL: https://github.com/angular-ui/ui-router
Some of the difference between ui-router and ngRoute
1- ngRoute is developed by angular team whereas ui-router is a 3rd party module. 2- ngRoute implements routing based on the route URL whereas ui-router implements routing based on the state of the application. 3- ui-router provides everything that the ng-route provides plus some additional features like nested states and multiple named views.
ng-View
(developed by the AngularJS team) can be used only once per page, whereas ui-View
(3rd party module) can be used multiple times per page.
ui-View
is therefore the best option.
Angular 1.x
ng-route is developed by the angularJS Team for routing.
ng-route: url (Location) based routing.
Ex:
$routeProvider
.when("/home", {
templateUrl : "home.html"
})
ui-router is develoepd by 3rd party module.
ui-router : state based routing
Ex:
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
--> ui-router allows for nested views
--> ui-router more powerful than ng-route
AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.
Basic thing you have to know: ng-router uses $location.path()
and ui-router uses $state.go
Rest us all features.
If you want to make use of nested views functionality implemented within ngRoute paradigm, try angular-route-segment - it aims to extend ngRoute rather than to replace it.
ngRoute is a basic routing library, where you can specify just one view and controller for any route.
With ui-router, you can specify multiple views, both parallel and nested. So if your application requires (or may require in future) any kind of complex routing/views, then go ahead with ui-router.
This is best getting started guide for AngularUI Router.
ngRoute is a module developed by the Angular.js team which was earlier part of the Angular core.
ui-router is a framework which was made outside the Angular.js project to improve and enhance routing capabalities.
ngRoute is part of the core AngularJS framework.
ui-router is a community library that has been created to attempt to improve upon the default routing capabilities.
Here is a good article about configuring/setting up ui-router: