Wait for app to finish initialization before changing route - angularjs

When I start my app I have an initialization process that shows some loading indicator and shows the actual content after everything is loaded. Now when I change the Url manually, the initialization process is also triggered, which is good, but the view controller assigned to that route is also created and starts its work right away before the initialization is completed. I tried to use a resolve property at my routes, where I return a promise that is resolved once the app is loaded, however I put this promise in a service and thats forbidden to be injected during the config phase.
How can I wait for the app to be completely loaded before I change the route?

Related

Ionic resolve a promise on app start

I am running the ionic framework v1 and my app does some initial set up before getting started. Part of this set up requires getting the users location which should be completed before the app calls any other initialization function. Otherwise, it won't work.
So my question is how do I get ionic to call a function - Wait for the promise to resolve. And then begin to initialize the controller, routes, and whatnot.
It looks like the $ionicPlatform.ready function is called before app load but if I put it in there it does not block and it just proceeds to begin to initialize my app before the promise is returned.

ui-router $urlRouterProvider wait until all states loaded

I'm trying to dynamically load a bunch of states, by merging them from some disperse files.
I'm collecting all of them with $http.get and then add all with $stateProvider.state(name, config).
All ok here.
The problem is that if I enter another URL, besides the root URL "/", that same URL is never resolved to the correct state.
It seems that, if i load the app from the root state and navigate from there, the $urlRouterProvider can match with all the loaded states, but, if i try to enter the app from a child state, for example "/#/anotherpage", it cannot match any url/state and it fallback to .otherwise('/').
It's like if it tries to resolve the URL without waiting for all the states to be loaded.
I'm using $urlRouterProvider.deferIntercept() to try to stop it from continue, and after the configuration, i just enable again the sync.
app.config(configure).run(['$urlRouter', function($urlRouter){
$urlRouter.sync();
$urlRouter.listen();
}]);
How do i make sure that $urlRouterProvider waits until all the states are loaded during .config(), and then try to match the correct state?
Thanks.
I'm not really sure that what i had is related but i'll post it : i was creating some object in a config phase. The object configuration was overridable so i couldn't built the state in the config phase of my provider. So i moved the $stateProvider calls and $urlRouterProviders calls in the $get of my provider.
If i tried to aim for one of the generated state it didn't work when loading the page the 1st time or refreshing. I had to use a "module.run(myProvider){}" to force instantiation of my provider to make it works. My guess is that my app.run was running before $urlRouterProvider resolves anything.
Another solution may be to use defer the bootstrap of your application removing ng-app and using angular.bootstrap when you're ready.

ngRoute - re-route to current location path

Is it possible with ngRoute to route to the current path? Essentially, I have a scenario where my app will route to a controller/view, then after a little bit of time an event handler can be executed in another part of the application which changes a global object, and the same controller/view should be executed again. I tried just routing to the same path (using location.path), but it appears that ngRoute ignores the request it the apps is currently on that path.
Going by the documentation you can use the $route.reload() method:
Causes $route service to reload the current route even if $location hasn't changed.
As a result of that, ngView creates new scope and reinstantiates the controller.

Cordova resume application and angular $apply() on PhoneGap app

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.

Killing Previous Route's Controller On Next Route

I'm having an issue in my Angular app where if I arrive at one controller view which makes an $http.get() asynchonous call and navigate away to a different controller view before the promise can resolve then I effectively end up having functions from one controller executing while on a completely different controller.
For example if the first page does an $http.get() and then calls $window.location = data.goToUrl in the .success() function. Then if I open that first page, and navigate away before the .success() fires then when I arrive on the completely different page I was navigating to then when the first page's .success() method eventually fires off I will be navigated away from the new page which should never be navigating me anywhere normally.
How can I either cancel all promises or kill all asynchronous functions of a controller when I leave that controller to make sure it doesn't affect the next view? Or is there a better way of handling this issue?
No, you can't cancel requests which are already started. You should find another way to solve the problem, for example you can disable the button which is handling route by using ng-disable until your promise is rejected or resolved.

Resources