Delaying Angularjs Route Change Until Model Loaded to Prevent Flicker

AngularJS 1 Delay route until model is loaded

You could use resolve option of route to wait to view to load before data gets loaded. For the same create a method in factory & exposed it to consumer of service via returning object.

Factory

app.factory('contactFormData', ['$http', function($http, $q) {
   var getEagerContactForm = function() {
     return $http.get('json/eager-contactform.json');
   }
   return {
     getEagerContactForm: getEagerContactForm 
   }
}])

Config

$routeProvider
.when('/contact', { 
  controller: 'ContactController', 
  templateUrl: 'views/contact.html',
  resolve: {
     data: function(contactFormData){
        return contactFormData.getEagerContactForm();
     }
  }
})

Inside ContactController you could inject data as a dependency, which will have the data returned from API.

Can I prevent / delay the AngularJS $digest from happening when model is updated

This is not a hack at all. Its a good question because large data sets can cause the $digest cycle to run very slowly when a user inputs text rapidly or holds down backspace. You can definitely do performance tweaks like being careful with your $watch and $filter functions, but sometimes its a better idea to delay the $digest cycle using a debounce function.

Close all UI bootstrap modals on route change before controller loads (angularjs)

It turns out, the listener I used is suboptimal when UI-Router is in use. In fact, I cannot even prevent the state change in my listener.

Instead, when using UI-Router, $transitions.onStart() should be used for listening to state changes.

Delaying route change until data is loaded in Ember

Just recently this PR introduced Async transitions to ember.js. With this change you can do all sort of things, like for example delaying a route's transition if data is still underway. A route has now all sorts of hooks available to do just want you want.

As an example (taken from the gist mentioned below) in the afterModel hook you could do something like this to only transition to the post.show route if you actually have data:

App.PostsIndexRoute = Ember.Route.extend({
  afterModel: function(posts, transition) {
    if (posts.length === 1) {
      this.transitionTo('post.show', posts[0]);
    }
  }
});

Since this new features are still very young you need to use the latest master to have it available. For more info on how to use the API please see this gist.

Hope it helps

Angular.js delaying controller initialization

Since $http returns a promise, it's a performance hit to create your own deferred just to return the promise when the http data arrives. You should be able to do:

MyCtrl.resolve = {
    datasets: function ($http) {
        return $http({method: 'GET', url: '/someUrl'});
    }
};

If you need to do some processing of the result, use .then, and your promise is chained in for free:

MyCtrl.resolve = {
    datasets: function ($http) {
        return $http({method: 'GET', url: '/someUrl'})
               .then (function (data) {
                   return frob (data);
               });
    }
};