0

With emberJS I can intercept a state/route activation process with:

http://emberjs.com/guides/routing/redirection/#toc_before-the-model-is-known

overriding the beforeModel function.

What is the equivalent of the emberJS beforeModel routing function just for the ui router module in angularJS ?

I am missing this very important functionality in angularjs.

This question is a subsequent question to this:

Can I use a pre-computed value as url parameter in emberjs

Community
  • 1
  • 1
Elisabeth
  • 20,496
  • 52
  • 200
  • 321

2 Answers2

0

I think you're referring to a resolve, but I'm not an Ember expert yet.

Basically a resolve makes sure you've got some promise resolved, i.e. a model or anything else asynch, before switching a route.

If you're not referring to a model, there's also onRouteChangeStart event.

Community
  • 1
  • 1
Jonathan Rowny
  • 7,588
  • 1
  • 18
  • 26
  • Seems I would have to go with the locationChangeStart event: http://stackoverflow.com/questions/16344223/angularjs-cancel-route-change-event I do NOT like that the interception is handled globally. With emberJS the route hook is done on the concrete route. I take my hat off for the emberJS router developers they seem to know how routing can be kick ass. – Elisabeth Aug 04 '14 at 18:41
  • Yea, Routing is terrible in Angular, that's why we all use ui-router: https://github.com/angular-ui/ui-router. – Jonathan Rowny Aug 04 '14 at 18:42
  • But I use the ui router... and thats the correct event to listen to: $stateChangeStart but as I said before I do NOT like that the hook is in the .run() function and listens to the $rootScope... because when I change a certain route its a matter of a certain area not the global run() function to handle this route change. – Elisabeth Aug 04 '14 at 19:04
0

After checking some sites I have come up with a working solution for my case:

  $rootScope.$on('$stateChangeStart', function(ev, toState, toParams, fromState, fromParams) {
        if (toState.name === "projects.selected.dates.day") {

          ev.preventDefault();

          var currentDate = new Date();
          var currentYear = currentDate.getFullYear();
          var currentMonth = currentDate.getMonth() + 1;
          var currentDay = currentDate.getDate();

          // The first time the user opens a project the date data is null in the toParams
          if (!toParams.year && !toParams.month && !toParams.day) {
            toParams.year = currentYear;
            toParams.month = currentMonth;
            toParams.day = currentDay;
          }

          $state.go(toState.name, toParams, {
            notify: false
          }).then(function() {
            $rootScope.$broadcast('$stateChangeSuccess', toState, toParams, fromState, fromParams);
          });
        }
      });

// Do the 'same' for the week state and month state...

The above code works fine.

I just do not like that the change/interception of a route happens not at the place where the state is added that means in the .config() function instead I have to intercept the states in the .run() function.

I would have appreciated a stateChange function like this:

  .state('projects.selected.dates.day', {
        stateChange: function(stateData)
        {
           // hook in here to calculate url parameter
        },
        url: '/day/:year-:month-:day',
        views: {
          'planner@projects.selected.dates': {
            templateUrl: 'dateplanner.day.html',
            controller: 'DateplannerDayController'
          }
        }
      })
Elisabeth
  • 20,496
  • 52
  • 200
  • 321