I've recently started learning AngularJS, but I'm encountering an issue where none of my code is being executed when I run the page. Instead, all I see on the website is {{angular-message}} and I'm receiving the error "Error: [ng:areq] Argument 'MainController' is not a function, got undefined." Here is the code:
index.html
<!DOCTYPE html>
<html ng-app>
<head data-gwd-animation-mode="quickMode">
<title>Angular!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="Google Web Designer 1.1.2.0814">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
body {
background-color: transparent;
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
}
</style>
<script data-require="angular.js@*" src="https://code.angularjs.org/1.3.0-rc.0/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
{{angular-message}}
</body>
</html>
And here is my script.js file.
var MainController = function($scope)
{
$scope.angular-message = "AngularJS Rocks!"
}