Simple AngularJS HelloWorld doesn't work

Question

I'm newbie at AngularJS. Just wrote a simple Hello World to play with Angular. It seems it doesn't work and I can't understand why.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello Angular World</title>
</head>
<body>

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

    <script src="angular.js"/>
    <script type="text/javascript">
    function HelloWorldCtrl($scope) {
        $scope.HelloAngularWorld = "Hi World of Angular!";
    }

    </script>
</body>
</html>

Could you please point on my mistake?

Take a look: http://stackoverflow.com/questions/19398190/cant-get-hello-world-to-work-with-angular-js/19398229#19398229 — Ivan Chernykh, Mar 29 '14 at 13:07
See this example from their front page [http://stackoverflow.com/questions/33845076/data-binding-in-angular-js/39002950#39002950](http://stackoverflow.com/questions/33845076/data-binding-in-angular-js/39002950#39002950) — Umar Farooque Khan, Aug 17 '16 at 17:46

score 2 · Accepted Answer · answered Mar 29 '14 at 13:09

2

Load AngularJS in the head and assign ng-app to one of the parents of the controller element (e.g. html or body so you get <html ng-app>).

See this example from their front page: http://angularjs.org/#add-some-control

answered Mar 29 '14 at 13:09

Jahed

484
2
8

Thanks. But now I got "Error: [ng:areq] Argument 'HelloWorldCtrl' is not a function, got undefined" error at browser console – Michael Z Mar 29 '14 at 13:17
1. it is enough to load AngularJS somewhere on the page , don't have to do it in the head. 2. it is ok to put the `ng-app` to controller' element itself. http://plnkr.co/edit/z81xeUqQyQQDSuVsdMpR?p=preview – Ivan Chernykh Apr 05 '14 at 11:03

Simple AngularJS HelloWorld doesn't work

1 Answers1