I'm having to rebuild a messy legacy web-application (SPA), and found one of the cleanest ways to do it was using Laravel + Vue.js. Due to certain site limitations, the webapp needs to be displayed inside of an iframe.
The iframe points to the 'entry point' or 'root' of the web-app, and after that, the current page is remembered in PHP with a $_SESSION['CURRENT_PAGE'] flag and served accordingly, when the user refreshes the page. I would prefer the backend to remain stateless, now that I am transitioning to a cleaner setup with vue.
However: Since the iframe points to / of the application, when the user, say, changes to /hello and then refreshes the page, it will throw them back to /. Is there a standard way of solving this in vue?
An initial guess of mine would be to (ab)use local storage, but maybe that's too crude?
Related
I have a single webpage that uses an API to query backend for data, which is returned and plotted in a few figures. Backend is Node.js with Express.
The appearance of the figures is controlled through a set of JS functions that are loaded when the page initially loads.
After the user has been on the page for 30 seconds, I want to ask them to login or register by displaying a modal over the page.
If the login is successful, I'd like to close the modal and have new functionality available to the user, including changing the behavior of the original JS functions that were loaded when the user first arrived. But, I'd like to do this without reloading a new page with a separate set of JS functions.
I'm a relative newbie at this and have been having a hard time figuring out the right way to accomplish this.
I thought maybe there was a way to update the original JS function file by submitting an API get request and using the response to overwrite replace/overwrite the non-authenticated version. Then user would have access to new functionality without having reloaded the page.
But, I can't seem to find anything that would support this as the correct approach, or even whether this would be possible.
Really need help on which direction to go.
I have the following problem in Angular. If I have two pages A and B each containing a table. Then I make changes to Page A in the table, and then navigate to Page B. Now I expect that when I navigate back to Page A, the changes are still there. I don't want to send the changes to the database until I click a save button. What is the best way to solve this in angular?
If you are only wanting to preserve the data for this one instance, then definitely look to using a Service and writing your data to localstorage for it to persist across page refreshes.
If you are developing a SPA, then I'm not sure why you need it to persist across a page refresh since moving between components does not actually send a new HTTP request. You state should be preserved in your Service.
If you find yourself needing to manage state across your entire application and want to do it reactively, I recommend checking out NGRX.
https://ngrx.io/
Another alternative that maybe has a little less boilerplate is NGXS, which does the same thing as NGRX.
https://www.ngxs.io/
I don't recommend to use localStorage for your task if you develop SPA application, because localStorage/sessionStorage is limited and it is designed for another purposes - like authentication etc. But of course if you need to preserve your data - like cookie/JWT token etc. even after refreshing the page you can use localStorage.
I recommend to use Angular services for this: please see examples at docs Services/DI docs. Once you registered service as a singleton Singleton services, you can inject it via built-in DI(Dependency Injection) in component which renders your table at page A. But of course, you are not limited in injection only in component which located at page A, you can inject it even in page B etc.
Ancient website:
User navigates to url via bar or href, server call is made for that particular page
The page is returned (either static html or html rendered on server by ASP.NET
MVC, etc
EVERY page reloads everything, slow, reason to go to SPA
Angular 2 SPA:
User navigates to url via bar or router
A server call is made for the component's html/javascript
ONLY the stuff within the router outlet is loaded, not the navbar, etc (main advantage of SPAs)
HOWEVER, html is not actually received from server as is, Angular 2 code/markup is - then this markup is processed on the CLIENT before it can be displayed as plain HTML, which the browser can understand - SLOW? Enter Angular Universal?
Angular Universal:
First time users of your application will instantly see a server rendered view which greatly improves perceived performance and the overall user experience.
So, in short:
User navigates to url via search bar or router
Instead of returning Angular components, Angular Universal actually turns those components into html AND then sends them to the client. This is the ONLY advantage.
TLDR:
Is my understanding of what Angular Universal does correct? (last bullet point above).
And most importantly, assuming I understand what it does, how does it achieve this? My understanding is that IIS or whatever just returns requested resources, so how does Angular Universal pre-process them (edit: I would basically running something akin to an API that returns processed html)?
This HAS to mean that the server makes all the initial API calls needed to display the initial view, for example from route resolves...correct?
Edit: Let's focus on this approach to narrow down the question:
The second approach is to dynamically re-render your application on a web server for each request. There are still several caching options available with this approach to improve scalability and performance, but you would be running your application code within the context of Angular Universal for each request.
The approach here:
The first option is to pre-render your application which means that you would use one of the Universal build tools (i.e. gulp, grunt, broccoli, webpack, etc.) to generate static HTML for all your routes at build time. Then you could deploy that static HTML to a CDN.
is beyond me. Seeing how there is a bunch of dynamic content there, yet we preload static html.
I have a challenge that I can't solve. I have made a website with node.js and have all of the code written for the routing including routing for sub-domains. Some location only some users can access, some locations only logged in users can access. I wanted to include a chat for my users so I went along and created one with socket.io and some client side js.
Now I need the site to keep the chat element open which in on a bar across the screen when the client goes to another portion of the website. I have looked into many solutions but almost all of them include some js library like angular.js with the ng-model or ui technique but all include writing code for the client side that handles the url and what to load.
I don't really want to do this method because:
I don't want to re-write all my routes and I am not even sure how to handle the authentication of the users.
I find the client method to be a security issue
My website isn't a single page app, I just want one portion of the website to stay loaded.
Here is some images of what I am wanting:
State 1:
State1
State 2:
State2
Notice that the chat stays but other content was loaded. Also that it went to a different sub domain and a location that is only accessible by logged in users.
Thanks!
I guess you want to maintain state across page refresh, much like e.g. Facebook does. A true and trusted way of doing this is setting a cookie that stores the chat state: open/closed, or store the state on the server. Then on page load, initialize the chat based on this data.
is there any way in which i can load few data into some cache in angular js and onrefresh of the page load these datas from cache and display it again?
Right now issue is whenever i refresh the page, the details which were shared by the sharedServices app gets reinitiated since all the JS are reloaded on refresh of a page.
I have a Login page and a home page. On success of Login, using $route i am routing to the home page and broadcasting the loginID to the Homepage controller. now when i refresh this home page or copy the url and paste in another tab, i want the same data to exist. But in my case since the htmls/javascripts are getting reloaded it getting initialized to null.
Any angular technique available here?
Take a look at this discussion.
For small amounts of data (<= 4k) you can use $cookieStore, but after that you'll need to look into localStorage, keeping in mind that localStorage ties your app to HTML5 compliant browsers.
If you don't mind a little state on your backend, that's an option as well.
EDIT based on first comment
It sounds like your goal is that when the user hits refresh, the page should look as though they never hit it. You'd have to persist your entire application state to localStorage (scope, DOM properties, stateful services) ANY time these change. Not sure this is advisable.
You can get close enough to be functional, though:
To expand upon the answer from above:
Use the URL to describe application state, using Angular's $route service. I've always liked this article to explain URL and state, although the article is pretty Ember-specific.
As far as stopping the client from reloading your scripts upon refresh there is no way to do that - the closest you'll come is having your server return a 304 (Not Modified) code for those scripts.
Scope data and service state would have to persisted in local storage as described above.
Although the refresh problem is annoying it actually forces you to think as statelessly as possible, and stateless code is much easier to maintain and test. In case you were looking for an upside :)