JarCasting
JarCasting JarCasting

angular-post-message

WebJar for angular-post-message

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

angular-post-message
Last Version

Last Version

1.3.1
Release Date

Release Date
Type

Type

jar
Description

Description

angular-post-message
WebJar for angular-post-message
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/kylewelsby/angular-post-message

Download angular-post-message

Filename Size
angular-post-message-1.3.1.pom
angular-post-message-1.3.1.jar 13 KB
angular-post-message-1.3.1-sources.jar 22 bytes
angular-post-message-1.3.1-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-post-message/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-post-message</artifactId>
    <version>1.3.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/angular-post-message/
implementation 'org.webjars.bower:angular-post-message:1.3.1'
// https://jarcasting.com/artifacts/org.webjars.bower/angular-post-message/
implementation ("org.webjars.bower:angular-post-message:1.3.1")
'org.webjars.bower:angular-post-message:jar:1.3.1'
<dependency org="org.webjars.bower" name="angular-post-message" rev="1.3.1">
  <artifact name="angular-post-message" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='angular-post-message', version='1.3.1')
)
libraryDependencies += "org.webjars.bower" % "angular-post-message" % "1.3.1"
[org.webjars.bower/angular-post-message "1.3.1"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.bower : angular jar [1,2)

Project Modules

There are no modules declared in this project.

AngularJS postMessage API

Allow angularJS to listen and publish cross-document messages though window.postMessage API.

Cross-document messaging is compatible with the following browsers as seen on Can I Use:

  • Internet Explorer 8+
  • Firefox 3+
  • Chrome 4+
  • Safari 4+
  • Opera 9.5+
  • iOS Safari 3.2+
  • Opera Mini 5+
  • Android Browser 2.1+
  • Blackberry Browser 7+
  • Opera Moble 10+
  • Chrome for Android 30+
  • Firefox for Android 25+
  • Internet Exploer Mobile 10+

Partial support in IE8-9 refers to only working in frames/iframes (not other tabs/windows). Also in IE 9 and below an object cannot be sent using postMessage. Partial support in IE10 refers to limitations in certain conditions

Tested on AngularJS versions 1.2, 1.3 and 1.4 in Chrome, Firefox, Opera, and IE9+.

IE8 is not officially supported by AngularJS

Installation

The repository comes with the modules pre-built and compressed into the dist/ directory.

Install the component via bower

bower install angular-post-message

Or alternatively checkout this repo into your project.

Then include dist/angular-post-message.min.js into your project.

Example

This is a simple example which uses postMessage to deliver messages between two origins. There is a gist which will deliver a message every second

index.html

<html>
  <head>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-post-message/angular-post-message.js"></script>
  </head>
  <body>
    <iframe src="https://rawgit.com/kylewelsby/585b3a5395c6731acc50/raw/f661e856adbccf39549ed7c550661f09158f8d55/index.html"></iframe>
    <br>
    <button ng-click="sendMessage();">Send response</button>
    <br>
    <ol>
      <li ng-repeat="message in messages">{{message}}</li>
    </ol>
  </body>
</html>

app.js

var app = angular.module('app',['ngPostMessage']);
app.controller('MainCtrl', function($scope) {
  $scope.messages = [];
  $scope.$root.$on('$messageIncoming', function (event, data){
    $scope.messages.push(angular.fromJson(data));
  });
  $scope.sendMessage = function (){
    $scope.$emit(
      '$messageOutgoing',
      angular.toJson({"response":"hi"})
    );
  };
});

Development

You do not need to build the project to use it, but if you are working on it then this is what you need to know.

Requirements

Testing

To run all the tests

npm test

To run tests while developing (limited to latest Angular version on Google Chrome)

karma start

or run tests once

./scripts/ci

Versions

Version
1.3.1