Using angular-widget we are hosting a lazily loaded angularjs app. I've created a service in the hosting application to expose a loading screen, that widgets can use to tell the hosting app to show/hide the loading screen.
The loading screen is triggered by setting Loading on $rootScope to true. The service simply exposes a show() and hide() method and keeps track of who asks for the loading screen, in case of multiple things asking for a loading screen at the same time.
When triggering the service in the hosting application, it works just fine. However, triggering the same service in the hosted application, it seems that the update to $rootScope.Loading happens, but the view in the hosting app doesn't update. I know the update is happening, because I put a $watch on $rootScope.Loading which does trigger, but like I said, the view doesn't update to reflect the change.
I've got a plunker here. Am I missing something?
Turns out I just needed to add widgetsProvider.addServiceToShare to my config. Once that was added, the view started updating as expected.
Related
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.
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()
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'm currently using directives in my ionic app, there directives are normally bind to a angular controller. So my problem is, when I navigate through the app, my controllers are not loading (loads for the first time) and hence I cannot setup some initial values.
Following is an example
I navigate to users screen/page
users controller loads (When I check with Chrome dev tools)
I navigate to home screen
I navigate back to users screen
At this point I expect users controller to load again, to setup my initial values, but it's not happening
I'm not sure if this is the default behavior, or am I missing something?
if you are using nested states, parent.child1, parent.child2, parent only loads 1 for the entire hierarchy, changing from child1 to child 2 will not reload the parent controller, thats one of the pros of using ui-router.
also note that with ionic latest version they introduced view caching so, the controller is only instanciated once for each view, to prevent that you need to use
cache-view="false"
in your ion-view
http://ionicframework.com/docs/api/directive/ionNavView/
I have Cordova/Ionic/AngularJS application I am currently testing using the PhoneGap app on iOS. This application uses WebSockets to receive external inbound messages. An Angular service function pushes the new messages in an array and binds the array to a scope. I then use $rootScope.$apply() to propagate the change to my view that displays this array of messages.
Everything works fine except when I pause and resume the application. In that case, any new incoming message is indeed correctly stored in the messages array however the view is not updated as I would expect from $apply(). Leaving the view and returning to it fixes the problem. It's as if reloading the view's controller and calling the service resets something.