Difference Between Using Ui-sref And Href(where To Use) In Ionic Framework Using Ui-router Service

I am working on ionic framework. So I am confused with using ui-sref and href. For example for tabs we use ui-sref as we can have various states all linked to some main (base) url.

Solution 1:

here should i use ui-sref or href.

From docs: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

A directive that binds a link ( tag) to a state. If the state has an associated URL, the directive will automatically generate & update the href attribute via the $state.href() method. Clicking the link will trigger a state transition with optional parameters. Also middle-clicking, right-clicking, and ctrl-clicking on the link will be handled natively by the browser.

<a ui-sref="home">Home</a> is converted to:

<ahref="#/home"ui-sref="home">Home</a>

Use ui-sref if you decided to use ui-router. This is a best practice. You can change in your code associated URL for the same state and you don't need to maintain your links.

---

Developers rarely use href for example in big lists for better performance to avoid additional watchers, but hope its not your case

Solution 2:

<aclass="button button-positive"ui-sref="dashboard.editClaim"> Edit Claim
   </a>

is going to get convert in:

<aclass="button button-positive"href="#/dashboard/editClaim"> Edit Claim
   </a>

in your browser since ui-sref is just a simple directive provided by angular. For more info: https://scotch.io/tutorials/3-simple-tips-for-using-ui-router What's next? You should use ui-sref when using ui-router