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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.