Embed codepen pens in AngularJS apps

Easily embed codepen pens in your AngularJS application.

• lightweight (< 1.2 KB)
• no custom markup required!
• simply paste the original codepen embed code in your markup
• supports multiple pens per page
• support state changes so pens load correctly when the view changes
• no additional scripting required, works out-of-the-box!

Check out the online demo.

Usage

First install the module using bower:

$ bower install angular-embed-codepen

then add the embedCodepen module to the dependencies of your AngularJS application module:

angular.module('yourApp', ['embedCodepen']);

Now you can easily copy/paste original codepen embed code:

in the view markup of your AngularJS application:

<p data-height="268" data-theme-id="0" data-slug-hash="PwzYvv" data-default-tab="result" data-user="DavidKern" class='codepen'>See the Pen <a href='http://codepen.io/DavidKern/pen/PwzYvv/'>David Kern HTML5 Table</a> by David Kern (<a href='http://codepen.io/DavidKern'>@DavidKern</a>) on <a href='http://codepen.io'>CodePen</a>.</p>

There is no need to include the

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

line that comes with the original embed code. You can just remove that line from your markup (after pasting the embed code) and it will all magically work:

Contribute

To update the build in the dist directory:

$ gulp

To run the unit tests (for both concatenated and minified version):

$ gulp test

Change log

v1.1.1

• update bower ignore files

v1.1.0

• add travis support
• update documentation

v1.0.0

• refactor to support original markup
• add unit tests
• update documentation

v0.1.0

• Initial version