Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between ui-sref and $state.go in AngularJS UI-Router

Is there any functional difference between ui-sref and $state.go()?

ui-sref is used in <a>...</a> and $state.go('someState') is used in a controller.

In HTML, I would use:

<a ui-sref="currentState.state1">Link</a> 

whereas in a function I would use something like:

if(someCondition) {     $state.go('currentState.state1'); } 

So, is that it or do I need to add something after $state.go()? Assuming current state is currentState.

like image 546
Aniket Sinha Avatar asked Jul 02 '14 08:07

Aniket Sinha


People also ask

What is UI-sref in AngularJS?

ui-sref stands for UI-Router state reference. It's a way to change states/state params (as defined in using the $stateProvider in a config block using the ui. router module for AngularJS. You can read the ui-sref documentation here.

What is state go in AngularJS?

The $state.go is an AngularJS directive that tells the view to update its URL to reflect the current state of the application. This directive is used to change the URL without navigating away from the current page.

What is UI Router in AngularJS?

Angular-UI-Router is an AngularJS module used to create routes for AngularJS applications. Routes are an important part of Single-Page-Applications (SPAs) as well as regular applications and Angular-UI-Router provides easy creation and usage of routes in AngularJS.

What is stateProvider in AngularJS?

$stateProvider is used to define different states of one route. You can give the state a name, different controller, different view without having to use a direct href to a route. There are different methods that use the concept of $stateprovider in AngularJS.


2 Answers

There is no functional difference between ui-sref and $state.go. See the doc

Activating a state

There are three main ways to activate a state:

  • Call $state.go(). High-level convenience method.
  • Click a link containing the ui-sref directive.
  • Navigate to the url associated with the state.

So, these are at the end doing the same, and as we can see in the code of the ui-sref directive:

... element.bind("click", function(e) {     var button = e.which || e.button;     if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {        var transition = $timeout(function() {         // HERE we call $state.go inside of ui-sref         $state.go(ref.state, params, options);       }); 

it does call $state.go()

And also as discussed here: ui-sref:

ui-sref='stateName' - Navigate to state, no params. 'stateName' can be any valid absolute or relative state, following the same syntax rules as $state.go()

like image 142
Radim Köhler Avatar answered Nov 09 '22 18:11

Radim Köhler


Yes, there is a difference. As you can see in the question:

Ionic framework $state.go('app.home'); is adding back button on page where i want to go (how to remove it)?

the $state.go by default adds a back button. The solution to make it behave exactly the same way is to call:

$ionicHistory.nextViewOptions({disableBack: true}); 

before calling $state.go.

like image 43
Gerard Carbó Avatar answered Nov 09 '22 18:11

Gerard Carbó