Skip to content
This repository was archived by the owner on Sep 15, 2021. It is now read-only.

Getting Started

Jump to bottom
Jaime edited this page Jul 7, 2017 · 1 revision

Welcome to angular-dfp, the javascript library that lets you integrate the GPT library into your Angular app with a beautiful semantic declarative syntax.

1. Get angular-dfp

Angular-dfp is available as an npm package. You can install it with npm:

$ npm install angular-dfp --save

After that you can integrate it with your front-end build pipeline of choice or you can just get the angular-dfp.min.js and include it in your project.

For instance:

<!DOCTYPE html>
<html>
<head>  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <script src="https://unpkg.com/angular-dfp@1.0.1/angular-dfp.min.js"></script>
</head>
<body ng-app="myApp">
  <!-- my app here -->
</body>
</html>

2. Adding angular-dfp to Your Angular App

Angular-dfp is contained within an Angular module. In order to include it in your application just add it as a dependency of your application module:

angular
  .module('myApp', ['angularDfp']);

3. Initialize Angular DFP

Before you can start using Angular DFP you need to initialize it. Add the following code to your application's code:

angular
  .module('angularDfpDemo', ['angularDfp'])
  .run(['dfp', function(dfp){
     // initialize angular-dfp
     dfp(); 
}]);

This will pull down the latest version of the GPT library and initialize the app level configuration for angular-dfp.

4. Use angular-dfp directives in Your App

Now you can start using the angular-dfp directives inside your web app:

  <dfp-ad force-safe-frame ad-unit="/35096353/pub-showcase">
    <dfp-size width="300" height="250"></dfp-size>
  </dfp-ad>

Enjoy!

Clone this wiki locally