I am trying to get the most basic possible implementation of ng-Idle
working in node.js
on my devbox. Towards this end, I have taken the minimal sample shown at this link, and have installed it in what was a working minimal installation of node.js
, which I implemented using the instructions which I have documented at a file sharing site at this link. All I did to the working minimal node.js app was to go into a minimalist working app,
1.) Tyoe bower install ng-idle
in the root folder of the client app
2.) Comment out all of the old index.html
3.) Paste the code below from the link above into index.html
, and only change the url links to angular.js
and angular-idle.min.js
to the actual relative paths of those files in the project. (I confirmed that both links point to the actual js
libraries.
4.) Type grunt serve
in the root of the client folder where the app is located.
The above steps launched the app in a web browser, but gave the following compilation error:
Error: [$injector:modulerr] Failed to instantiate module demo due to:
IdleProvider.windowInterrupt is not a function
@http://localhost:9000/:122:9
If anyone is interested in the complete working app that recreates this simple problem, I put it in a tar ball and posted it to a file sharing site, which you can download by clicking on this link.
What specific steps need to be taken to resolve this error so that ng-idle can run in this basic installation of node.js?
Here is index.html
:
<html ng-app="demo">
<head>
<title title>NgIdle Sample</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/ng-idle/angular-idle.min.js"></script>
<script type="text/javascript">
var app = angular.module('demo', ['ngIdle']);
app
.controller('EventsCtrl', function($scope, Idle) {
$scope.events = [];
$scope.idle = 5;
$scope.timeout = 5;
$scope.$on('IdleStart', function() {
addEvent({event: 'IdleStart', date: new Date()});
});
$scope.$on('IdleEnd', function() {
addEvent({event: 'IdleEnd', date: new Date()});
});
$scope.$on('IdleWarn', function(e, countdown) {
addEvent({event: 'IdleWarn', date: new Date(), countdown: countdown});
});
$scope.$on('IdleTimeout', function() {
addEvent({event: 'IdleTimeout', date: new Date()});
});
$scope.$on('Keepalive', function() {
addEvent({event: 'Keepalive', date: new Date()});
});
function addEvent(evt) {
$scope.$evalAsync(function() {
$scope.events.push(evt);
})
}
$scope.reset = function() {
Idle.watch();
}
$scope.$watch('idle', function(value) {
if (value !== null) Idle.setIdle(value);
});
$scope.$watch('timeout', function(value) {
if (value !== null) Idle.setTimeout(value);
});
})
.config(function(IdleProvider, KeepaliveProvider) {
KeepaliveProvider.interval(10);
IdleProvider.windowInterrupt('focus');
})
.run(function($rootScope, Idle, $log, Keepalive){
Idle.watch();
$log.debug('app started.');
});
</script>
</head>
<body ng-controller="EventsCtrl">
<div idle-countdown="countdown">
<h1>Idle and Keepalive events</h1>
<button type="button" ng-click="reset()">Reset manually</button>
<ul>
<li ng-repeat="event in events">{{event}}</li>
</ul>
<div idle-countdown="countdown">
Timeout in {{countdown}} seconds.
</div>
<div>
Change idle value <input type="number" ng-model="idle" />
</div>
<div>
Change timeout value <input type="number" ng-model="timeout" />
</div>
</div>
</body>
</html>
Sorry about that. That repo is using the
git-flow
source control technique, so thedevelop
branch is where unreleased work goes, andmaster
represents the release branch. Theindex.html
you were looking at includes an example of how to use a feature that was added that hasn't been officially released yet.I'll move ahead with releasing the pending features, but in the meantime you can remove the
IdleProvider.windowInterrupt
line, as that's not available in version 1.1.1. The sample index.html from the release is found in master.I ran your example with that line removed and it works as expected.