Gardezi
Gardezi

Reputation: 2842

Syntax error while defining a basic angular application

Hello guys I'm kind of new to angular. I started to make a application using this Demo Angular Js Tutorial. The problem that I'm facing is I can't figure out how to solve the error that I'm getting. I have tried a bunch of solution but none of them worked for me. Here is the error that I'm getting

myapp.html:13 Uncaught ReferenceError: HelloController is not defined(anonymous function)
angular.js:13550 Error: [ng:areq] http://errors.angularjs.org/1.5.5/ng/areq?p0=HelloController&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:6:412
    at qb (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:23:157)
    at Pa (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:23:244)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:89:77
    at O (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:72:75)
    at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:64:7)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:58:305)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:58:322)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:57:455(anonymous function) @ angular.js:13550(anonymous function) @ angular.js:10225n.$apply @ angular.js:17334(anonymous function) @ angular.js:1749invoke @ angular.js:4665c @ angular.js:1747yc @ angular.js:1767ee @ angular.js:1652(anonymous function) @ angular.js:30863b @ angular.js:3166Qf @ angular.js:3456Pf.d 

and here is my code.

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    </head>
    <body ng-app>
        <div ng-controller="HelloController">
            <h2>Welcome {{helloTo.title}} to angular</h2>
        </div>
        <script>
            var myapp = angular.module("myapp" , [])

            .controller(HelloController , function($scope){
                $scope.helloTo = {};
                $scope.helloTo.title = "AngularJS";
            });
        </script>
    </body>
</html>

Please tell me what is it that I'm doing wrong

Upvotes: 2

Views: 825

Answers (2)

Pragnesh Khalas
Pragnesh Khalas

Reputation: 2898

For that you need to change as per below

<body ng-app="myapp">
    <div ng-controller="HelloController">
        <h2>Welcome {{helloTo.title}} to angular</h2>
    </div>
    <script>
        var myapp = angular.module("myapp", [])

        .controller("HelloController", function ($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
        });
    </script>
</body>

you were missing assign module name and string quote in HelloController.

Upvotes: 1

abhinsit
abhinsit

Reputation: 3272

You have missed the quotes around the controller name, due to which the angular parser is thinking of it as another variable which is not found on your page/code.

var myapp = angular.module("myapp" , [])

                .controller('HelloController' , function($scope){
                    $scope.helloTo = {};
                    $scope.helloTo.title = "AngularJS";
                });

Upvotes: 1

Related Questions