I have fully bought into the benefits of using angular and have a a hybrid app (using PhoneGap) I'm going to convert over (from Jquery Mobile) but I'm having a problem figuring out how to get my new code to the app.
The app is currently hosted on our website (NOT local to the device) so normal caching works as expected. I update a web page or js and the app sees the new content (because the underlying webview/browser knows its new content).
But with angular's SPA approach the main module gets loaded up front and changes views based on loading new partials. Also not a problem.
BUT, what happens when I change my app module (the code loaded by ng-app="demo")? Such as adding new routes, controllers, or views.
Since that's already loaded in the browser at bootstrap how do I tell the app there are changes and it needs to reload the overall app?
There are 3 use cases to consider:
1) On a PC/browser you can just refresh the page. I can't depend on users knowing to do that but its not as bad because users are likely to open and close their browser thus reloading the new app/js.
2) When I issue a new PhoneGap app (to the app stores) it forces a browser close/reopen during the installation, so the user will get the new code.
3) THIS IS THE REAL STICKLER. During normal use of the PhoneGap app users may open the app and NEVER close it again (merely suspending and reopening). These are not tech-savvy users and might not even know how to restart an app never mind realize they should try.
So what's the angular way to force the app the refresh when the base app module has changed?
Or am I on my own to create some type of version checking system to force a reload() when I need it.
Seems like a common situation to me but everything I find on caching with angular says something to this effect:
"Since you probably want to maintain browser caching for your views, partials or other routes"
No I don't - I WANT to bust cache for my app/views/controller because i know it has changed.
angular phonegap cache buster
You could dynamically load/unload your controllers on each use. This article should get you started.
Related
Hello guys i am new to React Js i often hear and see posts regarding react is single page app but never understood what is SPA and many say that it doesn't reload the pages but i didn't understood why so could you guys please explain me with simple examples.
A Single Page Application is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages.
This means that the URL of your website will not change completely (page will not reload), instead it will keep getting content and rewriting the DOM with it instead of loading a new page.
The goal is faster transitions that make the website feel more like a native app
Example: Netflix
This is the dashboard, and when we click on any movie, it changes to /watch and the content is rewritten.
In Technical Terms:
When building your react-app, you can see that there is only one
App.js from where your entire web-app is loaded in fragments and
components. This behaviour of rendering components and pages on a single page and changing the DOM( is a single page behaviour and hence the name), instead of loading a new page with new content, this makes it feel like a single application.
As mentioned in Glossary of React Terms:
A single-page application is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server which means the page is not reloaded.
And about "Why is React Js called as Single Page Application":
Though you may build a single-page application in React, it is not a requirement. React can also be used for enhancing small parts of existing websites with additional interactivity. Code written in React can coexist peacefully with markup rendered on the server by something like PHP, or with other client-side libraries. In fact, this is exactly how React is being used at Facebook.
A single page application has one single page e.g. www.google.ch. It is exactly one HTML file (with all its required dependencies) loaded into the browser. You'd navigate between paragraphs only using hash-router, but never ever visit another page like www.google.ch/maps (that would then be www.google.ch/#maps, which references / -> index.html) (tho google may not be the best example, it is more about URIs).
ReactJS is an open source JS library for building UI and used for SPA, and it manages the views of web apps. Reactjs can help you to modify your data without reloading of a page. It is a popular library in the market trend because of its scalability & fast performance.
Single Page applications are different from multiple page apps that we see everywhere because the SPA doesn't move into new pages; instead, it will load the pages inline within the same page.
In traditional websites, when we go from one page to another, the whole site is loaded. e.g - if you go from "www.example.com/hi" to "www.example.com/hello" the whole website is reloaded. No matter how much portion of the website is really changed. Let's say, the website has "Sidebar, logo, menu" on both of its pages, then the full reload doesn't make any sense. This takes too much time and decreases the performance.
Single Page Applications, as the name suggests, have only one single page that is loaded the first time you open the website. After this, no matter where you click, it is not gonna refresh the website fully.
browser reload button
The loading icon of the browser doesn't load when we move from one page to another on SPA site, as it does on the traditional websites.
Cons- SPA sites are great for UI UX but they are not the best when it comes to Search Engine Optimisation, it creates problems with rankings.
We have a ExtJS7 app, that for special requests like reset password, that always opens a new tab via email reset link, get loaded in full. We would like to load only few pages that are needed to load for these kind of request
Is there a way in ExtJS that would only load a particular page and its dependencies
I have not seen tutorials on this subject in official documentation. Myself did the following - just created another app (or bundle) for logging. The backend is responsible for the logic of what to display (loginapp or mainapp) - in the absence of a session, the user receives the app login
Absolutely. You can make another app - each app is a page, and will have its own packaged dependencies.
That's the easiest approach. A more complicated approach is to break your application into several ExtJS packages. You can then configure the app.json to exclude all of the packages from the micro loader. You then need to load these packages dynamically, presumably after logging in.
Doing this, though, is extremely complicated, and almost certainly not worth doing.
I am new to PWA, i am curious to know that is it possible to create a PWA in angularjs?
please provide steps to make PWA using angularjs if it is possible to create PWA using angularjs.
There's nothing framework-specific about PWAs - your site just has to meet a certain set of criteria:
Everything is served over HTTPS
The design must be responsive
Your app must be available offline (i.e. it needs a Service Worker)
You need to provide a manifest file containing metadata about your application
Your app must work in all modern browsers
Page transitions shouldn't block the app (i.e. you need to show loading screens/spinners if things are taking a while to load)
Each page in the app needs a unique URL
All of that is achievable with Angular 1 - it'll probably be easier with a modern framework, but there's nothing stopping you sticking with what you've got, for now at least.
look at this github project https://github.com/addyosmani/angular1-dribbble-pwa
I'm running A/B redirect tests with Google optimize, using SPA on React, Redux platform.
A problem I'm trying to solve is - redirecting to the new page causes the full page reload, which I would like to avoid and rather prefer to do it manually, so it would be seamless for a user and much faster.
Is there a way to do that?
Although this is a three years old question, maybe there are still users like me have the same issue.
Now Google has provided Activation events to resolve dynamic websites and single-page apps reload issue.
By default, Optimize modifies the content of a webpage only during its initial load. However, dynamic websites (built with tools like AMP, React, Angular, etc.) and single-page apps (SPA) commonly load additional content long after the initial page load. Optimize supports modifying this late-appearing web content via activation events.
I have a bundle of older ExtJs components that drive the UI, store management, and application logic in something that prior to the world of MVC I'd have called an application. I'm in the process of rewriting it, and wanted to take advantage of ExtJS MVC if possible.
The one thing that makes this unique from the tons of guides I'd otherwise be working from is that my Ext app doesn't own the whole page - instead of a full page viewport onready I have a modal Ext.window.Window that runs on an event from other non-ext javascript on the page.
I'd like to migrate this into a coherent ext application if possible, but as they seem to only properly launch when ext is ready I'm questioning if this is the right tool for the job.
My leading idea right now is to initialize the application on page load, but not actually render any views - exposing a static method on the app the external js can call to render and start my app's lifecycle on demand. Is this a good idea? Is there a better option I'm missing?
Yes, it is a very good idea. I have written an example of simple login system where the application is not actually started before the user logs-in.
It is very similar to your way in that that there is a method you call to actually start the app.