I am trying to get ng-idle to hook up to css and modal the way it looks in this working example at this link. I have interpreted the code at the link to mean that I should type the code below to implement it, but the code below does not hook the controller or the styling up to the view. What specific changes need to be made to the code below to successfully implement ng-idle the way it looks in the demo link above, with modal warning and with styling for the buttons, etc.?
The situation can be recreated on your computer by downloading a fully functioning MINIMAL reproduction by clicking the link to this file sharing site, and then viewing the contents of index.html and app.js which are currently the following:
index.html is:
<html ng-app="demo">
<head>
<title title>NgIdle Sample</title>
</head>
<body>
<section data-ng-controller="DemoCtrl">
{{ started }} <!-- this SYSO of the `start` variable does not print -->
<p>
<button type="button" class="btn btn-success" data-ng-hide="started" data-ng-click="start()">Start Demo</button>
<button type="button" class="btn btn-danger" data-ng-show="started" data-ng-click="stop()">Stop Demo</button>
</p>
</section>
<script type="text/ng-template" id="warning-dialog.html">
<div class="modal-header">
<h3>You're Idle. Do Something!</h3>
</div>
<div idle-countdown="countdown" ng-init="countdown=5" class="modal-body">
<progressbar max="5" value="5" animate="false" class="progress-striped active">You'll be logged out in {{countdown}} second(s).</progressbar>
</div>
</script>
<script type="text/ng-template" id="timedout-dialog.html">
<div class="modal-header">
<h3>You've Timed Out!</h3>
</div>
<div class="modal-body">
<p>
You were idle too long. Normally you'd be logged out, but in this demo just do anything and you'll be reset.
</p>
</div>
</script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/ng-idle/angular-idle.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
And app.js is:
'use strict';
angular.module('demo', ['ngIdle', 'ui.bootstrap'])
.controller('DemoCtrl', function($scope, Idle, Keepalive, $modal){
$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 = $modal.open({
templateUrl: 'warning-dialog.html',
windowClass: 'modal-danger'
});
});
$scope.$on('IdleEnd', function() {
closeModals();
});
$scope.$on('IdleTimeout', function() {
closeModals();
$scope.timedout = $modal.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;
};
})
.config(function(IdleProvider, KeepaliveProvider) {
IdleProvider.idle(5);
IdleProvider.timeout(5);
KeepaliveProvider.interval(10);
})
.run(['Idle', function(Idle) {
Idle.watch();
}]);
Now that the problem is recreated, what changes need to be made to the code above to get it to implement modal and styling as in the example/demo at the link at top of the OP?
Inside the project you TARed, there were four things:
ng-app="demo"attribute is added to thehtmlorbodyelement. The valuedemoshould be changed to match whatever you call your application when you define your application module in this line ofapp.js:angular.module('demo', [/* etc. */])ui-bootstrap-tpls.min.jsand notui-bootstrap.min.js; the latter does not include HTML templates for the directives (with the expectation that you'd supply them yourself), and the former does. See the UI-Bootstrap getting started guide.$modalhas been renamed to$uibModal, so just search and replace that token.styles/main.css.Some of these things (1,2, and 4) were probably already set up for you by the Yeoman generator, and you hacked it apart trying to paste in the ng-idle demo code.
Here's your index.html (with all the commented out stuff removed):
Here's
app.js:I respect a hands-on approach to learning how things work, but I'd recommend you pump the brakes a little and learn about the relationship between Angular, your yeoman generator, Bootstrap, UI-Bootstrap, and ng-idle, and how to use each of these things.