Extracting Information from a Link with Node.js & AngularJS

Published May 06, 2015Last updated Mar 07, 2017

Introduction

Have you ever noticed how Facebook extracts the information from a link the minute you paste one, or how Quora extracts the title of the link once you pasted the URL? In one form or another, they both use the technology of open embedding, which is also called Oembed.

In this tutorial, I am going to demonstrate to you how to retrieve the information from a link, just as Facebook and some popular websites do it.

Our Project

To demonstrate this scenario, I have built a simple application that takes URL as an input (you can add text and other information too), and extracts information from a link to show it right away on your console.

I have used Node.js on the back-end to provide the web service, and AngularJS on the front-end to make Ajax call.

About Oembed-auto

Oembed-auto is a node-module that helps us retrieve Oembed information from a link. You can download and install this package in
your project using following command:

npm install --save oembed-auto

Implementation

Directory Structure

├── index.html
├── node_modules
├── js
│   ├── angular.js
│   ├── app.js
│   └── core.js
├── package.json
└── server.js

Package.json

{
  "name": "oembed-api",
  "version": "1.0.0",
  "dependencies": {
    "express": "~4.9.3",
    "oembed-auto": "0.0.3",
        "body-parser": "^1.12.3"
  }
}

Switch to the project directory and install dependencies by running following command:

npm install

Here is what your index.html should look like:

<html>
  <head>
    <title>OEmbed</title>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="core.js"></script>
  </head>
  <body>
    <div ng-app='status_app' ng-controller='status_controller'>
      <textarea id="status" cols="50" rows="5" ng-model='status_box'></textarea><br><br>
      <input type="button" value="submit" ng-click="add_status()"><br>
      <div ng-bind-html="response_data"></div>
  </div>
  </body>
</html>

Here is your app.js:

var app=angular.module('status_app',[]);

And your core.js:

app.controller('status_controller',function($scope,$http,$sce){

  $scope.add_status=function(){
  var url=$scope.status_box;
  var request = $http({
      method: "post",
      url: "/get_meta",
      data: {
    data: url
      },
      headers: { 'Content-Type': 'application/json' }
  });

  /* Check whether the HTTP Request is successful or not. */
  request.success(function (data) {
    if(data.error) {
      $scope.response_data = $sce.trustAsHtml(data.link);
    } else {	
      $scope.response_data = $sce.trustAsHtml("<h3>"+data.title+"</h3>" + data.html);
    }
  });
    };
});

Here is what the server file should look like:

var express = require("express");
var app =express();
var oembed=require("oembed-auto");
var bodyParser = require("body-parser");

app.use(express.static(__dirname + '/js'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/',function(req,res,next){
  res.sendFile(__dirname + '/index.html');
});

app.post('/get_meta',function(req,res){
    oembed(req.body.data, function(error, result) {
        if (error)
            res.json({"error" : true,"link" :req.body.data});
        else
            res.json(result);
    });
});

app.listen(3000,function(){
  console.log("We are listening at 3000");
});