Angular error Error: [ng:areq]

Question

I'm new on Angular, I'd like to know what's wrong with my code, because the browser shows me this error: Error: [ng:areq] http://errors.angularjs.org/1.4.7/ng/areq?p0=HelloWorldCtrl&p1=not%20a%20function%2C%20got%20undefined at Error (native)

y el codigo es este:

    <!doctype html>
<html ng-app>
<head>
    <title>Angular Practice</title>
</head>
<body>
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>

    <script src="angular.min.js"></script>
    <script type="text/javascript">
        function HelloWorldCtrl($scope) {
            $scope.helloMessage = "Angular Practice";
        }
    </script>
</body>
</html>

Thanks a lot.

Answer 1

Steps to make it working,

• Add a ng-app directive to your <html> tag
• Define your module app in the script below.
• Define your controller HelloWorldCtrl as below.

Check this Plunker - http://plnkr.co/edit/w8RWm6nr1WgvhX3BbGUE?p=preview

!DOCTYPE html>
    <html ng-app="app">

      <head>     
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>       
      </head>

         <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>    

        <script type="text/javascript">
          angular.module('app', []);
          angular.module('app').controller('HelloWorldCtrl', [ '$scope', function($scope) {
            $scope.helloMessage = "Angular Practice";

          }]);
        </script>

    </html>

Answer 2

Your HelloWorldCtrl isn't defined.

This is because you're not binding it as an angular module with a controller attached.

ng-controller looks for a definition like this:

angular.module('HelloWorldCtrl', [])

    .controller('HelloWorldCtrl', function($scope){
        $scope.helloMessage = "Angular Practice";
    });

That controller also needs to be assigned to the main app, which you need to reference on that ng-app directive, i.e.

<html ng-app="helloWorldApp">

Which should point to a module you create as such:

var helloWorldApp = angular.module('helloWorldApp ', [
    'HelloWorldCtrl'
])

Notice, I'm including a 'HelloWorldCtrl' reference as an item for the second parameter on that module definition. This tells angular to load that controller as a resource which you can then reference through that ng-controller directive.

EDIT:

Did a little research on my mention of adding 'HelloWorldCtrl' as an item in the array above and wanted to elaborate a little bit on why my solution is slightly different than the other answer here. The way I've set it up, is such that 'HelloWorldCtrl' is a separate module. In this case you do need to reference it in the way I have. This tells the app module that it depends on the 'HelloWorldCtrl' module. In the answer below mine is binding that controller directly to the app, in which case this isn't necessary.