difference between using ui-sref and href(where to use) in ionic framework using ui-router service

Question

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.

eg

  .state('dashboard', {
    url: "/dashboard",
    templateUrl: 'templates/dashboard.html',
    controller: 'dashboardCtrl'
})

 .state('dashboard.active', {
    url: '/active',
     views: {
              'active': {
                templateUrl:  'templates/active.html',
                controller: 'ActiveCtrl'
              }
            }

})

My dashboard page has tabs whish have various various states now if I want to move to a diffrent template from one of these states or templates (eg to active.html) eg.

//active.html

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

or

 <li class="item">
   <a class="button button-positive" href="#/dashboard/editClaim"> Edit Claim
   </a>
 </li>

here should i use ui-sref or href. Also editclaim template has tabs should i use ui-sref there and will it work fine because currently that is the problem. So I am wondering if I have to maintain some state till there. Thank you.

Answer 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:

<a href="#/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

Answer 2

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

is going to get convert in:

<a class="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