Change URl without reloading in AngularJS

Question

I am using the following code to change the URL without reloading in AngularJS. But when i use this function, if I go to other state from this controller it is re-initializing the same controller. How can we avoid the re-initialization of the same controller again in AngularJS.

State Change Method

 $state.transitionTo(url, {paramType:type,resultquery:parameter}, {
        location: true,
        inherit: true,
        notify: false,

      });

I suspect that this function is causing the controller reinitialization issue in AngularJS. If this is the issue how can I solve the controller reinitialization?

Answer 1

This is how Angular works. Controllers are reinitialized every time you change state. If you have data which should be shared across states, you should put it in a service or factory and then reference it in the controller.

Example:

Controller

angular.module('Test')
    .controller('TestController', ['TestService', TestController]);

function TestController(TestService) {
    var self = this;
    self.data = TestService.sharedData;
}

Service

angular.module('Test')
     .service('TestService', [TestService]);

function TestService() {
   var self = this;

   self.sharedData = ['array', 'of', 'data'];
}