I'm feeling a bit lost when it comes to angularjs and I have a question about why my angularjs app is refusing to bootstrap without creating a module, even though egghead.io and other tutorials seem to suggest otherwise. Here's a snippet of my HTML template:
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js@*" data-semver="1.4.0-beta.1" src="https://code.angularjs.org/1.4.0-beta.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
Then there's the controller.js file which doesn't seem to work:
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
However, when I define a module [naming ng-app as 'hello'] and create a controller, it magically works:
angular.module('hello', []).controller('HelloController', function($scope) {
$scope.greeting = { text: 'Hello' };
});
I'm just struggling to understand the reason behind this behavior. Any insights are greatly appreciated.