我正在从AngularJS.org视频教程中学习AngularJS，但运行代码时却说
错误：[ng：areq]参数'ReviewController'不是一个函数
我在控制台中未定义，但是我的代码与视频中的代码相同，这是我的html
<!doctype html>
<html ng-app="store">
<title>Testing AngularJS</title>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css"/>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
<img class="gallery" ng-src="{{product.images[0].full}}"/>
</h3>
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills">
<li ng-class="{active: panel.isSelected(1)}"><a href ng-click="panel.selectTab(1)">Description</a></li>
<li ng-class="{active: panel.isSelected(2)}"><a href ng-click="panel.selectTab(2)">Specifications</a>
</li>
<li ng-class="{active: panel.isSelected(3)}"><a href ng-click="panel.selectTab(3)">Reviews</a></li>
</ul>
<div class="panel" ng-show="panel.isSelected(1)">
<h3> Description</h3>
<h4>{{product.description}}</h4>
</div>
<div class="panel" ng-show="panel.isSelected(2)">
<h3> Specifications</h3>
<blockquote>None yet</blockquote>
</div>
<div class="panel" ng-show="panel.isSelected(3)">
<h3> Reviews</h3>
<blockquote ng-repeat="review in product.reviews">
<b>Stars: {{review.stars}}</b>
<p>{{review.body}}</p>
<cite>_{{review.author}}</cite>
</blockquote>
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl">
<blockquote>
<b>Stars: {{reviewCtrl.review.stars}}</b>
<p>{{reviewCtrl.review.body}}</p>
<cite>_{{reviewCtrl.review.author}}</cite>
</blockquote>
<label for="select">Select</label>
<select id="select" ng-model="reviewCtrl.review.stars">
<option value="1">1 star</option>
<option value="2">2 star</option>
<option value="3">3 star</option>
</select>
<label for="comments"></label>
<textarea id="comments" ng-model="reviewCtrl.review.body"></textarea>
<label for="email">Email</label>
<input ng-model="reviewCtrl.review.author" type="email" id="email"/>
<input type="submit" value="Submit"/>
</form>
</div>
</section>
</li>
</ul>
</body>
</html>
这是我的app.js文件
(function () {
var app = angular.module('store', []);
app.controller('StoreController', function () {
this.products = [
{
name: 'Cup',
price: 2.95,
description: 'It is the best Buy it fast',
images: [
{
full: 'gem.jpeg'
}
],
reviews: [
{
stars: 5,
body: 'This is the best gem',
author: '[email protected]'
},
{
stars: 1,
body: 'easily broken',
author: '[email protected]'
}
]
},
{
name: 'Bottle',
price: 1.12,
description: 'It\'s the best bottle',
images: [
{
full: 'gem.jpeg'
}
],
reviews: [
{
stars: 2,
body: 'Latest gem',
author: '[email protected]'
}
]
}
]; // product is the property of the controller
});
app.controller("ReviewController", function () {
this.review = {};
});
app.controller("PanelController", function () {
this.tab = 1;
this.selectTab = function (setTab) {
this.tab = setTab;
};
this.isSelected = function (checkTab) {
return this.tab === checkTab;
};
});
})();
问题在这里：
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
脚本按照在页面上遇到的顺序执行。所以angular.js跑之前app.js。在有机会执行之前，它将解析文档并尝试解决ng-app（从而解决ng-controller）app.js。
有两种简单的方法可以解决此问题：
将app.js内嵌在你的文档的末尾
尽管我确实说过脚本是按照遇到的顺序执行的，但是angularjs将其初始化代码放在了后面document.isready。它已加载，因此您可以访问angular.module，但是直到您自己的代码完成加载后，它才会执行其引导逻辑。该解决方案适用于小型项目，但是当代码变大时效果不佳。
手动引导您的应用程序
ng-app="store"从您的html代码中删除，然后在的末尾app.js，添加以下代码
angular.element(document).ready(function() {
angular.bootstrap(document, ['store']);
});`
如果您使用角度足够长的时间，您将习惯第二种解决方案，因为它可以帮助我们很好地使用$ script，RequireJS等动态加载程序，更不用说您发布的示例了！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句