Error Argument is not defined

I'm testing AngularJS and when I try to visualize this example the browser's console shows me something like this:



Error: Argument 'mainController as mainCtrl' is not a function, got undefined
at Error (native)
at bb


I only have two files in my project



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 = {};
};
});
})();


I only want to show everything I put on that input field.



Answers

The FooController as FooCtrl syntax is only available starting with AngularJS 1.1.5 (see this). You're using 1.0.8.