AngularJS – what is $transitions?

Issue

Currently working on a AngularJS + NodeJS app when all of a sudden I see this code:

    $transitions.onStart({exiting: 'orders.view'}, function(trans) {
        Socket.emit('orders:leave', {id_order: trans.params('from').id_order});
    });

Help me find what does $transitions eat for lunch.

Thanks.

After answer edits:

For those who end up landing here, you can basically do whatever you want in those transitions; Including doing some things when you exit X state.

'use strict';

// Configuring the orders module
angular.module('orders').run(['Menus','MODULE_LIST', 'Authentication', '$transitions', 'Socket', '$templateCache',
    function(Menus, MODULE_LIST, Authentication, $transitions, Socket, $templateCache) {

        $transitions.onStart({exiting: 'orders.view'}, function(trans) {
          alert('Alert function has stopped you from going further BEEP BOOP')
          Socket.emit('orders:leave', {id_order: trans.params('from').id_order});
        });

        var stlViewPopoverHtml =
            '<div>' +
            '<img ng-src="{{url}}" height="{{height}}" width="{{width}}">' +
            '</div>';

        $templateCache.put('stl-preview-popover.html', stlViewPopoverHtml);
    }
]);

Solution

This is part of the UI-Router. You can find the documentation here: Transition Hooks

For example $transitions.onStart will register a transition hook that triggers the provided function whenever you move from one state into another state. In your example it will only trigger when exiting the provided state, in your case that state is orders.view.

To summarize what the code you provided will do: When exiting the orders.view state, the Socket.emit will be triggered once the state transition starts.

Answered By – BShaps

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.