title: Angular: Uncaught Error: [$injector:nomod] Module 'controllers' is not available! You either misspelled the module name or forgot to load it
body: <p>I'm getting two error messages:
  <strong>Uncaught Error: [$injector:nomod] Module 'controllers' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.</strong> </p>
  
  <p>and</p>
  
  <p><strong>Error: [ng:areq] Argument 'ActsController' is not a function, got undefined</strong></p>
  
  <p>I'm assuming my ActsController.js file is failing to load. However, I have other controller files that are loading just fine. It's only this one that's causing trouble. </p>
  
  <p><em>app.js</em></p>
  
  <pre><code>var snowball_effect = angular.module('snowball_effect', [
      'templates', 
      'ngRoute', 
      'ngResource',
      'controllers'
  ]);
  
  snowball_effect.config([
    '$routeProvider', function($routeProvider) {
      return $routeProvider
      .when('/', {
        templateUrl: "static_pages/templates/index.html",
        controller: 'StaticPagesController'
      })
      .when('/acts/index', {
        templateUrl: "acts/templates/index.html",
        controller: 'ActsController'
      })
      .when('/acts/:id', {
        templateUrl: "acts/templates/show.html",
        controller: 'ActsController'
      });
    }
  ]);
  
  var controllers = angular.module('controllers', []);
  </code></pre>
  
  <p><em>acts/controllers/ActsController.js</em></p>
  
  <pre><code>controllers = angular.module('controllers');
  
  controllers.controller('ActsController', [
    '$scope', 
    '$routeParams', 
    '$location', 
    '$resource', 
    function($scope,$routeParams,$location,$resource) {
      $scope.acts = [
        {
          id: 1, 
          name: "Plant a Flower", 
          description: "Plant a flower in your garden or along the street.",
          inspires: 1
        }
      ];
  
      $scope.addAct = function() {
        $scope.acts.push($scope.newAct);
      }
  
      $scope.deleteAct = function(act) {
        $scope.acts.splice($scope.acts.indexOf(act), 1);
      }
  
      $scope.linkToShowAct = function(act) {
        $location.path('acts/' + act.id);
      }
  }]);
  </code></pre>
  
  <p><em>acts/templates/index.html</em></p>
  
  <pre><code>&lt;div class="actions_body"&gt;
    &lt;div class="container"&gt;
      &lt;h2&gt;Listing Actions&lt;/h2&gt;
  
      &lt;div ng-controller="ActsController" class="body"&gt;
        &lt;table class="row"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th class="col-md-2 col-md-offset-1 active"&gt;
                &lt;label&gt;Name&lt;/label&gt;
              &lt;/th&gt;
              &lt;th class="col-md-4"&gt;Description&lt;/th&gt;
              &lt;th class="col-md-2"&gt;Inspires&lt;/th&gt;
              &lt;th colspan="2" class="col-md-2"&gt;Modify&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody ng-repeat="act in acts"&gt;
            &lt;td class="col-md-offset-1 col-md-2"&gt;&lt;a href="" ng-click="linkToShowAct(act)"&gt;{{act.name}}&lt;/a&gt;&lt;/td&gt;
            &lt;td class="col-md-4"&gt;{{act.description}}&lt;/td&gt;
            &lt;td class="col-md-2"&gt;{{act.inspires}}&lt;/td&gt;
            &lt;td&gt;&lt;a href="#"&gt;Edit&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt;&lt;button ng-click="deleteAct(act)"&gt;Delete&lt;/a&gt;&lt;/button&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
  
        &lt;br&gt;
  
        &lt;button ng-click="newActShow=true"&gt;New Action&lt;/button&gt;
        &lt;button ng-click="newActShow=false"&gt;Hide&lt;/button&gt;
  
        &lt;div ng-show="newActShow" id="newAct"&gt;
          &lt;div class="row"&gt;
            &lt;form class="form-inline" ng-submit="addAct()"&gt;
              &lt;div class="col-md-3 form-group"&gt;
                &lt;label for="newActname"&gt;Name&lt;/label&gt;
                &lt;input type="text" ng-model="newAct.name" id="newActname" placeholder="Name" class="form-control col-md-2"&gt;
              &lt;/div&gt;
              &lt;div class="col-md-3 form-group"&gt;
                &lt;label for="newActdescription"&gt;Description&lt;/label&gt;
                &lt;input type="textarea" ng-model="newAct.description" id="newActdescription" placeholder="Description" class="form-control col-md-2"&gt;
              &lt;/div&gt;
              &lt;div class="col-md-3 form-group"&gt;
                &lt;label for="newActinspires"&gt;Inspires&lt;/label&gt;
                &lt;input type="number" ng-model="newAct.inspires" id="newActinspires" placeholder="Inspires" class="form-control col-md-2"&gt;
              &lt;/div&gt;
              &lt;div class="col-md-3 form-group"&gt;
                &lt;input type="submit" value="+" class="btn btn-success"&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>acts/templates/show.html</em></p>
  
  <pre><code>&lt;div class="container" ng-controller="ActsController"&gt;
      &lt;div class="body"&gt;
  
          &lt;h1&gt;
              {{acts[0].name}}
          &lt;/h1&gt;
  
          &lt;p class="act-show-description"&gt;
              {{acts[0].description}}
          &lt;/p&gt;
  
          &lt;p class="act-show-inspires"&gt;
              &lt;strong&gt;Inspires:&lt;/strong&gt;
              {{acts[0].inspires}}
          &lt;/p&gt;
  
          &lt;a href="#/"&gt;Edit&lt;/a&gt;
          &lt;a href="#/"&gt;Back&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Again, my other controllers are working just fine. For example: </p>
  
  <p><em>application/controllers/NavBarController.js</em></p>
  
  <pre><code>controllers = angular.module('controllers');
  
  controllers.controller("NavBarController", [
    '$scope', 
    '$routeParams', 
    '$location',
    function($scope,$routeParams,$location) {
  
      $scope.actsIndex = function() {
        $location.path("/acts/index");
      }
  
      $scope.actsNew = function () {
        $location.path("/acts/index");
      }
  }]);
  </code></pre>