Is there any way with AngularJS to force a page to refresh after it has been changed. What I mean by this is that I have multiple users actively working in the app but a change is required to the controller.js file. At this point the only way I'm aware of is for them to manually push refresh on the browser. Is there any code that I can use to make it "actively" watch that file for changes and reload when necessary without the users having to manually push refresh?
This isn't really an angular problem. You can do polling on the client side with setInterval, hitting the file on the server to trigger a refresh on the client.
If you're looking for something to speed up development, then you're probably looking for hot module loading. The solution depends on what version of angular and build tool you're using (e.g. grunt/webpack/npm).
Check out this article for angular 2, but you can find similar solutions for angular 1:
http://blog.mgechev.com/2015/10/26/angular2-hot-loader-hot-loading-tooling/
But if you just want to force a page refresh from the client side, you would just call: $window.location.reload()
Related
I need to keep the state of a component A in cache, so that when I navigate from A to B or C and I come back to A it does not get re-render again (it also includes a API call in its constructor, so it's kind of slow). I will like to keep this initial state through out the whole session of the user.
In Vuejs https://jsfiddle.net/shidianxia/ckj7xbqq/ they have a very simple way to do this using this syntax:
<keep-alive :include="include">
<router-view></router-view>
</keep-alive>
I will like to have something similar for AngularJS, notice I say JS so old angular. I have an hybrid application using modern angular but keeping old angularjs router.
I appreciate your help, thank you.
According you your comment I think it would make sense to build it in 2 parts.
Part 1: Keeping the state in a service
By keeping the state in a service you would limit the request send to the server and thus saving time.
Part 2 Using $templateCache
By using angularjs template cache service you should keep the time for rendering the view with your data to a minimum. You can find infos on how to use that in their docs https://docs.angularjs.org/api/ng/service/$templateCache
If you in the end still have this flicker while rendering you should use ngCloak to prevent showing the uncompiled view (https://docs.angularjs.org/api/ng/directive/ngCloak)
I'm wondering how does whatsappweb deliver updates?
Do you ever notice a left green card appearing sometimes and asking you to click in a link to refresh page and run the new whatsappweb fresh code updated.
I'm almost sure they use webpack, service workers etc.
Chances are that you already had cache problems using webpack where even refreshing page it remains cached.
So how does whatsappweb solved this issue with a single refresh link?
They use a service worker, if the service worker gets updated, they trigger something in the react app, is easy to do it.
serviceWorker.register({ onUpdate: () => {console.log('new service worker')}});
just dispatch something instead of the console.log
Webpack is a building tool and isn't involved anywhere on a live site. While it offers Hot Module Reload for the development server you will not get it on the production version.
Unlike traditional desktop applications, delivering updates for websites is as straightforward as updating the files on your server (and invalidating any browser caches). You don't need to notify the user to download something, a simple refresh will get the new pages.
If you really want instantaneous updates (without waiting for the user to refresh the page) you can create some sort of WebSocket communication which when a message is received triggers a browser refresh. Nothing special and no deployment mechanisms involved.
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.
I have Backbone working with pushState. It's very nice, but now I understand that I should support loading the app from any route that backbone uses. For example, if somebody enters a backboen route manually to their browser, the server should respond to that and render the page and then let backbone take over.
What I am wondering, is what is the most efficient way to handle it? Backbone recommends also bootstrapping data on initial page load to reduce ajax requests. Should I only try to bootstrap data that is necessary for that particular view or should I try to bootstrap basic collections (for example: users, settings, documents, etc)?
For the first part of your question, you could just specify a callback route (which matches everything and gives the homepage) so the user never gets a 404 (don't use that when developing the app though, it could give you some hard times debugging it if you have a real 404 when making a call to the server).
For the second one, I'd say it depends on the amounts of data you need. I'm personally developing a modular application, and unfortunately can't really bootstrap anything. I'd say it's just some advice.
I am working on a small piece of an angular project and need to define some constants that are derived from values in a database. I have a REST endpoint that delivers the data I need, but I can't figure out how to load the values before the app gets automatically bootstrapped.
I cannot modify the application to a manual-bootstrapping process. Typically a resolve would be used upon navigation, but I have other components (like modals) that use the constants that aren't necessarily part of any route.
What would be ideal would be some sort of "resolve", but at the application layer. I do have the ability to load npm and bower packages, but anything that changes to a 'manual' bootstrapping method isn't allowed.
In that case I can recommend you to use a $rootScope. I don't understand very well your needs, but everything that is stored in $rootScope will be available in all views. Just fill it with your REST service inside the first or main view of your app. Although, it is important to understand that if you refresh you page, the $rootScope will be as well refreshed, this is, all of your REST calls will be launched again. (Navigating inside angular views is NOT refreshing the page unless you ask for it using window.reload() or similar; it is just the same page with a new controller)
To avoid this last behavior (page refresh) you could also use local Storage, which is basically a small amount of memory inside your browser where you can save any data that you want to keep regardless of your page refreshes. I used in one of my projects this library: https://github.com/grevory/angular-local-storage
It was useful for saving permanent stuff until user logs out.
Hope it helps! And sorry if I am answering something not useful for you
Cheers
It seems that the only way to effectively load some values from a service prior to the app starting is to make the service-call to and then manually bootstrap the app. The idea of an app-wide "resolve" doesn't seem to exist.