These are chat archives for HackedByChinese/ng-idle

19th
Feb 2016
AGrownMan
@AGrownMan
Feb 19 2016 00:14
@vladoros Thank you. I made your three changes. The timer works in the browser now, but there is no modal popup. Instead, the text is printed in the same browser window. Also, there are no real stylings so it just looks like bare unstyled html output. And yes, I return to the angular docs periodically, but I also learn by experimenting with code like this.. What other changes do I need to make to get the app in the stack overflow posting to function with modals and styles like the ngIdle demo from which the code came?
AGrownMan
@AGrownMan
Feb 19 2016 01:07
@HackedByChinese The version at your demo site has a pretty popup modal that looks professional https://hackedbychinese.github.io/ng-idle/ but the version resulting from the stack overflow question and vladoros' suggestions looks like 1993 html version 0.0.1. I am wondering if this might be due to the demo not specifying the include files? How do I change the code to get the pretty, professional pop-up that your demo uses?
Mike Grabski
@HackedByChinese
Feb 19 2016 13:33
@AGrownMan You also need to make sure the bootstrap CSS is getting included. Keep in mind the demo was intended to be just an example of how you can use it, and I wrote it using an older release of UI-Bootstrap. The demo is not supposed to be the literal or only way you use ng-idle. My expectation is that you understand the components your application is using enough to integrate ng-idle into it the way you like.
I completely understand wanting to jump right in and get a working example running, but you gotta slow down a little bit and understand what's going on.
AGrownMan
@AGrownMan
Feb 19 2016 17:46
@vladoros The link you gave has a bunch of partial pages. Do you have a link with complete pages?

@HackedByChinese Adding the following did not resolve the problem. Can you make a more specific code suggestion based on the code that I actually posted? <head>
<title title>NgIdle Sample</title>
<link href="bower_components/angular-bootstrap/ui-bootstrap-csp.css" rel="stylesheet"/>

</head>

Mike Grabski
@HackedByChinese
Feb 19 2016 19:02
That file is not the bootstrap CSS file. If you don't know what CSP is, just omit it. UI-Bootstrap does not include bootstrap; you need to source it separately. In your example repo, you do have the bootstrap SASS source in there that you just need to have compiled and included in your page (which BTW, your yeoman generator already set this up for you, but you commented it out).
See my answer to your question on SO
You really need to read the manual for UI-Bootstrap, Bootstrap, and your Yeoman generator.
AGrownMan
@AGrownMan
Feb 19 2016 21:15
@HackedByChinese The reason that I un-coupled the yeoman generator is that it was deleting ng-Idle every time the app restarted. I do appreciate your advice. I especially appreciate your looking in to how to fit your code into these use patterns. Please understand that I devote one or two full days each week purely to reading documentation, tutorials, and books. But the real learning happens when a person applies such things to re-arranging existing code.
Mike Grabski
@HackedByChinese
Feb 19 2016 21:19
Most generators I've seen automatically add whatever bower scripts you've installed to your HTML for you. If you just copied the scripts into the folder, bower doesn't know about it and yes it would get "lost" when it rebuilds
AGrownMan
@AGrownMan
Feb 19 2016 21:19
@HackedByChinese I have what might be my last major question for a while, if it gets resolved. I would like to use ng-Idle as a re-usable service within an AngularJS app. This is probably a very common use case. I have re-arranged the code in a new iteration of the problem in a new stack overflow question with its own link to a new tar containing the code in a complete minimal app. Are you willing to take a look at it also? You are free to use the result in your own documentation. Here is the link: http://stackoverflow.com/questions/35515053/how-do-i-connect-this-re-usable-service-to-a-view