https://github.com/normandy72/event-system
AngularJS Event System. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
https://github.com/normandy72/event-system
angular angularjs css css3 html html5 javascript js
Last synced: about 1 month ago
JSON representation
AngularJS Event System. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
- Host: GitHub
- URL: https://github.com/normandy72/event-system
- Owner: Normandy72
- Created: 2023-01-19T10:22:50.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-19T10:24:07.000Z (over 3 years ago)
- Last Synced: 2025-12-04T20:56:23.564Z (6 months ago)
- Topics: angular, angularjs, css, css3, html, html5, javascript, js
- Language: JavaScript
- Homepage:
- Size: 109 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AngularJS Event System
## Publish-Subscribe Design Pattern
Publishers send messages to subscribers on a common channel.
#### Publishers:
* Mark messages with a classification.
* Don't know subscribers or if there are any.
#### Subscribers:
* Sign up to listen for messages with a particular classification.
* Don't know publishers or if there are any.
In Angular the common channel is __scope__.
Messages are events that can hold data.
## Publishing an Event
* `$scope.$emit` - events go UP the scope chain.
* `$scope.$broadcast` - events go DOWN the scope chain.
* `$scope.$on`
## Steps to create event
#### Step 1: Broadcast or Emit an Event
```
$scope.$broadcast(
'namespace:eventName',
{prop: value}
);
```
or
```
$scope.$emit(
'namespace:eventName',
{prop: value}
);
```
`'namespace:eventName'` - name of event (note namespace)
`{prop: value}` - data object to travel with event
#### Step 2: Listen for & Handle the Event
```
$scope.$on('namespace:eventName', handler);
function handler(event, data){
if(data.prop === 'val1')
{
...
}
};
```
`'namespace:eventName'` - same name as was emitted / broadcasted
`data` and `data.prop` - data that traveled with the event
***
##### _Summary_
* Publish-subscribe design pattern is implemented using the Angular Events system.
* You can publish events from anywhere in the system and listen for those events anywhere in the system.
* `$scope.$emit` sends the event up the scope chain.
* `$scope.$broadcast` sends the event down the scope chain.
* To broadcast to all nodes, use `$rootScope.$broadcast`.
* To listen for event, use either `$scope.$on` or `$rootScope.$on`.
* Deregister listener when using `$rootScope.$on`.
***