Gardezi Gardezi - 6 months ago 139
Javascript Question

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

Answer

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.