codefreak codefreak - 8 months ago 29
AngularJS Question

ReferenceError: Angular is not defined Error - Mean

i am learning MEAN from Thinkster.io and in the second step he shows the dummy hello world output on the screen. When I try to replicate that I get the following error:

$ node app
F:\nodeProjects\flapperNews\app.js:3
angular.module('flapperNews')
^

ReferenceError: angular is not defined
at Object.<anonymous> (F:\nodeProjects\flapperNews\app.js:3:1)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3


My app.js is as follows:

angular.module('flapperNews', []).controller('MainCtrl', [
'$scope',
function($scope){
$scope.test = "Hello World";
}]);


and index.html goes like:

<!DOCTYPE html>
<html>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app ="flapperNews" ng-controller="MainCtrl">
</body>
</html>


I have done some research on this error where the solution is to properly place the tag, but that doesn't solve the problem for me.
Can somebody please explain what is that is missed here and how to start the server.
Thanks

Answer Source

You are confusing frontend with backend, you are trying to execute frontend code that is inside app.js file using a nodejs backend server, as if it was a nodejs script.

What you need to do is load the html and js for your angularjs frontend using a web browser.

You can do that just opening the html file with a web browser (double clicking the html file), or you can create a web server and serve html and js files using something like apache, nginx or nodejs/express server.

See more on the last one here Node js as http server and host angularJS SPA and here https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular