Prevent flicker when Angular route change until model gets loaded (Mini-Challenge 10)

Mini-Challenge 10

ng-challenge modelAngularJs Mini-Challenges is a growing collection of “Challenges” about the most quirky parts of the AngularJs framework. It encourage you to find and fix common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert AngularJs programmers may encounter on their endeavours into the depths of the framework.

AngularJs Mini-Challenges does not aim to teach you AngularJs. Former knowledge of the Framework is strongly recommended in order to understand the topics covered in this Challenges. In order to learn the basics of the Framework, please head over to this excellent book:



Book Tip

ng-book – The Complete Book on AngularJS
Ready to master AngularJS? What if you could master the entire framework – with solid foundations – in less time without beating your head against a wall?




The Challenge:

Sometimes it happen that when you navigate from one route to another, and you are using services to call apis and fetch the model, the html view gets loaded first provoking a flick.

This is an example of what we want to achieve with this challenge, if there were a PeopleController that listed all Projects and people.html which is the html template that shows the list of peoples, MyService.PeopleQuery() would be fetched completely before showing the new html page. Until then, the current page would still continue to show.

With the solution that you going to provide for this challenge we also going to prevent that the view show the double curly braces in its raw (uncompiled) form: {{ myVariable }}.
Notice that using ng-cloak is not the solution, with this directive the HTML is shown, this directive only prevent the view to show the uncompiled angular.
ngCloak Documentation


Here you can find a possible solution

If you feel that the solution is poor or incomplete or there is room for improvement, please share with every one, you can leave a comment.