Integrate Google Adsense with AngularJS | JavaInUse

Integrate Google Adsense with AngularJS


This tutorial is explained in the below Youtube Video.


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. = angular.module('app', ['ngRoute']);[
  '$routeProvider', function($routeProvider) {
    $routeProvider.when('/page1', {
      templateUrl: 'pages/page1.html',
      controller: 'autoRefreshController'
    }).when('/page2', {
      templateUrl: 'pages/page2.html',
      controller: 'autoRefreshController'
      redirectTo: '/page1'
]);'autoRefreshController', [
  '$scope', function($scope) {
    $scope.rand = Math.random();
]);'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>";
          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>
    <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="//"></script>
  <body ng-app="app">
    <div class="container">
          Test Google Adsense
      <div ng-view=""></div>

Finally our pom.xml will be as follows. We have defined the tomcat plugin for deployment to tomcat.
<project xmlns="" xmlns:xsi=""

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