Stored memory is not freed after changing ng-view content
I have an audio player app implemented in AngularJS but it consumes a lot of RAM. The sequence of actions that I follow is as follows:
- route to login page
- then go to next page
- Output
- repeat steps 1 to 3 times
It is surprising that the memory for the first step is 38MB , then it increases to 211MB after the second step, after the third step it is 249MB , etc., so it is cumulative and no memory is freed after any ng-view changes
Here's an example of my code:
index.html page
<html ng-app="myApp">
<head><!-- application dependencies (js and css files) --></head>
<body>
<div ng-view></div>
</body>
</html>
app.js file
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', '$httpProvider',
function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.when('/login', {
templateUrl: 'login.html',
controller: 'loginController'
});
$routeProvider.when('/', {
templateUrl: 'home.html',
resolve:{/** resolve function for login checking */}
controller: 'homeController'
});
}]);
I tried the solution of clearing $ templateCache as cleared in this question , but it cannot be a solution in my case when I tried it and the problem is not in the template itself, but something is wrong with the DOM and Controller data
How can I deal with this memory problem, so when I change the view in ng-view it won't consume all that memory (since it is not template size)
Update 1:
I switch between views on login or logout using $ location.path ('/ route') after the login credentials have been resolved and after checking the server response after logging out, so could this be the problem?
Update 2:
I have created plunkers that simulate the increase in memory when switching views too much (of course, these are not actual numbers, like this simulation)
source to share
Interestingly, it loginController
doesn't seem to be cleared from memory. You may have to try running $destroy()
to clear this controller. This assumes that it is loaded multiple times.
A few more resources that may help: blog post about a $destroy()
somewhat similar github issue
source to share
I think you need to implement an angular-websocket approach, similar to Trello, whereby after a certain amount of time, you ask the user to refresh their page to receive new updates on the system, or to update them if their socket connection is down? Depending on your setup, you may find this tutorial helpful: Writing an AngularJS Application with Socket.IO .
Read the latest update to the accepted answer of your referenced question.
source to share