I'm currently working my way through an Angular for .Net book, and I'm stuck on a basic example that involves creating an app with two controllers. However, I keep encountering this error message and I can't figure out why the module instantiation is failing:
Unhandled exception at line 4138, column 9 in http://localhost:53990/Scripts/angular.js
0x800a139e - JavaScript runtime error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
This is the part of my code causing the issue
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS with .NET</title>
<script src="Scripts/angular.js"></script>
</head>
<body>
<h1>Game setup</h1>
<div ng-controller="ExampleController1">
<h2>Player 1</h2>
<label>Name:</label>
<input type="text" placeholder="Please enter player 1 name" ng-model="name" ng-focus="onNameFocused()" />
<h3 ng-show="name">Player 1 name is {{name}}</h3>
<h3 ng-show="previousName">Previous Player 1 name was {{previousName}}</h3>
</div>
<div ng-controller="ExampleController2">
<h2>Player 2</h2>
<label>Name:</label>
<input type="text" placeholder="Please enter player 2 name" ng-model="name" ng-focus="onNameFocused()" />
<h3 ng-show="name">Player 2 name is {{name}}</h3>
<h3 ng-show="previousName">Previous Player 2 name was {{previousName}}</h3>
</div>
<script>
(function () {
"use strict"
var myAppModule = angular.module('myApp', []);
myAppModule.controller('ExampleController1', ['$scope', function
($scope) {
$scope.name = "Alex Pop";
$scope.previousName = "";
$scope.onNameFocused = function () {
$scope.previousName = $scope.name;
};
}]);
myAppModule.controller('ExampleController2', ['$scope', function ($scope) {
$scope.name = "Alex Pop";
$scope.previousName = "";
$scope.onNameFocused = function () {
$scope.previousName = $scope.name;
};
}]);
console.log(myAppModule.name);
});
</script>
</body>
</html>
Any insights on what might be going wrong here?