angular-embed

angular-embed

This library wraps the embed services from NoEmbed and Embed.ly.

How it works

NoEmbed is an open-source project which provides a lot of supported services. Because it's free and unlimited, we use this service first.
But sometimes, when the page is unknown, NoEmbed can't provide anything.
Then when we try to retrieve information on a page that NoEmbed doesn't support, we use Embed.ly. It is a lot more accommodating with random page. It use an extractor to retrieve a title, a description and an illustration if available.
Embed.ly limits the amount of requests and requires an API key so you need to register.

How to use it

• You need to import angular-embed and angular-embedly in your page

<script src="bower/angular-embedly/em-minified/angular-embedly.min.js"></script>
<script src="bower/angular-embed/dist/angular-embed.min.js"></script>

• And add them in your angular application

    angular.module('myApp', [
        // set `angular-embed` as a dependency of your module
        'angular-embed'
    // inject the service
    ]).controller('Ctrl', ['embedService', function(embedService) {
        // retrieve page information
        embedService.get('https://www.youtube.com/watch?v=Ksd-a9lIIDc')
    }]).config(function(embedlyServiceProvider) {
        // set your embed.ly key
        embedlyServiceProvider.setKey('your key');
    });

• You can also use the directive instead of using the embedService with one of the following syntaxes

<ng-embed url="https://www.youtube.com/watch?v=Ksd-a9lIIDc"></ng-embed>
<div ng-embed="https://www.youtube.com/watch?v=Ksd-a9lIIDc"></div>
<div class="ng-embed:https://www.youtube.com/watch?v=Ksd-a9lIIDc;"></div>

Special Handlers

angular-embed comes with some custom handlers

Name	Description
ngEmbedFacebookHandler	Add a width parameter to the facebook embed code and an App id (see below)
ngEmbedInstagramHandler	Use embed.ly for instagram
ngEmbedTwitterHandler	Construct a custom <blockquote> element from embed.ly's metadata
ngEmbedYoutubeHandler	Use embed.ly for youtube

To use a special handler, register them in the run block.

angular.module('myApp')
    .run(['embedService', 'ngEmbedTwitterHandler', 'ngEmbedFacebookHandler',
        function(embedService, ngEmbedTwitterHandler, ngEmbedFacebookHandler) {
            embedService.registerHandler(ngEmbedFacebookHandler);
            embedService.setConfig('facebookAppId', 'xxxxxxxxxxxxxxx');
            embedService.registerHandler(ngEmbedTwitterHandler);
            // optional: if true, prevent to use noembed as first choice (default: false)
            embedService.setConfig('useOnlyFallback', true);
        }
    ]);

Custom Handler

You can register all the handlers you want. An handler must match this structure and must return a promise of a valid oembed code.

{
    name: 'Twitter',
    patterns: [
        'https?://(?:www|mobile\\.)?twitter\\.com/(?:#!/)?[^/]+/status(?:es)?/(\\d+)/?$',
        'https?://t\\.co/[a-zA-Z0-9]+'
    ],
    embed: function(url, max_width) {
        var deferred = $q.defer();
        ...
        return deferred.promise;
    }
}