Page refreshing using angular-routing(ui-sref) in spring boot+security+angularjs

Question

Here i'm working with angular-routing in spring-boot+security application. When I use ui-sref to access a state defined in $stateProvider, the whole page get refresh. How can I stop refreshing and just append the url and view the template?

angularJS code:

myApp.config(function($stateProvider, $urlRouterProvider) {
  // $urlRouterProvider.otherwise('/');
   $stateProvider
    .state('hi', {
        url: '/hi/:id',
        reloadOnSearch : false,
        views :{
            "properties" : {
                templateUrl: "views/properties.html",
                controller : function($scope,$stateParams){
                    //alert("hi");
                }
            }
        }
    });
});

HTML code:

<div class="col-md-7" ui-sref="hi ({Id: 1})"> 
       <h5 class="widget-title smaller" >{{id.name}}</h5>
</div>

Answer 1

You shouldn't use both ngRoute and UI-router. Here's a sample code for UI-router:

repoApp.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('state1', {
      url: "/state1",
      templateUrl: "partials/state1.html",
      controller: 'YourCtrl'
    })

    .state('state2', {
      url: "/state2",
      templateUrl: "partials/state2.html",
      controller: 'YourOtherCtrl'
    });
    $urlRouterProvider.otherwise("/state1");
});

I hope this gives your solution.