Delaying AngularJS route change until model loaded to prevent flicker

Question

I am wondering if there is a way  similar to Gmail  for AngularJS to delay showing a new route until after each model and its data has been fetched using its respective services   For example  if there were a ProjectsController that listed all Projects and project index html which was the template that showed these Projects  Project query   would be fetched completely before showing the new page   Until then  the old page would still continue to show  for example  if I were browsing another page and then decided to see this Project index

User · Answer

Using AngularJS 1 1 5  Updating the  phones  function in Justen s answer using AngularJS 1 1 5 syntax   Original   phones  function  q  Phone        var deferred    q defer         Phone query function phones            deferred resolve phones                return deferred promise      Updated   phones  function Phone        return Phone query    promise      Much shorter thanks to the Angular team and contributors      This is also the answer of Maximilian Hoffmann  Apparently that commit made it into 1 1 5

User · Answer

I see some people asking how to do this using the angular controller method with minification friendly dependency injection  Since I just got this working I felt obliged to come back and help  Here s my solution  adopted from the original question and Misko s answer    angular module  phonecat     phonecatFilters    phonecatServices    phonecatDirectives       config    routeProvider   function  routeProvider         routeProvider        when   phones             templateUrl   partials phone-list html            controller  PhoneListCtrl           resolve                 phones    Phone     q   function Phone   q                    var deferred    q defer                    Phone query function successData                      deferred resolve successData                       function errorData                      deferred reject       you could optionally pass error data here                                     return deferred promise                                            delay     q    defer   function  q   defer                   var delay    q defer                    defer delay resolve  1000                  return delay promise                                                              when   phones  phoneId             templateUrl   partials phone-detail html            controller  PhoneDetailCtrl           resolve  PhoneDetailCtrl resolve          otherwise  redirectTo    phones           angular controller  PhoneListCtrl       scope    phones     scope  phones       scope phones   phones     scope orderProp    age          Since this code is derived from the question most popular answer it is untested  but it should send you in the right direction if you already understand how to make minification friendly angular code  The one part that my own code didn t requires was an injection of  Phone  into the resolve function for  phones   nor did I use any  delay  object at all   I also recommend this youtube video http   www youtube com watch v P6KITGRQujQ amp list UUKW92i7iQFuNILqQOUOCrFw amp index 4 amp feature plcp   which helped me quite a bit  Should it interest you I ve decided to also paste my own code  Written in coffeescript  so you can see how I got it working   FYI  in advance I use a generic controller that helps me do CRUD on several models   appModule config    routeProvider     routeProvider  - gt    genericControllers     boards   teachers   classrooms   students     for controllerName in genericControllers      routeProvider        when     controllerName             action   confirmLogin          controller   GenericController          controllerName  controllerName         templateUrl    static templates   controllerName  html          resolve            items      q     route     http     q   route   http  - gt               deferred    q defer                controllerName    route current controllerName               http                 method   GET                 url    api   controllerName                                 success  response  - gt                 deferred resolve response payload                error  response  - gt                 deferred reject response message                return deferred promise                 routeProvider      otherwise       redirectTo            action   checkStatus     appModule controller  GenericController      scope     route     http     cookies    items     scope   route   http   cookies  items  - gt      scope items   items        etc

User · Answer

One possible solution might be to use the ng-cloak directive with the element where we are using the models e g    lt div ng-cloak    gt    Value in  myModel is    myModel    lt  div gt    I think this one takes least effort

User · Answer

Delaying showing the route is sure to lead to an asynchronous tangle    why not simply track the loading status of your main entity and use that in the view  For example in your controller you might use both the success and error callbacks on ngResource    scope httpStatus   0     in progress  scope projects    resource query   projects   function          scope httpStatus   200       function response         scope httpStatus   response status          Then in the view you could do whatever    lt div ng-show  httpStatus    0  gt      Loading  lt  div gt   lt div ng-show  httpStatus    200  gt      Real stuff      lt div ng-repeat  project in projects  gt                    lt  div gt   lt  div gt   lt div ng-show  httpStatus  gt   400  gt      Error  not found  etc  Could distinguish 4xx not found from      5xx server error even   lt  div gt

User · Answer

Here s a minimal working example which works for Angular 1 0 2  Template    lt script type  text ng-template  id   editor-tpl html  gt      Editor Template   datasets    lt  script gt    lt div ng-view gt    lt  div gt    JavaScript   function MyCtrl  scope  datasets             scope datasets   datasets     MyCtrl resolve         datasets   function  q   http            var deferred    q defer              http  method   GET   url    someUrl                 success function data                    deferred resolve data                              error function data                     actually you d want deffered reject data  here                   but to show what would happen on success                   deferred resolve  error value                             return deferred promise            var myApp   angular module  myApp       function  routeProvider         routeProvider when                templateUrl    editor-tpl html           controller  MyCtrl          resolve  MyCtrl resolve                  http   jsfiddle net dTJ9N 3   Streamlined version   Since  http   already returns a promise  aka deferred   we actually don t need to create our own  So we can simplify MyCtrl  resolve to   MyCtrl resolve         datasets   function  http            return  http               method   GET                url   http   fiddle jshell net                          The result of  http   contains data  status  headers and config objects  so we need to change the body of MyCtrl to    scope datasets   datasets data    http   jsfiddle net dTJ9N 5

