The structure of my directory is as follows:
-flapper-news
-app.js
-index.html
Within app.js, I have the following code:
angular.module('flapperNews', [])
.controller('MainCtrl', [
'$scope',
function($scope){
$scope.test = 'Hello world!';
}]);
In index.html, the content is:
<html>
<head>
<title>My Angular App!</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="flappeNews" ng-controller="MainCtrl">
<div>
{{test}}
</div>
</body>
</html>
Upon opening index.html in Google Chrome, only the binding "{{test}}" is visible, indicating that something is not working correctly. In the browser console, the error message reads:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=flappeNews&p1=Erro…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.19%2Fangular.min.js%3A18%3A139)
Despite attempting various solutions such as changing the version of Angular and including ngroute in my module, the issue persists. Any insights into what might be causing this problem?