Angular：未捕获的错误：[$injector:nomod] 模块“控制器”不可用！您要么拼错了模块名称，要么忘记加载它

Question

我收到两条错误消息： 未捕获的错误：[$injector:nomod] 模块“控制器”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

和

错误：[ng:areq] 参数“ActsController”不是函数，未定义

我假设我的 ActsController.js 文件无法加载。但是，我还有其他可以正常加载的控制器文件。只有这一个会造成麻烦。

app.js

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', []);

acts/controllers/ActsController.js

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);
    }
}]);

acts/templates/index.html

<div class="actions_body">
  <div class="container">
    <h2>Listing Actions</h2>

    <div ng-controller="ActsController" class="body">
      <table class="row">
        <thead>
          <tr>
            <th class="col-md-2 col-md-offset-1 active">
              <label>Name</label>
            </th>
            <th class="col-md-4">Description</th>
            <th class="col-md-2">Inspires</th>
            <th colspan="2" class="col-md-2">Modify</th>
          </tr>
        </thead>
        <tbody ng-repeat="act in acts">
          <td class="col-md-offset-1 col-md-2"><a href="" ng-click="linkToShowAct(act)">{{act.name}}</a></td>
          <td class="col-md-4">{{act.description}}</td>
          <td class="col-md-2">{{act.inspires}}</td>
          <td><a href="#">Edit</a></td>
          <td><button ng-click="deleteAct(act)">Delete</a></button>
        </tbody>
      </table>

      <br>

      <button ng-click="newActShow=true">New Action</button>
      <button ng-click="newActShow=false">Hide</button>

      <div ng-show="newActShow" id="newAct">
        <div class="row">
          <form class="form-inline" ng-submit="addAct()">
            <div class="col-md-3 form-group">
              <label for="newActname">Name</label>
              <input type="text" ng-model="newAct.name" id="newActname" placeholder="Name" class="form-control col-md-2">
            </div>
            <div class="col-md-3 form-group">
              <label for="newActdescription">Description</label>
              <input type="textarea" ng-model="newAct.description" id="newActdescription" placeholder="Description" class="form-control col-md-2">
            </div>
            <div class="col-md-3 form-group">
              <label for="newActinspires">Inspires</label>
              <input type="number" ng-model="newAct.inspires" id="newActinspires" placeholder="Inspires" class="form-control col-md-2">
            </div>
            <div class="col-md-3 form-group">
              <input type="submit" value="+" class="btn btn-success">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

acts/templates/show.html

<div class="container" ng-controller="ActsController">
    <div class="body">

        <h1>
            {{acts[0].name}}
        </h1>

        <p class="act-show-description">
            {{acts[0].description}}
        </p>

        <p class="act-show-inspires">
            <strong>Inspires:</strong>
            {{acts[0].inspires}}
        </p>

        <a href="#/">Edit</a>
        <a href="#/">Back</a>
    </div>
</div>

同样，我的其他控制器工作正常。例如：

应用程序/控制器/NavBarController.js

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");
    }
}]);

Answer 1

在您的acts/templates/index.html 中尝试添加控制器脚本。检查这是否解决了加载问题。

<script src="scripts/controllers/ActsController.js"></script>

同样在acts/controllers/ActsController.js 文件中，首先尝试创建一个更简单的控制器版本。

angular.module('controllers')
  .controller('ActsController', function () {
   // something simpler 
  });