What sets onEnter apart from onStart in ui-router?

Question

What sets onEnter apart from onStart in ui-router?

I am transitioning to the latest version of ui-router (1.0.0-alpha.5) and I am exploring how to utilize the onEnter hook versus the onStart hook:

$transitions.onStart()

as well as

$transitions.onEnter()

In previous versions, we only had the event $stateChangeStart

javascript angularjs angular-ui-router

Answer 1

Answer №1

The documentation outlines the sequence in which transition lifecycle hooks are executed as follows:

onBefore
onStart/onInvalid
onEnter (for individual states)
onSuccess
onError

However, there seems to be some outdated information within this description. Specifically, it highlights that onEnter hooks pertain to entering a state, while onStart hooks relate to commencing a Transition between states.

This distinction is expanded upon in the hook documentation pages:

onStart hooks are asynchronously invoked, based on priority order, when the Transition initiates. At this juncture, the Transition has neither exited nor entered any states.

onEnter hooks are also asynchronously invoked, following priority order, during the process of entering a state. The entry into states occurs after the onRetain hooks have been executed.

One potential use for an onStart hook could involve transition validation, such as verifying user authentication. Here's an example snippet provided in the documentation:

$transitions.onStart( { to: 'auth.*' }, function(MyAuthService, $state) {
  // Check if the user is authenticated
  if (!MyAuthService.isAuthenticated()) {

    // Return a promise for successful login.
    // The transition will wait for this promise to resolve
    return MyAuthService.authenticate().catch(function() {

      // Redirect to a non-authenticated state
      return $state.target("guest");
    });
  }
});

Based on the latest findings, the correct order appears to be:

onBefore - Transition initialization; additional hooks can be registered here dynamically
onStart  - Transition begins execution
onExit   - Transition exits a state
onRetain - Transition maintains a state
onEnter  - Transition enters a state 
onFinish - Transition completion stage, all states have been entered and exited

onSuccess/onError - Transition finalization (successful or unsuccessful)

Note: All hooks except the last two possess the ability to alter the transition by modifying the target state and so forth. onSuccess and onError occur after the fact: once the transition concludes.

Answer 2

The documentation outlines the sequence in which transition lifecycle hooks are executed as follows:

onBefore
onStart/onInvalid
onEnter (for individual states)
onSuccess
onError

However, there seems to be some outdated information within this description. Specifically, it highlights that onEnter hooks pertain to entering a state, while onStart hooks relate to commencing a Transition between states.

This distinction is expanded upon in the hook documentation pages:

onStart hooks are asynchronously invoked, based on priority order, when the Transition initiates. At this juncture, the Transition has neither exited nor entered any states.

onEnter hooks are also asynchronously invoked, following priority order, during the process of entering a state. The entry into states occurs after the onRetain hooks have been executed.

One potential use for an onStart hook could involve transition validation, such as verifying user authentication. Here's an example snippet provided in the documentation:

$transitions.onStart( { to: 'auth.*' }, function(MyAuthService, $state) {
  // Check if the user is authenticated
  if (!MyAuthService.isAuthenticated()) {

    // Return a promise for successful login.
    // The transition will wait for this promise to resolve
    return MyAuthService.authenticate().catch(function() {

      // Redirect to a non-authenticated state
      return $state.target("guest");
    });
  }
});

Based on the latest findings, the correct order appears to be:

onBefore - Transition initialization; additional hooks can be registered here dynamically
onStart  - Transition begins execution
onExit   - Transition exits a state
onRetain - Transition maintains a state
onEnter  - Transition enters a state 
onFinish - Transition completion stage, all states have been entered and exited

onSuccess/onError - Transition finalization (successful or unsuccessful)

Note: All hooks except the last two possess the ability to alter the transition by modifying the target state and so forth. onSuccess and onError occur after the fact: once the transition concludes.

What sets onEnter apart from onStart in ui-router?

Answer №1

Similar questions

Steps for implementing a conditional rendering in your codeHere is a

How to eliminate parameters from the URL in Ionic 2 with Angular 2

Using Knex in ExpressJS to insert a list of entries into SQLite with unique field constraints

What is causing the "unable to resolve dependency tree" error when using ng new newApp?

The type 'IProduct' cannot be assigned to type '[]'

Navigating through web pages and creating dynamic interfaces is made simple

Which frameworks are categorised under Express-based frameworks?

Having an issue where the Jquery clone function is only duplicating the content once. Looking to

emulating the behavior of a synchronous XmlHttpRequest

Distinguishing between a save and update using a shared Angular JS template

Entering numerous numerical values across a variety of input fields

Turning an Array of Objects into a typical JavaScript Object

How can I render just one event instead of all events when using the eventRender callback function?

Goodbye.js reliance on lodash

Connect the attributes of one object to the properties of another object

React Data Filtering Techniques

Precise coordination of a singular model through the use of angularFireCollection

Easy task tracker in Vue.js

Enhance results by combining data from user input with data retrieved asynchronously from server-side APIs

Utilizing React Material-Table to Trigger a React Component through Table Actions