single-page-application

Print a div using javascript in angularJS single page application

by

$scope.printDiv = function(divName) { var printContents = document.getElementById(divName).innerHTML; var popupWin = window.open(”, ‘_blank’, ‘width=300,height=300’); popupWin.document.open(); popupWin.document.write(‘<html><head><link rel=”stylesheet” type=”text/css” href=”https://stackoverflow.com/questions/22189544/style.css” /></head><body onload=”window.print()”>’ + printContents + ‘</body></html>’); popupWin.document.close(); }

How to ajax-refresh dynamic include content by navigation menu? (JSF SPA)

by

A straightforward approach would be the following view: <h:panelGroup id=”header” layout=”block”> <h1>Header</h1> </h:panelGroup> <h:panelGroup id=”menu” layout=”block”> <h:form> <f:ajax render=”:content”> <ul> <li><h:commandLink value=”include1″ action=”#{bean.setPage(‘include1’)}” /></li> <li><h:commandLink value=”include2″ action=”#{bean.setPage(‘include2’)}” /></li> <li><h:commandLink value=”include3″ action=”#{bean.setPage(‘include3’)}” /></li> </ul> </f:ajax> </h:form> </h:panelGroup> <h:panelGroup id=”content” layout=”block”> <ui:include src=”/WEB-INF/includes/#{bean.page}.xhtml” /> </h:panelGroup> With this bean: @ManagedBean @ViewScoped public class Bean implements Serializable { private … Read more

Apply loading spinner during ui-router resolve

by

You can use a directive that listens on $routeChangeStart and for example shows the element when it fires: app.directive(‘showDuringResolve’, function($rootScope) { return { link: function(scope, element) { element.addClass(‘ng-hide’); var unregister = $rootScope.$on(‘$routeChangeStart’, function() { element.removeClass(‘ng-hide’); }); scope.$on(‘$destroy’, unregister); } }; }); Then you place it on the specific view’s loader, for example: View 1: <div … Read more

What is the best Vue-Router practice for very large webapplications?

by

Little late but I will try to answer the question. This is more an architectural question than just routing level question. TLDR: You will need a mix of approaches. One approach won’t fit. 1. Routing Mode First, you should determine if you are going with HTML 5 history mode or hash mode It is 2018, … Read more

how to embed an angular app into another app?

by

UPDATE 2020 You can also use the new Webpack 5 Module federation. following examples show how to use module federation with Angular and other technologies. Implementation examples of module federation , by the creators of module federation Example for building a plugin-based workflow designer with Angular and Dynamic Module Federation Dynamic Module Federation with Angular … Read more

Authentication for users on a Single Page App?

by

The most RESTful way I have seen is based on the OAuth client credentials flow, basically a /token endpoint that you post username/password to which returns an access token for this session. Every ajax request after that appends an Authorization bearer header with the token. You can store the token in a global variable to … Read more

Why doesn’t the browser reuse the authorization headers after an authenticated XMLHttpRequest?

by

Basic idea Load the images via JavaScript and display them on the site. The advantage is that the authentication credentials will never find their way into the HTML. They will resist at the JavaScript side. Step 1: load the image data via JS That’s basic AJAX functionality (see also XMLHttpRequest::open(method, uri, async, user, pw)): var … Read more

Best practices for authentication and authorization in Angular without breaking RESTful principles?

by

When someone asks about REST authentication, I defer to the Amazon Web Services and basically suggest “do that”. Why? Because, from a “wisdom of the crowds” point of view, AWS solves the problem, is heavily used, heavily analyzed, and vetted by people that know and care far more than most about what makes a secure … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)