Angular route Vs Angular UI Router

As everyone confused..myself confused with route & ui-router..

ngRoute (angular-route.js) and ui-router (angular-ui-router.js)

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.

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.

Example: http://angular-ui.github.io/ui-router/sample/#/

Docs: http://angular-ui.github.io/ui-router/site/#/api, https://github.com/angular-ui/ui-router/wiki

$state.go()

If you want to pass non-URL state, then you must not use url when setting up your state. I foundthe answer on a PR and did some monkeying around to better understand.

$stateProvider.state('toState', {
  templateUrl:'wokka.html',
  controller:'stateController',
  params: ['referer', 'param2', 'etc']
});

Then you can navigate to it like so:

$state.go('toState', { 'referer':'jimbob', 'param2':37, 'etc':'bluebell' });

Or:

var result = { referer:'jimbob', param2:37, etc:'bluebell' };
$state.go('toState', result);

And in HTML thusly:

<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

This use case is completely uncovered in the documentation, but I think it’s a powerful means on transitioning state without using URLs.

If with URL??

All you had to do was add a parameter to the url state definition like so

url: '/toState?referer'
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s