Angularjs - A service is not "static"?

Asked

Viewed 140 times

1

Starting from 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>
  
  <div ng-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 increases the correct value regardless of the controller that is, but in my case, it turns out that I only have a controller on the page and when I go to the next page (without keeping the template), this value restarts at 0.

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

I do so because my application runs on FILE protocol and I could not, at least, do otherwise, which prevents me from using templates (at least I could not use them).

That’s just the expected behavior?

angularjs

  • With going to the next page without keeping the template, what do you mean? It’s a redirect through Angular using $Location?

  • I just edited when I saw that this information was missing. It’s using the window object. For some reason, I couldn’t get him to go to another page using the $Location file protocol

2 answers

4


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

Correct, if this service consumed is 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>

So much ctrl1 and ctrl2 consume the same service, their values will differ 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.

A possibility you might want to explore would be ngInclude, which allows the dynamic load of partial content while maintaining the current scope. Thus:

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

  • Thanks for the tip! I’ll do a search on ng-include and anything I give a shout here

  • 1

    @Paulogustavo good luck!

  • Oops, sorry for the delay for a return. Due to lack of time, I ended up putting in the HTTP protocol to do tests only. Now that I voted with this problem, I tried to do it using ng-include, as you suggested. I put inside my index, the code "div ng-include="views/progressBar">. however, when I go to give an introspect in html, it appears commented http://puu.sh/lr5D8/60f2293955.png . You know why?

  • Ah, the problem was that it lacked simple quotes. But anyway, it seems that the browser does not allow this, it gives the following error: Xmlhttprequest cannot load file://C:/Development/Workspace/Bssjs/views/progressBars.html. Cross origin requests are only supported for Protocol schemes: http, data, Chrome, Chrome-Extension, https, Chrome-Extension-Resource.

  • @Paulogustavo hello there! This may be happening because you are running your project via a web server (IIS, Apache, etc.) via http or https and trying to load the file directly via protocol file:, and this violates CORS rules. Try using a relative URL.

  • Thanks for your attention. Just giving an update on the information, I’m running the file protocol, but it still doesn’t work. The tests I did were on Chrome, and I noticed that other people had this problem and in the browser executor, they pass some parameters to disable it. In firefox worked perfectly and qtwebkit also worked, since there we can disable after building. Anyway, ng-include worked. Thank you so much for your help!! Hugs

Show 1 more comment

3

When making an exchange using window.location, what happens is a page exchange by the browser, so the entire angular application is reloaded and the values reset. It’s like opening up from scratch.

To maintain the application status, use the $location that the angular provides. Documentation here: https://docs.angularjs.org/api/ng/service/$Location

  • Hmmmm, interesting. Using window.Location, as you said, makes it reload everything.. but what happens to the things that are in memory ? Angularjs tries to force GC to clean ? Something like that? And about using $Location, you can tell if it is possible to use it normally in the file protocol?

  • Angular does nothing of gc, the browser does this by throwing everything away, without even questioning the angle and moving to the next page. What would be the file protocol?

  • I don’t know how to define it very well, but lightly, is to open an html file on your computer by Brower. It’s the file://

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.