https://github.com/petarjs/ng-post-message
AngularJS Post Message API wrapper
https://github.com/petarjs/ng-post-message
Last synced: 13 days ago
JSON representation
AngularJS Post Message API wrapper
- Host: GitHub
- URL: https://github.com/petarjs/ng-post-message
- Owner: petarjs
- Created: 2015-09-29T10:02:35.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2016-03-17T12:47:29.000Z (over 10 years ago)
- Last Synced: 2026-01-14T07:43:39.852Z (6 months ago)
- Language: JavaScript
- Homepage: http://petarslovic.github.io/ng-post-message/
- Size: 518 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# AngularJS Post Message API Wrapper
AngularJS Post Message API Wrapper.
Developed for communication between two Angular apps, but can be used with non-angular apps as well.
## Demo
http://petarslovic.github.io/ng-post-message/
## Dependencies
- required:
lodash
See `bower.json` and `index.html` in the `gh-pages` branch for a full list / more details
## Install
### Get the files
Bower
add `"ng-post-message": "latest"` to your `bower.json` file then run `bower install` OR run `bower install ng-post-message`
### Include the files in your app
`post-message.min.js`
### Include the module in angular
i.e. in `app.js` - `petarslovic.ng-post-message`
See the `gh-pages` branch, files `bower.json` and `index.html` for a full example.
## Documentation
### Configuration
To configure ng-post-message, inject it in the config phase like so:
```
angular
.module('your-module')
.config(function(PostMessageProvider) {
PostMessageProvider.setAllowedDomains(['http://petarslovic.github.io']);
});
```
- **PostMessageProvider.setAllowedDomains(array)**
Set the list of domains that your app can communicate with.
This list will be checked when your app receives a message.
- **PostMessageProvider.debug(boolean)**
Turn debug messages on or off.
### API
- **PostMessage.on(*messageName*, *callback*)**
Registers message listeners.
Message name is like an event name, and callback will be executed when the message arrives.
When your callback is invoked, it will be provided the original event and message data as parameters in that order.
Message data is an object containing `messageName` and `data`.
```
var offSomeEvent = PostMessage.on('some-event', function(event, data) {
console.log(event, data);
vm.message = data;
});
```
The `PostMessage.on` method returns a deregister function that you can call to deregister that listener.
For example, you would deregister a listener when a scope is destroyed (i.e. state changed).
```
$scope.$on('$destroy', offSomeEvent);
```
- **PostMessage.send(*messageName*, *data*, *iframeName*, *domain*)**
Sends a message with name `messageName` and data `data` to iframe with `[name="iframeName"]` that is located on the domain `domain`.
If you provide null as an `iframeName` the message will be sent to `window.parent` (for sending messages from an iframe to parent window).
If you don't provide `domain` as a parameter, `'*'` will be used.
```
PostMessage.send('some-event', {
some: 'data'
}, 'myIframeName', 'http://petarslovic.github.io');
```
## Development
1. `git checkout gh-pages`
1. run `npm install && bower install`
2. write your code then run `grunt`
3. git commit your changes
2. copy over core files (.js and .css/.less for directives) to master branch
1. `git checkout master`
2. `git checkout gh-pages post-message.js post-message.min.js`
3. update README, CHANGELOG, bower.json, and do any other final polishing to prepare for publishing
1. git commit changes
2. git tag with the version number, i.e. `git tag v1.0.0`
4. create github repo and push
1. [if remote does not already exist or is incorrect] `git remote add origin [github url]`
2. `git push origin master --tags` (want to push master branch first so it is the default on github)
3. `git checkout gh-pages`
4. `git push origin gh-pages`
5. (optional) register bower component
1. `bower register ng-post-message [git repo url]`