angular-ads

A directive for creating advertisements out of referral and affiliates links

View on Github

bower install angular-ads

Getting Started

1. Link angular-ads.css and angular-ads.js in your page

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <!-- include the angular-ads css styles -->
    <link href="css/angular-ads.css" rel="stylesheet">
    <!-- include the angular-ads js file -->
    <script src="js/angular.js" type="text/javascript"></script>
    <script src="js/angular-ads.js" type="text/javascript"></script>
    <script src="js/app.js" type="text/javascript"></script>

2. Add angular-ads to your Angular app's dependencies

// example of an app.js file
angular.module('app', ['angular-ads']);

3a. Use the og-ads directive attribute, by default it is set up to get json from ads/ads.json 

  <body>
    <!-- This div grabs data from the file path ads/ads.json -->  
    <div og-ads></div>

3b. Use the og-ads directive attribute, and an additional attribute og-ads-url to grab json from a different file path than the default 

  <body>
    <!-- This div grabs data from the file path ads/coolads.json -->  
    <div og-ads og-ads-url="ads/coolads.json"></div>

4. Set up a json file, An example model of the file ads/ads.json is:

[
  {
    "headline": "Headline Text Goes here",
    "imageUrl": "path/to/ad/image.jpg",
    "text": "Description Text of the Ad goes here",
    "link": "http://your-affiliate-link-here.com"
  },
  {
    "headline": "Beyonce - Beyonce",
    "imageUrl": "img/beyonce.png",
    "text": "Beyonce made an stealth album with no promotion, wow oh wow",
    "link": "http://btunes.com/albums/beyonce"
  },
  {
    "headline": "Buy Bitcoins!",
    "imageUrl": "img/ads/bitcoin.jpg",
    "text": "pump and dump, pump and dump, pump and dump",
    "link": "http://pumpandump.com/refer-a-friend"
  }
]

Info