我收到两条错误消息:未捕获错误:[$injector:nomod]模块"controllers"不可用!您拼错了模块名称或忘记加载它。如果注册模块,请确保将依赖项指定为第二个参数
和
错误:[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");
}
}]);
在acts/templates/index.html中尝试添加控制器脚本。检查这是否解决了加载问题。
<script src="scripts/controllers/ActsController.js"></script>
另外,在acts/controllers/ActsController.js文件中,请先尝试创建一个更简单的控制器版本。
angular.module('controllers')
.controller('ActsController', function () {
// something simpler
});