https://github.com/normandy72/transition-events

Router State Transition Events in AngularJS. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
https://github.com/normandy72/transition-events

angular angularjs css css3 html html5 javascript js

Last synced: about 1 month ago
JSON representation

Router State Transition Events in AngularJS. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.

• Host: GitHub
• URL: https://github.com/normandy72/transition-events
• Owner: Normandy72
• Created: 2023-01-23T13:18:34.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-01-23T13:48:13.000Z (over 3 years ago)
• Last Synced: 2025-03-04T08:44:54.195Z (over 1 year ago)
• Topics: angular, angularjs, css, css3, html, html5, javascript, js
• Language: JavaScript
• Homepage:
• Size: 93.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Router State Transition Events

## $stateChangeStart

* Fires when state change transition begins.

* Use `event.preventDefault()` to prevent the transition from occuring.

```

$rootScope.$on('$stateChangeStart',

                function(event, toState, toParams, fromState, fromParams, options){

                    ...

                }

);

```

## $stateChangeSuccess

* Fired once the state transition is complete.

```

$rootScope.$on('$stateChangeSuccess',

                function(event, toState, toParams, fromState, fromParams){

                    ...

                }

);

```

## $stateChangeError

* Fires when an error occurs during transition.

```

$rootScope.$on('$stateChangeError',

                function(event, toState, toParams, fromState, fromParams, error){

                    ...

                }

);

```

***

#### _Summary_

* ui-router exposes numerous state change events that our code is able to listen for.

* All ui-router events are fired on the $rootScope.

* $stateChangeStart - starts the state transition. Call `event.preventDefault()` to prevent the transition.

* $stateChangeSuccess indicates a successful transition end.

* $stateChangeError indicates that the transition failed, including having errors in the resolve. Listen for this event to catch ALL errors during state changes.

***