User · Answer

I liked above answers and learned a lot from them but there is something that is missing in most of the above answers   I was stuck in a similar scenario where I was resolving url with some data that is fetched in the first request from the server  Problem I faced was what if the promise is rejected   I was using a custom provider which used to return a Promise which was resolved by the resolve of  routeProvider at the time of config phase   What I want to stress here is the concept of when it does something like this   It sees the url in url bar and then respective when block in called controller and view is referred so far so good   Lets say I have following config phase code   App when           templateUrl    assets campaigns index html      controller   CampaignListCtr      resolve           Auth   function             return AuthServiceProvider auth  campaign                       Default route  otherwise      redirectTo    segments        On root url in browser first block of run get called otherwise otherwise gets called   Let s imagine a scenario I hit rootUrl in address bar AuthServicePrivider auth   function gets called   Lets say Promise returned is in reject state  what then     Nothing gets rendered at all   Otherwise block will not get executed as it is for any url which is not defined in the config block and is unknown to angularJs config phase   We will have to handle the event that gets fired when this promise is not resolved  On failure  routeChangeErorr gets fired on  rootScope   It can be captured as shown in code below    rootScope  on   routeChangeError   function event  current  previous  rejection          Use params in redirection logic         event is the routeChangeEvent        current is the current url        previous is the previous url      location path  rootScope rootPath         IMO It s generally a good idea to put event tracking code in run block of application  This code run just after the config phase of the application   App run    routeParams     rootScope     location   function  routeParams   rootScope   location       rootScope rootPath    my custom path         Event to listen to all the routeChangeErrors raised       by the resolve in config part of application     rootScope  on   routeChangeError   function event  current  previous  rejection             I am redirecting to rootPath I have set above          location path  rootScope rootPath                 This way we can handle promise failure at the time of config phase

User · Answer

This commit  which is part of version 1 1 5 and above  exposes the  promise object of  resource  Versions of ngResource including this commit allow resolving resources like this    routeProvider  resolve        data  function Resource            return Resource get    promise            controller  app controller  ResourceCtrl      scope    data   function  scope  data          scope data   data

User · Answer

This snippet is dependency injection friendly  I even use it in combination of ngmin and uglify  and it s a more elegant domain driven based solution   The example below registers a Phone resource and a constant phoneRoutes  which contains all your routing information for that  phone  domain  Something I didn t like in the provided answer was the location of the resolve logic -- the main module should not know anything or be bothered about the way the resource arguments are provided to the controller  This way the logic stays in the same domain   Note  if you re using ngmin  and if you re not  you should  you only have to write the resolve functions with the DI array convention   angular module  myApp   factory  Phone  function   resource      return  resource   api phone  id    id    id        constant  phoneRoutes           phone           templateUrl   app phone index tmpl html         controller   PhoneIndexController               phone create           templateUrl   app phone edit tmpl html         controller   PhoneEditController         resolve            phone     route    Phone   function   route  Phone              return new Phone                                    phone edit  id           templateUrl   app phone edit tmpl html         controller   PhoneEditController         resolve            form     route    Phone   function   route  Phone              return Phone get   id   route current params id     promise                                   The next piece is injecting the routing data when the module is in the configure state and applying it to the  routeProvider   angular module  myApp   config function   routeProvider                                            phoneRoutes                                                   otherRoutes               routeProvider when        templateUrl   app main index tmpl html            Loop through all paths provided by the injected route data     angular forEach phoneRoutes  function routeData  path         routeProvider when path  routeData             routeProvider otherwise   redirectTo                 Testing the route configuration with this setup is also pretty easy   describe  phoneRoutes   function        it  should match route configuration   function          module  myApp            Mock the Phone resource     function PhoneMock          PhoneMock get   function     return             module function  provide           provide value  Phone   FormMock                inject function  route   location   rootScope  phoneRoutes          angular forEach phoneRoutes  function  routeData  path              location path path            rootScope  digest             expect  route current templateUrl  toBe routeData templateUrl           expect  route current controller  toBe routeData controller                                 You can see it in full glory in my latest  upcoming  experiment  Although this method works fine for me  I really wonder why the  injector isn t delaying construction of anything when it detects injection of anything that is a promise object  it would make things soooOOOOOooOOOOO much easier   Edit  used Angular v1 2 rc2

