Integrate Google Adsense with AngularJS | JavaInUse



Integrate Google Adsense with AngularJS



Video

This tutorial is explained in the below Youtube Video.

Overview

In this post we integrate Google Adsense with AngularJS
Our Project structure is as follows-
We require the following javascript files for this tutorial-
  • angular-route.js
  • angular.js
  • jquery.js

In the main.js we define the route. We also define the googleAd directive.
window.app = angular.module('app', ['ngRoute']);

window.app.config([
  '$routeProvider', function($routeProvider) {
    $routeProvider.when('/page1', {
      templateUrl: 'pages/page1.html',
      controller: 'autoRefreshController'
    }).when('/page2', {
      templateUrl: 'pages/page2.html',
      controller: 'autoRefreshController'
    }).otherwise({
      redirectTo: '/page1'
    });
  }
]);

window.app.controller('autoRefreshController', [
  '$scope', function($scope) {
    console.log("autoRefreshController");
    $scope.rand = Math.random();
  }
]);

window.app.directive('googleAd', [
  '$timeout', function($timeout) {
    return {
      restrict: 'A',
      link: function(scope, element, attr) {
        return $timeout(function() {
          var adsbygoogle, html, rand;
          rand = Math.random();
          html = "<ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-765679256709911' data-ad-slot='1674676730' data-ad-format='auto'></ins>";
          $(element).append(html);
          return (adsbygoogle = window.adsbygoogle || []).push({});
        });
      }
    };
  }
]);
In the page1.html use the following google-ad tag.
The ad is 
<div google-ad=""></div>

Our index.html will be as follows-
<!DOCTYPE html>
<html>
  <head>
    <link href="scripts/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="scripts/jquery.js"></script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-route.js"></script>
    <script src="js/main.js"></script>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  </head>
  <body ng-app="app">
    <div class="container">
        <h1>
          Test Google Adsense
        </h1>
      </div>
      <div ng-view=""></div>
  </body>
</html>

Finally our pom.xml will be as follows. We have defined the tomcat plugin for deployment to tomcat.
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.javainuse</groupId>
	<artifactId>angular-spring-module-2</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	
	<build>
		<plugins>
		<plugin>
           <groupId>org.apache.maven.plugins</groupId>
           <artifactId>maven-compiler-plugin</artifactId>
           <version>2.3.1</version>
           <configuration>
               <source>1.8</source>
               <target>1.8</target>
           </configuration>
       </plugin>
			<plugin>
				<groupId>org.apache.tomcat.maven</groupId>
				<artifactId>tomcat7-maven-plugin</artifactId>
				<version>2.2</version>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-war-plugin</artifactId>
				<version>2.4</version>
			</plugin>
		</plugins>
	</build>
</project>

Deploy the application and go to http://localhost:8080/angular-spring-module-2

Download Source Code

Download it - Google Adsense with AngularJS
 

See Also

Creating a Simple AngularJS Application with ngRoute and Partials Removing the # from the AngularJS URL Use Google reCaptcha with AngularJS Use AngularJS NgCloak directives Example