Differencebetween Angular-Route and Angular-Ui-Router

What is the difference between angular-route and angular-ui-router?

ui-router is a 3rd-party module and is very powerful. It supports everything the normal ngRoute can do as well as many extra functions.

Here are some common reason ui-router is chosen over ngRoute:

• ui-router allows for nested views and multiple named views. This is very useful with larger app where you may have pages that inherit from other sections.

• ui-router allows for you to have strong-type linking between states based on state names. Change the url in one place will update every link to that state when you build your links with ui-sref. Very useful for larger projects where URLs might change.

• There is also the concept of the decorator which could be used to allow your routes to be dynamically created based on the URL that is trying to be accessed. This could mean that you will not need to specify all of your routes before hand.

• states allow you to map and access different information about different states and you can easily pass information between states via $stateParams.

• You can easily determine if you are in a state or parent of a state to adjust UI element (highlighting the navigation of the current state) within your templates via $state provided by ui-router which you can expose via setting it in $rootScope on run.

In essence, ui-router is ngRouter with more features, under the sheets it is quite different. These additional features are very useful for larger applications.

More Information:

• Github: https://github.com/angular-ui/ui-router
• Documentation:
  
  
  • API Reference: http://angular-ui.github.io/ui-router/site/#/api
  • Guide: https://github.com/angular-ui/ui-router/wiki
• FAQs: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
• Sample Application: http://angular-ui.github.io/ui-router/sample/#/

what is the different between ['ngRoute', 'ui.router']?

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.

States are bound to named, nested and parallel views, allowing you to powerfully manage your application's interface.

From: https://github.com/angular-ui/ui-router

Angular2 router VS ui-router-ng2 VS ngrx router

General information

NGRX Router docs

ngrx router is Deprecated! There is migration strategy from ngrx router to the standard Angular2 Router.

Angular2 Router docs

1. Default solution from Angular team
2. Was inspired by UI-router from AngularJS
3. Built for components

Angular2 Router has almost all UI-router features.

NG2 UI-router docs

Well known UI-router from AngularJS updated for the Angular2. From the known advantages - makes smoother update from AngularJS UI-router to ng2 UI-router.

Comparing

Let's compare syntax of UI-router both versions with Angular2 Router.

AngularJS UI-router :

app.config(function($stateProvider){
    $stateProvider.state('home', {
        url: '/home',
        templateUrl: 'home.html',
        controller: 'HomeCtrl'
    })
});

Angular2 UI-router :

export let state1: Ng2StateDeclaration = {
    name: 'home',
    component: HomeComponent,
    url: '/home'
}

@NgModule({
 imports: [
   SharedModule,
   UIRouterModule.forChild({ states: [home] })
 ],
declarations: [HomeComponent]
})
export class MyModule {}

Angular2 Router :

(Update: property - name was removed after V3-alpha7. Because it didn't work out with lazy loading of routes.)

import {
    RouteConfig,
    Route
} from 'angular2/router';
import {HomeComponent} from './components/home';

@Component({})
@RouteConfig([
    new Route({ 
        path: '/home', 
        component: HomeComponent, 
        name: 'Home' // Deprecated property, works until v3-alpha7
    })
])
export class App {...}

As we can see, in general, Angular2 Router is pretty much the same. As addition need to say that it support most of the common features like static/dynamic data sharing through the routes, nested views etc.

• Same location strategies (Path and Hash)
• Similar route definitions
• Similar services:
  
  
  • $state.go and Router.navigate
  • $stateParams and RouteParams
  • $state.current.data and RouteData
• Similar directives
  
  
  • ui-view and router-outlet
  • ui-sref and routerLink

Conclusion

Angular2 Router had taken best of UI-router experience and implemented it. If you need easy migrate your code base with AngularJS UI-router to Angular2 fast and smoothly, you can try Ng2 UI-router, otherwise, I think Angular2 Router will fit best. Even if you decided to use NG2 UI-router, check all pros and cons, at current point I feel like the community is going to choose a standard solution from the Angular team which means better support.

Angular UI Router VS ngRoute - mini-test

After some sound advice, I finally got it! Here are my answers and justifications.

Answers:

1. True
2. True
3. True
4. False

Justifications:

1. Following from the question " AngularJS : Difference between angular-route and angular-ui-router " one can see that states can be used to keep a history stack. (Keep states in mind, it will be useful later on).
2. Even though Angular UI can have nested views, those views can still be accessible by specific and unique URLs.
3. Even though a template can have several views, nothing prevents the relation of 1-1-1 with a controller-template-view. It is possible.
4. And here, states come in handy. Angular UI uses a state service, while ngRoute does not. The focus of the question was on this, but I was not getting it.

There you go, hope it helps other people !

What is the difference in angularJS between ui.router and ui.state?

In summary, ui.state was for v0.0.1, while ui.router is for v0.2.0 (the current version).

ui.state was the necessary module for users to inject as a dependency in v0.0.1 of ui-router. See the README at that release, as well as the relevant snippet from angular-ui-router.js (lines 45-48):

angular.module('ui.util', ['ng']);
angular.module('ui.router', ['ui.util']);
angular.module('ui.state', ['ui.router', 'ui.util']);
angular.module('ui.compat', ['ui.state']);

The README at v0.2.0 states under Quick Start: Set ui.router as a dependency in your module. Note: Use ui.state if using v0.0.1.

This is of course corroborated by angular-ui-router.js at v0.2.0, lines 79-83, showing the corresponding module dependency structure at that point:

angular.module('ui.router.util', ['ng']);
angular.module('ui.router.router', ['ui.router.util']);
angular.module('ui.router.state', ['ui.router.router', 'ui.router.util']);
angular.module('ui.router', ['ui.router.state']);
angular.module('ui.router.compat', ['ui.router']);

ng-view nested in ui-view, ui-router and ngRoute at same time

I continued trying to not use two different routers at the same time and finally I came up with a working solution.
It is based on this. I was running around the solution for some time, but finally I've got it working as I wanted.

Here is my final test app.

---

Related Topics