AngularJS - following ng-idle example but getting an error

Time to get some help because this the 3rd day that I'm trying to figure out what I'm missing

1. I'm following this example ng-idle example
I found other examples as well and this is another Another example

2. You can see it here. I have the "start demo" button on the front page
http://147.75.0.124:88/

3. In module.js, I have this. I step thru it and I see 'Idle' is defined

(function() {
    'use strict';

    angular.module('lawApp', ['ui.bootstrap', 'ngIdle'])
    .config(["IdleProvider", "KeepaliveProvider", function (IdleProvider, KeepaliveProvider) {
        IdleProvider.idle(5);
        IdleProvider.timeout(5);
        KeepaliveProvider.interval(10);
    }])
        .run(['Idle', function (Idle) {
        Idle.watch();
    }]); //['ui.bootstrap']  I moved this to login page and it works fine. Having it here and not having it in the login page also works

  
})();

Open in new window

4. I put the rest of the code from the demo in logincontroller.js

 function loginController($scope, loginService, $uibModal,Idle,Keepalive)
   {
       .....

            //*** idle

       $scope.started = false;

       function closeModals() {
           if ($scope.warning) {
               $scope.warning.close();
               $scope.warning = null;
           }

           if ($scope.timedout) {
               $scope.timedout.close();
               $scope.timedout = null;
           }
       }

       $scope.$on('IdleStart', function () {
           closeModals();

           $scope.warning = $uibModal.open({
               templateUrl: 'warning-dialog.html',
               windowClass: 'modal-warning'
           });
       });

       $scope.$on('IdleEnd', function () {
           closeModals();
       });

       $scope.$on('IdleTimeout', function () {
           closeModals();
           $scope.timedout = $uibModal.open({
               templateUrl: 'timedout-dialog.html',
               windowClass: 'modal-danger'
           });
       });

       $scope.start = function () {
           console.log('start');
           closeModals();
           Idle.watch();
           $scope.started = true;
       };

       $scope.stop = function () {
           console.log('stop');
           closeModals();
           Idle.unwatch();
           $scope.started = false;

       };
       //*** end of idle
   }

Open in new window


This is what happens

1. When page is loaded, I get the "timeout" message after 5 seconds. Why is this? in the demo, you have to click on the button

2. Click on the button and you can see the error in Console. "Idle" is not defined. Why is this?

I don't know what I'm missing. I read about $rootScope and not sure if I need that. Found other examples as well but still don't know what I'm missing
LVL 8
CamilliaAsked:
Who is Participating?
 
Leonidas DosasCommented:
At the angular-idle.js file you initialize some angular functions-statements inside an Immediately-Invoked Function Expression (IIFE) ie.
(function(){
  //some code here...  
})();

Open in new window

Capture.JPGIn this IIFE function you declare and define the watch function lines 255-270
Capture.JPGThe watch function is not in the global scope so at the next js file (loginController.js) you can't have access to this function.You must declare the watch() in the global scope or you must set the logincontroler inside  the angular-idle scope.Check this simple sample.
(function(){
  var functionOne=function(){
    console.log('This is function one');
  };
  
})();
(function(){
  functionOne();
})();

Open in new window

You have this error
Capture.JPG
And for this situation:
(function(){
  var functionOne=function(){
    console.log('This is function one');
  };
  (function(){
  functionOne();
})();
  
})();

Open in new window

Capture.JPG
0
 
Nitin SontakkeDeveloperCommented:
DISCLAIMER FIRST: I am not answering your question.

IF this is something new that you are initiating or in the process of learning Angular, I strongly suggest that you start learning Angular 2 or 4, which is way different than AngularJs. Pretty much all your investment in AngularJs would potentially be a waste.
0
 
CamilliaAuthor Commented:
I have to continue with AngularJS for this project. Is AngularJS totally going away??
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Leonidas DosasCommented:
You have this error
Capture.JPGAlso you have wrapped the loginControler into a IIfe function so for that reason the watch function is undefined. Unwrap the controller from the IIFE and retry.
Capture.JPG
0
 
leakim971PluritechnicianCommented:
1. When page is loaded, I get the "timeout" message after 5 seconds. Why is this? in the demo, you have to click on the button

The demo say at the end of the page : (https://hackedbychinese.github.io/ng-idle/)
You could configure the Idle service to start as soon as the application runs with the following:
myApp.run(['Idle', function(Idle) {
  Idle.watch();
}]);

Open in new window

when your code run it by default (three last lines) :
(function() {
    'use strict';

    angular.module('lawApp', ['ui.bootstrap', 'ngIdle'])
    .config(["IdleProvider", "KeepaliveProvider", function (IdleProvider, KeepaliveProvider) {
        IdleProvider.idle(5);
        IdleProvider.timeout(5);
        KeepaliveProvider.interval(10);
    }])
        .run(['Idle', function (Idle) {
        Idle.watch();
    }]); //['

Open in new window

1
 
CamilliaAuthor Commented:
Leo,

I know the error on that line but I don't know why 'idle' is undefined. don't know how to do "Unwrap the controller from the IIFE and retry."

All my controllers are like that.

How can I redo the controller so the watch doesn't become undefined?
0
 
CamilliaAuthor Commented:
ah, ok, now I have a better understanding of why it's undefined. Let me look at your example and play around with the code.

I want to keep my controller as I have it and still have ng-Idle working. But let me look at your post and see what I come up with.
0
 
CamilliaAuthor Commented:
Thanks, Leo. Great explanation. I understand it. I'm going to close this but still can't figure out one thing on it. I'll close this and open a new question after I research what I want to get working more.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.