Angular:Uncaught Error:[$ injector:nomod]模块'控制器'不可用!您要么错误拼写了模块名称,要么忘记加载它

时间:2015-12-07 22:38:26

标签: angularjs

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

错误:[ng:areq] Argument' 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', []);

作用/控制器/ 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);
    }
}]);

作用/模板/ 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>

作用/模板/ 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");
    }
}]);

1 个答案:

答案 0 :(得分:0)

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

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

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

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