Easily embed codepen pens in your AngularJS application.

angular-embed-codepen

angular-embed-codepen

Stars : 10

Forks : 10

Created by Jurgen Van de Moere

bower install angular-embed-codepen

Demo Download GitHub

Embed codepen pens in AngularJS apps

Easily embed codepen pens in your AngularJS application.

Build Status

codepen

  • 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:

embed

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:

output

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

Javscript

Javascript plugin

Angular-js