$viewContentLoading Event no longer useful

[DaAwesomeP]

I recently upgraded from 0.14 to 1.2. I looked at the changelog, and it seemed that it would be fine. However, whatever happened to the $viewContentLoading event renders it useless. It used to return a very useful object (viewConfig) that made it possible to see the names of views, parent views, and nested views before they were finished loading. I used this to flawlessly load my i18n translation on time. Now it just returns a useless string that is just @ most of the time and @parent when one exists. Why did it change? I tried using $stateChangeStart, but it didn't catch every view.

[eddiemonge]

1.2? What version did it change in?

[DaAwesomeP]

I'm not sure. The GitHub search tool doesn't seem to bring up anything useful when I search viewContentLoading. Also, the ES6 refactor makes the blame view useless.

Can you confirm that it is not outputting the viewConfig object anymore? It could just be my particular use of it.

[christopherthielen]

We have two current releases right now. 0.2.18 is in the legacy branch while master has 1.0.0-alpha.4. I think the viewContentLoading may have changed in 1.0 (but maybe not intentionally).

Tell me what your use case is? How do you use the event and why doesn't it work for you now?

[DaAwesomeP]

I used it to load translation information while a page was loading (it was very smooth):

$rootScope.viewContentLoading = $rootScope.$on('$viewContentLoading', function(event, viewConfig) {
  angular.forEach(viewConfig.view.includes, (value, key) => {
    if (value && key) {
      $translatePartialLoader.addPart(key);
    }
  });
});

What I have to do now just doesn't work as well. It sometimes loads a tad late. I have to have two watch functions to make sure that my parent views are watched. Sometimes one calls and sometimes both call (having a second call doesn't actually do anything, but it's annoying). It's very messy in comparison:

$rootScope.viewContentLoading = $rootScope.$on('$viewContentLoading', function(event, viewConfig) {
  if (viewConfig.substr(1).length > 0 && viewConfig.substr(1).length !== 'logout') {
    $translatePartialLoader.addPart(viewConfig.substr(1));
  }
});

$rootScope.stateChangeStart = $rootScope.$on('$stateChangeStart', function (event, toState){
  if (toState.name.length > 0 && toState.name !== 'logout') {
    $translatePartialLoader.addPart(toState.name);
  }
});

The current output of viewContentLoading is not documented, but I sort of figured out what it is doing with Web Inspector. Later in the development of my app I plan to make a way to offload the unused translation data and having two separate functions would make this difficult.

[christopherthielen]

Thanks for the summary. Can you clarify which version this issue was posted against? Neither 0.14 nor 1.2 are ui router releases.

[DaAwesomeP]

I'm so sorry! I read the versions for UI Bootstrap in my config file (the line below). It was 0.2.15 to 0.2.18. I did a basic search and I think that the probable cause was this commit: f9b43d6 which apparently solved #685. It happened in that time period and has some major changes.

During my development phase I set the patch on the semver to and asterisk. So something like 0.2.*. It's not every day that I go through Bower's cache to see what version I had (I should really keep track of that).

[DaAwesomeP]

Found it! Looks like it was sort of deprecated...
#685 (comment) from @metamatt:

Proposal 2: remove the existing $viewContentLoading, and just emit $viewContentLoading from updateView before the $transclude call. This might break people who depend on the current behavior, but barring an explanation I don't currently understand, this behavior makes more sense.

#685 (comment) from @christopherthielen:

Metamatt Thanks for the analysis. I've never understood how people are using these events external to ui-router code. I think option #2 seems reasonable.

Can anyone else speak up if they are using viewContentLoading in some meaningful way and would object to proposal #2?

Later you can see that the commit was merged to the legacy branch, and the milestone was set to 0.2.16 and 1.5.0.

What should I do? I guess that I'll have to stick with my alternative half-working method. Also, please update the wiki.

[christopherthielen]

Thanks for finding that. It looks like we changed it so the loading/loaded pairs made sense. Apparently the options object was not available where the new code triggers the event or something. Sorry about that... I never really understood how people were using that event in a meaningful way!

In 1.0, I think you can achieve your requirement by adding a transition hook that gets the views being entered, and returning a promise to load your data. In 1.0, the transition will wait for any promises returned from a transition hook, such as onStart.

$transitions.onStart({}, function($transition$) {
  var viewConfigs = $transition$.views();
  var includesList = viewConfigs.map(viewConfig => viewConfig.viewDecl.includes);
  return $q.all(includesList.map(/* return a promise to fetch the stuff */));
});

http://angular-ui.github.io/ui-router/1.0.0-alpha.3/interfaces/transition.ihookregistry.html#onstart
http://angular-ui.github.io/ui-router/1.0.0-alpha.3/classes/transition.transition-1.html#views

[DaAwesomeP]

I'll close this since the new version will solve the problem. I can't upgrade to Angular 2 yet, so I'll have to stick to my alternative solution for now. Please update the expected output on the wiki example: https://github.com/angular-ui/ui-router/wiki#view-load-events

Thanks for all of your help!

[christopherthielen]

Based on your Best comment, it seems like you think the 1.0 version is only for angular 2. Although the 1.0 version does support angular 2, it also is for angular 1