Git Product home page Git Product logo

ng-post-message's Introduction

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]

ng-post-message's People

Contributors

petarsjs avatar petarjs avatar

Watchers

James Cloos avatar  avatar

Forkers

obscuredvision

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.