我正在测试AngularJS，当我尝试可视化这个示例时，浏览器的控制台显示了类似这样的内容：
Error: Argument 'mainController as mainCtrl' is not a function, got undefined
at Error (native)
at bb
我的项目中只有两个文件
的index.html
<!doctype html>
<html ng-app="my-app">
<head>
<title>Angular controllers</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- AngularJS and JQuery include. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form name="particleForm" ng-controller="mainController as mainCtrl" ng-submit="mainCtrl.addData()">
{{ mainCtrl.data.email }}
<div class="form-group">
<label for="text" class="col-sm-2 col-sm-offset-2">E-mail</label>
</div>
<div class="col-sm-10">
<input type="text" name="text" class="form-control" ng-model="mainCtrl.data.email" placeholder="Enter e-mail..."></input>
</div>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
(function (){
var app = angular.module('my-app', []);
var list = [];
app.controller ('mainController', function (){
this.data = {};
this.addData = function (){
list.push (this.data);
list.data = {};
};
});
})();
我只想展示我input field上的所有内容。