angularjs one or more custom popup in all pages - javascript

My angularjs app has one or more quick links in all pages, each quick links need to show popup window.
Each popup has its own html, controller and service.
So, how to implement this, there are more than one popups which may need to display in most of the pages. popup must appear above the current view and should leave focus to below page after closing the popup.
also please advice me how to loaded these controllers and service JS files by Lazy Loading (Resolve).
is it possible to implement this by adding a extra ui-view for modal popup.

I have implemented the same using stick state Modal of UI-Router Extras
https://github.com/christopherthielen/ui-router-extras
demo link
http://plnkr.co/edit/qgt0RkEnXDPDTdMJPIfy?p=preview

Related

Any option available to load content inside iFrame faster?

I've a typical use case where i need to load content in a iFrame on my home page.
As user experience point of view, i see my Angular App renders in 2 sec & i see content inside iframe take around 3 more seconds which is a very bad user experience
Options Evaluated:
server side rendering via angular universal but I hope this case is irrelevant to SSR
Trying to show loader but all content in the Home page loads and user seeing loader in particular block it's very bad
Is there any way we can don't let the browser do the heavy job or better way to load content faster. Appreciate your views
are both parent and iFrame angular apps? if so, you should not use iFrame but an Angular Library instead.
if the iFrame content isn't angular, there isn't much you can do I guess...
To improve the UX you can render a loading spinner over the iFrame and listen for the "load" event and then remove the spinner.
If the iFrame is not in your HomePage but on a secondary page, you could load the iFrame in the HomePage but hide it, and then when you need to display it you can just place it in the right spot and show it to the user instantly.

Loading Specific version of Bootstrap on Particular Web Page

we have two versions of Bootstrap loaded one at the beginning at the login page and another one to the main page as they are completely isolated after loading
Here is a scenario, when the main page is loaded in multiple tabs one after other and after Signing out from one session causing that particular tab to redirect to the login page
But when rest of the tabs kept open, a modal popup screen gets triggered telling you that you had been signed off and clicking continue button lands directly into the login page
In that particular instance, two versions of bootstrap get loaded into the single page making the modal to fade after three seconds and breaking the rest of the structure where the classes had been included
As I'm looking for a solution in jQuery or JavaScript to call the necessary bootstrap plugin (i.e., by removing and adding) to load in particular page of the website.
For instance, loading the specific Bootstrap plugin on the login page as well as in the main page by removing and adding
<link rel="stylesheet" href="..."> snippets.
Whether is it possible to achieve the above scenario or by any other method could it be approached to solve.

Javascript one page dynamic div for mini pages

I have a one page website.
I have an area of the screen that is a div.
I want to be able to show different "mini" pages within this div based
on if the user clicks a button.
The contents of the div are html,javascript and images.
What is the best way to solve this?
I want it to be very responsive and fast, without re-loading the page itself.
Thank you
angular framework is great for single page apps. You can use the default ngRoute or the angular-ui-router to achieve the content swapping you want.

AngularJS : dialog as ng view

Assuming we have a single page with full screen background and couple of links on the top of the page.
I know how to load partial html pages in a container using angularjs and routing configuration but now the scenario is a bit different.
I'm looking for a way that each time user clicks on the application'link load the content in the modal dialog.User able to close the dialog but if user clicks link or changes routing the appropriate content to be load and show in the dialog.
My point is not just showing the dialog using angular.For example I want to if user changes the route to www.sitename.com/#about web-application loads about in the dialog and show it.
Is it possible?

Dynamically loading html and clearing DOM

So I'm working with a few multipage Jquery Mobile documents that I want to be able to navigate between but not leave the WebView created by the mobile web app and still have the transitions. I've come across Todd Thomson's subpage widget and basically couldn't understand how to set everything up (visual learner and there are no template or demos on his github, no worries Todd if your out there).
So my question is, when you navigate from index.html to a multipage Jquery mobile document,page1.html via ajax is it possible to clear out what remains from the index.html and load the rest of the page1.html after the transition?
When you link from index.html to page1.html which is a mutli page document you need to add the attribute rel="external" to the link. This clears out the dom for you to allow linking between the multiple pages in the document via the # anchors.

Categories