3

I have audio player application implemented in AngularJS, but it consumes large amount of RAM. The sequence of actions I'm doing is the following:

  1. route to login page
  2. login then go to the next page
  3. logout
  4. repeat steps from 1 to 3 several times

The surprise is that the memory for the first step is 38 MB, then it increase to be 211 MB after the second step, after the third step it's 249 MB and so on, so it's accumulative and no memory is being freed after any of ng-view changes

Here it is sample 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 cleaning $templateCache as cleared in this question, but it can't be a solution in my case as I tried it and the problem not in the template itself, but something wrong with DOM and Controller data

How can I handle this memory issue, so when I change the view in ng-view It won't consume all this memory (as it's not the template size)

Update 1:

I switch between views when login or logout using $location.path('/route') after resolving the data of login and after checking the server's response after logout, so could it be the problem?

Update 2:

I created a plunker that simulate the increase of memory when switching views too much (of course it's not the actual numbers as it's a simulation)

Community
  • 1
  • 1
Kareem Elshahawy
  • 1,421
  • 1
  • 12
  • 28
  • I'm also facing the same issue that you mentioned here. but can't find any solution related to this issue. Additionally, i have around 300 to 400 controllers on my page (which would have their own events bound to them). Please note that I have not explicitly added any events to controls using "$on", so I cannot deregister them using destroy event. can you provide any solution to this issue? – Nilesh Gajare Dec 21 '17 at 11:17

2 Answers2

1

Interesting, it seems like the loginController isn't being cleared from memory. You may have to try triggering $destroy() yourself to clear that controller. This assumes that it is being loaded multiple times.

Another few resources that may help: blog post about $destroy() somewhat similar github issue

Keenan Lidral-Porter
  • 1,626
  • 9
  • 9
  • yes neither the loginController nor the homeController is cleared from memory, as trying to login again take the memory up to ~460 MB and so on. – Kareem Elshahawy Jan 03 '15 at 00:05
0

I think you need to implement angular-websocket based approach, similar to Trello, whereby after a certain amount of time you ask the user to update their page to receive new updates to the system or to refresh if their socket connection has timed out? Depending on your setup you may find this tutorial useful: Writing an AngularJS App with Socket.IO.

Read the last update of accepted answer of your referred question.

Community
  • 1
  • 1
Mohamed Yakout
  • 2,868
  • 1
  • 25
  • 45