title: angularjs: how to link to service.js file in template file
body: <p>I have currently included all service files and controller files in index.html in my angularJS application and it is working fine.</p>
  
  <p>But I want to include the respective service file and controller file in the template file, so that unwanted files for the home page of my application will not be loaded in the initial load: thus decreasing the time to load the home page.</p>
  
  <p>I have tried to do this, but the I could not get the json data from the service.</p>
  
  <p>Here is what I have done so far</p>
  
  <p>app.js</p>
  
  <pre><code>var app = angular.module('app', ['ngRoute'])
  .config(function ($routeProvider, $locationProvider) {
      $routeProvider.when('/books',
      {
          templateUrl:'app/templates/books.html',
          controller:'booksController'
      }).when('/games',
      {
          templateUrl: 'app/templates/games.html',
          controller: 'gamesController'
      });
      $locationProvider.html5Mode(true);
  });
  </code></pre>
  
  <p>eventData.js service file</p>
  
  <pre><code>app.factory('eventData', function ($http, $log, $q) {
  
      return {
          getEvent: function () {
              var deferred = $q.defer();
              $http({
                  method: 'GET', url: 'https://www.googleapis.com/books/v1/volumes?q=harry%20potter'
              }).success(function (data, status, headers, config) {
                  deferred.resolve(data);
              }).error(function (data, status, headers, config) {
                  deferred.reject(status);
              });
              return deferred.promise;
          },
          getGames: function () {
              var deferred = $q.defer();
              $http({
                  method: 'GET', url: 'https://www.googleapis.com/books/v1/volumes?q=hunger%20games'
              }).success(function (data, status, headers, config) {
                  deferred.resolve(data);
              }).error(function (data, status, headers, config) {
                  deferred.reject(status);
              });
              return deferred.promise;
          }
      };
  });
  </code></pre>
  
  <p>eventController.js </p>
  
  <pre><code>'use strict';
  
  app.controller("EventController", function EventController($scope,eventData) {
      $scope.event = eventData.getEvent();
      $scope.event.then(function(event) {
          console.log(event);
          $scope.items = event.items;
          console.log($scope.items);
      },function(status) {
          console.log(status);
      });
  });
  </code></pre>
  
  <p>BooksController.js</p>
  
  <pre><code>'use strict';
  
  app.controller("booksController", function booksController($scope, eventData) {
      $scope.event = eventData.getEvent();
      $scope.event.then(function (event) {
          console.log(event);
          $scope.items = event.items;
          console.log($scope.items);
      }, function (status) {
          console.log(status);
      });
  });
  </code></pre>
  
  <p>books.html</p>
  
  <pre><code>&lt;script src="app/controllers/eventController.js"&gt;&lt;/script&gt;
  &lt;script src="app/controllers/booksController.js"&gt;&lt;/script&gt;
  &lt;script src="app/services/eventData.js"&gt;&lt;/script&gt;
  &lt;div style="padding-left: 20px;padding-right: 20px"&gt;
      &lt;div class="row"&gt;
          &lt;h3&gt;Sessions&lt;/h3&gt;
          &lt;ul style="list-style-type: none;"&gt;
              &lt;li ng-repeat="session in items"&gt;
                  &lt;div class="row session"&gt;
                      &lt;div class="well col-md-12"&gt;
                          &lt;h4 class="well"&gt;{{session.volumeInfo.title}}&lt;/h4&gt;
                          &lt;h6 style="margin-top: -10px"&gt;{{session.volumeInfo.publishedDate}}&lt;/h6&gt;
                          &lt;span&gt;Page Count: {{session.volumeInfo.pageCount}}&lt;/span&gt;&lt;br /&gt;
                          &lt;span&gt;Authors: {{session.volumeInfo.authors}}&lt;/span&gt;
                          &lt;p&gt;{{session.searchInfo.textSnippet}}&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
      &lt;head&gt;
          &lt;title&gt;Airlines!&lt;/title&gt;
          &lt;link href="Content/bootstrap.css" rel="stylesheet" /&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;base href="/airlines/"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar"&gt;
                  &lt;div class="navbar-inner"&gt;
                      &lt;ul class="nav"&gt;
                          &lt;li&gt;&lt;a href="books"&gt;Harry Potter&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="games"&gt;Hunger Games&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;ng-view&gt;&lt;/ng-view&gt;
          &lt;/div&gt;
          &lt;link href="Content/bootstrap.min.css" rel="stylesheet" /&gt;
          &lt;script src="Scripts/angular.js"&gt;&lt;/script&gt;
          &lt;script src="Scripts/angular-route.js"&gt;&lt;/script&gt;
          &lt;script src="app/app.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can you identify what I am doing wrong? </p>