AngularJS - Is a service not "static"?

Question

AngularJS - Is a service not "static"?

Navigation

#1 by (4 votes)
#2 by (3 votes)

1

Based on the idea that services are singletons ( All Services are singletons ), if I create a simple service with "local" variables and modify this in a controller, when accessing this value in another controller, it should keep the value, right?

Example:

angular.module("app", []);
angular.module("app").service("service", function() {
  
  var _count = 0;
  
  this.incrementCount = function() {
      _count ++;
      console.log(_count);
  };
  
});

angular.module("app").controller("ctrl1", function($scope, service) {
  $scope.increment = function() {
      service.incrementCount();
   }
});

angular.module("app").controller("ctrl2", function($scope, service) {
   $scope.increment = function() {
      service.incrementCount();
   }
});

<!DOCTYPE html>
<html ng-app="app">
<head>
	<title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script></head><body><divng-controller="ctrl1">
  
    <button ng-click="increment()" value="ctrl1" >Ctrl1 </button> 
    
  </div>

   <div ng-controller="ctrl2">
  
      <button ng-click="increment()" > Ctrl2 </button> 
     
  </div> 
  
</body>
</html>

In this example, if you analyze the console, it increments the correct value regardless of the controller, but in my case, it happens that I only have one controller on the page and when I go to the next page (without holding the template) , this value resets to 0.

The way I make the system go to another page is by using the window object: window.location.href = "views/player.html"

I do this because my application runs in FILE protocol and I could not at least do it any other way, which prevents me from using templates (at least I could not use them).

Is this really the expected behavior?

angularjs

asked by anonymous 11.11.2015 / 14:57

2 answers

3

When you make an exchange using window.location , what happens is a page exchange through the browser, so that the entire angular application is reloaded and the values are zeroed. It's like opening everything from scratch.

To maintain application state, use the $location service that the angular provides. Documentation here: link $ location

11.11.2015 / 15:05

Doubt in jQuery variable creation Check string? [closed]

score 4 · Accepted Answer

To access this value in another controller, it should keep the value, right?

Correct , if this service is consumed under the same context. If, for example, you have the following structure:

<div ng-app='app1'>
    <div ng-controller='ctrl1'>
    </div>
</div>
<div ng-app='app2'>
    <div ng-controller='ctrl2'>
    </div>
</div>

And both ctrl1 and ctrl2 consume the same service, their values will diverge because they are in two different applications; the singletons generated to provide the service are distinct.

When you use window.location.href , you are destroying the current context and creating a new one.

One possibility that you might want to explore would be ngInclude , which allows you to dynamically load partial content keeping the current scope. So:

<div ng-include="views/player.html">