title: Using angularJS with requireJS - cannot read property 'module' of undefined
body: <p>I had started writing an app using angularJS. After a few weeks, I suddenly realized that I should have used require JS from the beginning to load my modules. Yes, I know, it was stupid. But it is what it is.
  So I've tried to convert my code to suit requireJS now.</p>
  
  <p>This is my main.js</p>
  
  <pre><code>requirejs.config({
  baseUrl: "js",
  paths: {
      jquery:'jquery-1.7.min',
      angular: 'angular',
      angularRoute:'angular-route',
      mainApp:'AngularApp/app'
  
  },
   priority:['angular'],
  shim:{
  
      angularRoute:{
          deps:["angular"]
      },
      mainApp:{
          deps:['angularRoute']
      }
  }});
  
  require(['angular','angularRoute', 'mainApp'],
      function(angular, angularRoute, app)
      {
          angular.bootstrap(document, ['ServiceContractModule']);
      });
  </code></pre>
  
  <p>This is my app.js</p>
  
  <pre><code>define(['angular',
      'angularRoute',
      'AngularApp/services',
      'AngularApp/directives',
      'AngularApp/controllers'],
      function(angular, angularRoute, services, directives, controllers)
      {
          console.log("sup");
          var serviceContractModule = angular.module('ServiceContractModule',[ 'ngRoute', services, directives, controllers ]);
          serviceContractModule.config(function($routeProvider,$locationProvider) {
              $routeProvider.when('/contractNumber/:contractNumbers', {
                  controller : 'ContractController',
                  templateUrl : './contractSearchResult',
                  reloadOnSearch : true
              }).when('/serialNumber/:serialNumbers', {
                  controller : 'SerialController',
                  templateUrl : './serialSearchResult'
              }).when('/QuoteManager',{
                  controller : 'QuoteManagerController',
                  templateUrl: './quoteManagerView'
              }).when('/QuoteManagerHome',{
                  controller : 'QuoteManagerController',
                  templateUrl: './quoteManagerHome'
              });
          });
  
          return serviceContractModule;
      });
  </code></pre>
  
  <p>This is my directives.js file</p>
  
  <pre><code>define(['angular',
      'AngularApp/Directives/tableOperations',
      'AngularApp/Directives/line',
      'AngularApp/Directives/listOfValues'],
      function(
      angular,
      tableOperations,
      line,
      listOfValues)
      {
          var directiveModule = angular.module('ServiceContractModule.directives');
          directiveModule.directive('tableoperations', tableOperations);
          directiveModule.directive('line', line);
          directiveModule.directive('listOfValues', listOfValues);
          return directiveModule;
      }
  </code></pre>
  
  <p>)</p>
  
  <p>And this is my services.js file</p>
  
  <pre><code>define(['angular',
      'AngularApp/Services/quoteManagerSearch'],
      function(angular, quoteManagerSearch)
      {
          var serviceModule = angular.module('ServiceContractModule.services');
          serviceModule.factory('searchRequestHandler', quoteManagerSearch);
          return serviceModule;
      }
  </code></pre>
  
  <p>)</p>
  
  <p>When I run my page, the current error I am getting is</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'module' of undefined directives.js:14</p>
    
    <p>Uncaught TypeError: Cannot read property 'module' of undefined services.js:5</p>
  </blockquote>
  
  <p>This seems to be happening on this particular line</p>
  
  <pre><code>var directiveModule = angular.module('ServiceContractModule.directives');
  </code></pre>
  
  <p>I think for some reason, the angular file is not getting loaded. Although when I run the page, I can see all the js files being loaded in the correct order in chrome.</p>
  
  <p>Any ideas guys? Need quick help! Thanks!</p>