AngularJS - got example working but broke the controllers

I've been trying to get this ng-idle example working and got help yesterday from Leakim and Leonidas here  The answer helped but I have an issue now....


You can see it here http://147.75.0.124:88/

1. I first put the ng-idle on the front page as an example and that works. You see that it pops up.
    I did it by changing module.js and I have config with  run
          I also change loginController and added the popup code to index.cshtml

That worked but I want it inside the site itself so I did this  Please login with this admin@admin.test /Password321$

2. Changed "mainController.js" and added
 
 angular
        .module('lawApp', ['ngIdle', 'ui.bootstrap'])
        .controller('mainCntrl', mainController)
    .config(function(IdleProvider, KeepaliveProvider) {
        IdleProvider.idle(5);
        IdleProvider.timeout(5);
        KeepaliveProvider.interval(10);
    }).run(['Idle', function (Idle) {
            Idle.watch();
        }]);
  

Open in new window


3. Added the ng-idle code to mainController.js

4. Added the popup code to the razor code

The idle popup displays but look at console and now the other controllers are broken. "feedController" is not defined anymore. Click on "Forms" and FormController is not defined anymore either.

Things I tried:

I added 'ngIdle' to feedController but didn't work
Changed the order of the controllers I call but then mainController throws an error

I know adding .module('lawApp', ['ngIdle', 'ui.bootstrap'])  to mainController is making the other controllers not get initialized. I've read about it on a link Julian Hanson sent me once. I fixed them a while back and now running into it again because I added ng-idle.

Please don't suggest rewriting this in Angular 2. I can't do that. There has to be a way to fix this without a major rewrite of all these controllers and services.
LVL 8
CamilliaAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Ok but I am confused. In main you have this
.module('lawApp')

Open in new window

In module.js you have this
 angular.module('lawApp', ['ui.bootstrap']);

Open in new window

And feed controller you have this
angular.module('lawApp', ['ui.bootstrap','smart-table','ngIdle'])

Open in new window


The MainController code is just a reference to the lawApp module
Whereas the Module.js is a declaration of a module as is the feedController.

You should have only one declaration - with all your dependent modules injected - the way you have it does not look correct.
0
 
Julian HansenCommented:
The console is showing an error before the idle runs. The error appears to indicate that the forms controller is not available.

I created a mockup of your app using scaled down versions of mainController and formsController and it works fine. I will need to progressively add to it to find why the code is not working.
0
 
CamilliaAuthor Commented:
There's a mainController and feedsController when user logs in.  Without adding "ngIdle", all the controllers work. It's after I added it that I get feedsController is not defined error. It's the same for all the controllers now except for the maincontroller.

I'll continue with this when I get home this afternoon. I'll go step by step again.

I thought having ngIdle in module.js....I  wouldn't need to add it again mainController but I have to add it and that's what makes it break.
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Julian HansenCommented:
I thought having ngIdle in module.js....I  wouldn't need to add it again mainController but I have to add it and that's what makes it break.
You should only need to include the module once - in the angular.module('lawApp',['ngIdle'])
But you will need to inject the service whereever it is used.
I will try with the ngIdle module and see if I can replicate.
1
 
CamilliaAuthor Commented:
I only had it once...in angular module...module.js. I didn't have it in maincontroller at first. The pop-up wouldnt show up. I stepped thru module.js when logged in and "Idle" in "run" was not defined. That's why i added the config and run to the maincontroller. Now pop-up shows up but other controllers are broken.

I stepped thru module.js when I first bring up the site...the login page...and "idle" in config and run sections are defined.
0
 
CamilliaAuthor Commented:
I left the config and run in module.js and removed it from mainController but I don't get the popup. "Idle" is not defined

error
(going step by step and removing code to see if I can pin point it)

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

Open in new window

0
 
CamilliaAuthor Commented:
Got it working. Will upload and post here soon. I want to know why this worked, tho.
0
 
CamilliaAuthor Commented:
I did this to get it working

1. mainController - I put it back the way it was
 
  angular
        .module('lawApp') // ['ui.bootstrap', 'ngIdle']
        .controller('mainCntrl', mainController);

Open in new window


2. I have the "idle" code from the link in mainController. I forgot to move it to feedController but it still works for some reason

 //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-danger'
            });
        });

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

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

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

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

        };


        //end of idle

Open in new window


3. changed module.js to its orginal code
(function() {
    'use strict';

    angular.module('lawApp', ['ui.bootstrap']);

Open in new window


4. Instead of changing mainController, I changed feedController and that made it work. I don't know why but it does I think it might have to do with how the controller is being initialized by having []

(function () {
    'use strict';
    angular.module('lawApp', ['ui.bootstrap','smart-table','ngIdle']) //so, added this to login page. removed it from module.js. Now added it here. This is step 2 of my testing
        .controller('feedCntrl', feedController)
    .config(function(IdleProvider, KeepaliveProvider) {
        IdleProvider.idle(5);
        IdleProvider.timeout(5);
        KeepaliveProvider.interval(10);
    }).run(['Idle', function (Idle) {
            Idle.watch();
        }]);

Open in new window

0
 
CamilliaAuthor Commented:
Ok, let me change it and see if it works...

So, do this?

1.  Change module.js to  angular.module('lawApp', ['ui.bootstrap','smart-table','ngIdle'])

2. Change other controllers to this angular.module('lawApp')

3. Then in other controllers, I need to have 'ngIdle','ui.bootstrap','smart-table' injected?
0
 
Julian HansenCommented:
Mostly
On point 3
1. Only inject what you need
2. The [ngIdle,ui.bootstrap ...] are modules - there are directives and services in there that would need to be injected into the controllers - not the modules themselves.
0
 
CamilliaAuthor Commented:
Ok thanks. I'll try it tonight
0
 
CamilliaAuthor Commented:
Fixed it.  Changed module.js and the controllers. Thanks for your help. Looks much better.
0
 
Julian HansenCommented:
You are welcome.
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.