User · Answer

I worked from Misko s code above and this is what I ve done with it  This is a more current solution since  defer has been changed to  timeout  Substituting  timeout however will wait for the timeout period  in Misko s code  1 second   then return the data hoping it s resolved in time  With this way  it returns asap   function PhoneListCtrl  scope  phones       scope phones   phones     scope orderProp    age      PhoneListCtrl resolve        phones  function  q  Phone        var deferred    q defer         Phone query function phones            deferred resolve phones                return deferred promise

User · Answer

routeProvider resolve property allows delaying of route change until data is loaded   First define a route with resolve attribute like this   angular module  phonecat     phonecatFilters    phonecatServices    phonecatDirectives       config    routeProvider   function  routeProvider         routeProvider        when   phones             templateUrl   partials phone-list html            controller  PhoneListCtrl           resolve  PhoneListCtrl resolve          when   phones  phoneId             templateUrl   partials phone-detail html            controller  PhoneDetailCtrl           resolve  PhoneDetailCtrl resolve          otherwise  redirectTo    phones            notice that the resolve property is defined on route   function PhoneListCtrl  scope  phones       scope phones   phones     scope orderProp    age      PhoneListCtrl resolve       phones  function Phone   q           see  https   groups google com forum  fromgroups   topic angular DGf7yyD4Oc4     var deferred    q defer        Phone query function successData                deferred resolve successData           function errorData                deferred reject       you could optionally pass error data here             return deferred promise         delay  function  q   defer        var delay    q defer         defer delay resolve  1000       return delay promise          Notice that the controller definition contains a resolve object which declares things which should be available to the controller constructor  Here the phones is injected into the controller and it is defined in the resolve property   The resolve phones function is responsible for returning a promise  All of the promises are collected and the route change is delayed until after all of the promises are resolved   Working demo  http   mhevery github com angular-phonecat app   phones Source  https   github com mhevery angular-phonecat commit ba33d3ec2d01b70eb5d3d531619bf90153496831

User · Answer

I have had a complex multi-level sliding panel interface  with disabled screen layer  Creating directive on disable screen layer that would create click event to execute the state like    state go  account stream social view      were producing a flicking effect  history back   instead of it worked ok  however its not always back in history in my case  SO what I find out is that if I simply create attribute href on my disable screen instead of state go   worked like a charm      lt a class  disable-screen  back gt  lt  a gt    Directive  back   app directive  back       rootScope   function  rootScope         return           restrict    A           link   function scope  element  attrs                element attr  href    rootScope previousState replace     gi                                   app js I just save previous state  app run function  rootScope   state                rootScope  on   stateChangeStart   function event  toState  toParams  fromState  fromParams                       rootScope previousState   fromState name           rootScope currentState   toState name

User · Answer

You can use  routeProvider resolve property to delay route change until data is loaded   angular module  app     ngRoute       config    routeProvider   function  routeProvider  EntitiesCtrlResolve  EntityCtrlResolve         routeProvider        when   entities             templateUrl   entities html            controller   EntitiesCtrl            resolve  EntitiesCtrlResolve                 when   entity  entityId             templateUrl   entity html            controller   EntityCtrl            resolve  EntityCtrlResolve                 otherwise  redirectTo    entities            Notice that the resolve property is defined on route   EntitiesCtrlResolve and EntityCtrlResolve is constant objects defined in same file as EntitiesCtrl and EntityCtrl controllers      EntitiesCtrl js  angular module  app   constant  EntitiesCtrlResolve       Entities  function EntitiesService        return EntitiesService getAll             angular module  app   controller  EntitiesCtrl   function Entities       scope entities   Entities        some code           EntityCtrl js  angular module  app   constant  EntityCtrlResolve       Entity  function  route  EntitiesService        return EntitiesService getById  route current params projectId            angular module  app   controller  EntityCtrl   function Entity       scope entity   Entity        some code

User · Answer

I like darkporter s idea because it will be easy for a dev team new to AngularJS to understand and worked straight away   I created this adaptation which uses 2 divs  one for loader bar and another for actual content displayed after data is loaded  Error handling would be done elsewhere   Add a  ready  flag to  scope    http  method   GET   url               success function data  status  headers  config             scope dataForView   data                 scope ready   true       lt -- set true after loaded              In html view    lt div ng-show   ready  gt        lt  -- Show loading graphic  e g  Twitter Boostrap progress bar -- gt       lt div class  progress progress-striped active  gt           lt div class  bar  style  width  100    gt  lt  div gt       lt  div gt    lt  div gt    lt div ng-show  ready  gt        lt  -- Real content goes here and will appear after loading -- gt    lt  div gt    See also  Boostrap progress bar docs

[javascript] Delaying AngularJS route change until model loaded to prevent flicker

Using AngularJS 1.1.5

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-routing