None of my AngularJS code is being executed?

Question

I'm trying to start out with AngularJS, but when I run the page, none of my code is getting executed, the out put is just {{angular-message}} on the website. I'm getting 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!" 
}

@DesignbyAdrian I forgot to check, but I just did and it says "Error: [ng:areq] Argument 'MainController' is not a function, got undefined" — WilsonKoder111, Sep 07 '14 at 11:23

score 2 · Answer 1 · edited May 23 '17 at 11:57

2

You have a syntax error in the page. angular-message is not a valid identifier in Javascript, so you shoud use bracket notation:

$scope['angular-message'] = "AngularJS Rocks!";

or even better use camel case for variable and properties names:

$scope.angularMessage = "AngularJS Rocks!";

Also make sure you keep your developer console open all the time during development, to make sure you never miss errors.

edited May 23 '17 at 11:57

Community

1
1

answered Sep 07 '14 at 11:17

dfsq

191,768
25
236
258

You need to declare module as well: http://plnkr.co/edit/cOlMEZOfVxLagxnTfjNu?p=preview – dfsq Sep 07 '14 at 11:30

score 1 · Answer 2 · answered Sep 07 '14 at 11:36

1

If you don't want to have module, Code it like this:

function MainController($scope)
{
   $scope.angularMessage = "AngularJS Rocks!" 
}

Render:

{{angularMessage}}

answered Sep 07 '14 at 11:36

Ravi

1,320
12
19

None of my AngularJS code is being executed?

2 Answers2