Inside the project you are TARed, there were four things:
- You need to make sure that the
ng-app="demo" attribute is added to the html or body element. The demo value should be changed according to what you call your application when you define your application module in this line app.js : angular.module('demo', [/* etc. */]) - Make sure you include
ui-bootstrap-tpls.min.js and not ui-bootstrap.min.js ; the latter does not include HTML templates for directives (with the expectation that you put them yourself), and the former does. See the UI-Bootstrap Getting Started Guide. - The version of the UI-Bootstrap that you are referring to is later than the version with which I wrote the demo.
$modal been renamed to $uibModal , so just find and replace this token. - Make sure you include Bootstrap in the CSS of your application. You started this application using the Yeoman generator, and this generator seems to compile Bootstrap SASS into CSS in
styles/main.css .
Some of these things (1,2 and 4) are probably already configured for you by the Yeoman generator, and you hacked it while trying to insert the ng-idle demo code.
Here is your index.html (with all commented materials removed):
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="styles/main.css"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> </head> <body ng-app="demo"> <div class="header"> <div class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#/">client</a> </div> <div class="collapse navbar-collapse" id="js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#/">Home</a></li> <li><a ng-href="#/about">About</a></li> <li><a ng-href="#/">Contact</a></li> </ul> </div> </div> </div> </div> <div class="container"> <div ng-view=""> <section data-ng-controller="DemoCtrl"> {{ started }} <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> </div> </div> <div class="footer"> <div class="container"> <p><i class="fa fa-heart"></i> from the Yeoman team</p> </div> </div> <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/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script> <script src="bower_components/angular-animate/angular-animate.js"></script> <script src="bower_components/angular-aria/angular-aria.js"></script> <script src="bower_components/angular-cookies/angular-cookies.js"></script> <script src="bower_components/angular-messages/angular-messages.js"></script> <script src="bower_components/angular-resource/angular-resource.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> <script src="bower_components/angular-touch/angular-touch.js"></script> <script src="bower_components/ng-idle/angular-idle.min.js"></script> <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> <script src="scripts/app.js"></script> <script src="scripts/controllers/main.js"></script> </body> </html>
Here is app.js :
'use strict'; angular.module('demo', ['ngIdle', 'ui.bootstrap']) .controller('DemoCtrl', function($scope, Idle, Keepalive, $uibModal){ $scope.started = true; 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; }; }) .config(function(IdleProvider, KeepaliveProvider) { IdleProvider.idle(5); IdleProvider.timeout(5); KeepaliveProvider.interval(10); }) .run(['Idle', function(Idle) { Idle.watch(); }]);
I respect the hands-on approach to learning how everything works, but I would recommend that you step up the brakes a bit and learn about the relationship between Angular, your yoma generator, Bootstrap, UI-Bootstrap, and ng inactivity and how to use each of these things.
HackedByChinese Feb 19 '16 at 13:55 2016-02-19 13:55
source share